现代web前端开发工具和流程

发表于   |   分类于   |  

1.版本控制

  • SVN
  • GIT
    推荐使用git，git安装和图形化界面tortoiseGit安装，git与github联系不在本文的讨论范围，请自行搜索。
    在github中新建一个项目
    在本地使用图形Git–>git clone
    或者使用命令：
    1
    git clone  git://github.com/someone/some_project.git

文件夹就是我们的项目文件夹。

2.前端自动化

2.1 gulp

Gulp通过流和代码优于配置策略来尽量简化任务编写的工作。当使用流时，Gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。

2.1.1 安装命令行工具

1
npm install -g gulp

2.1.2 创建好package.json文件（包管理文件）,安装局部gulp

1
npm install --save-dev gulp

下载的包会存放在项目的node_modules文件夹下
包依赖会加入到package.json中:

1
2
3
"devDependencies": {
    "gulp": "^3.9.1"
  }

2.1.3 新建gulpfile.js文件

四个主要API

  • gulp.task(name[, deps], fn)：注册任务
  • gulp.src(globs[, options])：指明源文件路径
  • gulp.dest(path)：指明任务处理后的目标输出路径
  • gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])：监视文件的变化并运行相应的任务。

实例见3.2 在gulpfile.js中配置。

2.1.4 运行

1
gulp

2.2 grunt

2.2.1 安装 grunt-cli

1
npm install grunt-cli -g

2.2.2 配置grunt

在项目中添加两份文件：package.json 和 Gruntfile。

  • package.json //项目自动化所依赖的相关插件。
  • Gruntfile.js //项目自动化工作流配置文件。

安装Grunt 和 grunt插件

1
2
npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev

配置Gruntfile.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);
};

2.2.3 运行

1
grunt

3.SASS

‘CSS预处理器’，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

3.1 安装

1
2
npm install --save-dev gulp-sass
npm install --save-dev gulp-watch

gulp-sass是用来将SASS转化为CSS的，gulp-watch是用来观察文件修改的变化
我们来看package.json文件的变化

1
2
3
4
5
"devDependencies": {
    "gulp":"^3.9.1",
    "gulp-sass":"^2.3.1",
    "gulp-watch":"^4.3.6",
}

3.2 在gulpfile.js 中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var path = {
    sass_isstudy:'./modules/istudy/sass/',
};
gulp.task('default', function() {
    // 将你的默认的任务代码放在这
});

gulp.task('sass', function() {
    return gulp.src(path.sass_isstudy+'*.scss')
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest('./modules/istudy/css'));
});

gulp.task('sass:watch', function() {
     gulp.watch(path.sass_isstudy+'*.scss', ['sass']);
     // gulp.watch('./modules/istudy/sass/*.scss').on('change',livereload);
});   //监控sass变化

3.3 命令执行

1
gulp sass:watch

执行上诉命令，在sass文件修改、保存后，gulp就会将sass文件转化为css文件

4.模块化编程

具体参见文章【javascript模块化编程】

4.1 ES5时代

以seajs为例：
CMD(Custom Module Definition)通用模块加载

4.1.1 seajs

引入seajs文件

1
<script type="text/javascript" src="../../common/jsext/sea-debug.js"></script>

seajs 的简单配置

1
2
3
4
5
6
7
8
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})
// 加载入口模块
seajs.use("../static/hello/src/main");//入口

定义模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

4.2 ES6时代

1
2
3
4
5
6
//bar.js
function hello(who){
    return "hello "+who;
}

export {hello};
1
2
3
4
5
6
7
8
9
//foo.js
import {hello} from "bar";

var name = "zs";
function awe(){
    console.log(bar.hello(name).toUpperCase());
}

export {awe};
1
2
3
4
5
6
7
//baz.js
import {bar} from "bar";
import {foo} from "foo";

console.log(bar.hello('张三'));//hello 张三

foo.awe();//HELLO ZS

当然现在需要使用babel转成es5，并且要使用打包工具browserify webpack rollup 等才能直接在现在的浏览器上运行。

5.组件化

组件化的思路是将一个模块独立开来，比如要写一个选择器按钮，将其分为三层：

数据层：用来决定按钮个数以及按钮是否选择
表现层：按钮使用现有的ui组件
逻辑层：按钮事件等逻辑处理

参考阅读：

热评文章