前端自动化构建工具 gulpjs

1. 前端自动化构建工具

在处理前端场景时，用 Less 写 CSS，用 Jade 写 HTML，用 Browserify 模块化，为非覆盖式部署的资源加 MD5 戳等。这些工作如果纯手工来做，工作效率将会非常低。而前端自动化构建工具可以把这些重复工作一次配置，多次重复执行，极大的提高开发效率。前端自动化构建工具主要提供如下特征功能：

• 版本控制
• 检查 JS
• 图片合并
• 压缩并重命名 CSS
• 压缩并重命名 JS
• 编译 LESS、SASS

2. 常见的前端自动化构建工具

2.1 Grunt

基于 Node.js 的插件工具 Grunt，本身是一个执行器，大量的功能都存在于NPM管理的插件中。特别是以 grunt-contrib- 开头的核心插件，覆盖了大部分的核心功能，比如 handlebars，jade，less，compass，jshint，jasmine，clean，concat，minify，copy，uglify，watch，minify，uglify 等。可以把 grunt 理解为一组 task，比如说合并若干 js（concat）、压缩js（min）、测试js（qunit）等等。

2.2 Gulp

基于 Node.js 的插件工具 Gulp，主要是针对 Grunt 的不足发起的一个项目。由于借鉴了 Unix 操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。相比 Grunt 频繁的 I/O 操作，Gulp 能更快地更便捷地完成构建工作。Gulp 具有如下优点:

2.3 Yeoman

Yeoman 是 Google 领头开发的一个前端构建工具，它的目的是为了给新项目建立一个完整的工作流，让开发人员可以专注于解决问题而不是担心那些不必要的小事情。Yeoman 提供 generator 系统，一个 generator 是一个插件。Yeoman 提供了三个工具：脚手架（yo），构建工具（grunt），包管理器（bower）。这三个工具是分别独立开发的，但是需要配合使用，来实现我们更高效的工作流模式。其他还有百度的 FIS3，Webpack，Rollup.js

3. Gulp 安装与配置

Gulp 是基于 Nodejs 构建的工具。首先需要安装 Nodejs 和 NPM 包管理工具。

3.1 安装 gulp

1

npm install -g gulp  //以全局方式安装

使用 gulp -v 命令可以查看 Gulp 版本号，每构建一个新项目时，都需要从这步骤开始再单独安装一次，保持每个项目的独立性。

3.2 开始使用 gulp 构建项目

生成 package.json

1

npm init

3.3 常用的 gulp 插件

1
2
3
4
5
6

npm install --save-dev gulp            //本地使用gulp  <br>
npm install --save-dev jshint <br>
npm install --save-dev gulp-jshint     //js代码检测<br>
npm install --save-dev gulp-uglify     //js压缩<br>
npm install --save-dev gulp-livereload //页面自动刷新<br>
npm install --save-dev gulp-webserver  //静态服务器<br>

其他插件gulp-load-plugins //自动加载package.json中的文件依赖gulp-imagemin //压缩图片gulp-minify-css //压缩cssgulp-ruby-sass //sassgulp-concat //文件合并gulp-rename //文件重命名png-sprite //png合并gulp-htmlmin //压缩htmlgulp-clean //清空文件夹browser-sync //文件修改浏览器自动刷新gulp-shell //执行shell命令gulp-ssh //操作远程机器run-sequence //task顺序执行注：–save 是对生产环境所需依赖的库, –save-dev 是对开发环境所需依赖的库。只需要选择使用到的库安装即可。在安装完毕相关包之后，gulp 会自动将包的版本信息添加到 package.json 文件中。

3.4 Gulp 任务配置：gulpfile.js

gulp 是一个 task 的执行器，需要将每个 task 写入 gulpfile.js，Gulp 才能够自动化执行。在根目录下创建 gulpfile.js 文件，也可以参考官方说明 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var  gulp = require('gulp'), 
      jshint = require('gulp-jshint'),
      uglify = require('gulp-uglify'),
      livereload = require('gulp-livereload');

//校验JS文件，jshint校验规则
gulp.task('lint', function() { 
      return gulp.src('src/js/**/*.js') 
      .pipe(jshint()) 
      .pipe(jshint.reporter('default'));
}); 

//压缩JS文件
gulp.task('scripts', function() { 
      return gulp.src('src/js/**/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));

// 预设任务
gulp.task('default', function() {
      gulp.start('lint', 'scripts');
});

// 看守
gulp.task('watch', function() {	 
       gulp.watch('src/js/*.js',['lint','scripts']);	   
       livereload.listen();
       // Watch any files in dist/, reload on change
       gulp.watch(['dist/**']).on('change', livereload.changed);
});

项目的目录结构：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

│ gulpfile.js 
│ package.json
│ node_modules
├─dist 
│     └─js 
│         main.js 
│          
└─src
   └─js 
      │ main.js
      │ index.html

在项目的根目录下，执行 gulp 命令，执行 task 任务，完成编译。

1

gulp

每次修改都需要执行一次gulp命令，比较麻烦，直接使用gulp watch命令看守，当发生变化时自动执行指定的task。

1

gulp watch

4. 参考

• http://www.cnblogs.com/2050/p/4198792.html