Gulp是最近很火的开源项目,是一个基于任务的设计模式的自动化前端构建工具。同类工具中有比它成名更早更为流行的是Grunt,国内也有百度出品的FIS。
Grunt很强大,有很完善的社区和设计模式,但是学习成本很高。FIS是互联网公司的产物,更多的是匹配适应自己的项目流程。虽然有亮点有创新,但是社区实在有些混乱,人员变动也是其中很大的变数之一。Gulp相比起来就简单可靠的多,对于我这样的喜欢偷懒的人来说简直是绝配!
实际工作中,我用Gulp的功能并不多,主要也只是用于项目文件的压缩、测试、合并!这些都可以很容易用Gulp实现。

###Gulp 语法###
Gulp语法非常简单,和jQuery很相似,所以理解起来很方便。下面是Gulp配置文件啊gulpfile.js的写法:

gulp.task('concat', function(){
  gulp.src('./src/js/*.js')
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('./build'));
})

非常简单的几句就执行了js目录下所有的js文件压缩、合并、输出的操作。
###Gulp 安装###
Gulp与Grunt, FIS一样是基于node.js的,使用npm安装即可。
全局安装

$npm install gulp -g

安装到项目,在项目目录中增加Gulp.js依赖

$npm install gulp --save-dev gulp gulp-util

P.S 最近国内使用npm经常抽风,请自行Google解决办法或使用cnpm来安装Gulp。$npm install -g cnpm --registry=http://r.cnpmjs.org

在项目根目录创建gulpfile.js文件,gulp通过gulpfile.js文件来知道我们要它完成那些任务。内容为:

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function(){
  // place code for your default task here
});

运行$gulp命令,出现如下界面:

1233.jpg

表示运行 default 成功!
###选择Gulp插件###
既然我们需要用Gulp来实现任务自动化,首先我们需要明确我们需要它执行哪些任务!
就我日常工作中只需要用的下面几个任务:

  • CSS的压缩、合并
  • Javascript的压缩、测试、合并
  • 图片的压缩

根据上面的需求,我们可以找到与之相对应的gulp插件:

  • gulp-imagemin: 用于图片的压缩
  • gulp-minify-css: 用于CSS的压缩
  • gulp-uglify: 用于Javascript的压缩
  • gulp-jshint: 用于Javascript验证
  • gulp-concat: 用于文件合并

更多组件可以在gulp plugins中找到,目前有430多款插件,还在不断增加中...

###安装Gulp插件###
npm install --save-dev gulp-imagemin gulp-minify-css gulp-uglify gulp-jshint gulp-concat

###编写gulpfile.js脚本###

// 引入 gulp
var gulp = require('gulp');

// 引入组件
var imagemin = require('gulp-imagemin');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');

// 压缩图片
gulp.task('images', function() {
  return gulp.src('./src/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('./dist/images'))
});

// 合并、压缩、重命名css
gulp.task('minifycss', function() {
  return gulp.src('./src/css/*.css')
    .pipe(minifycss())
    .pipe(concat('all.min.css'))
    .pipe(gulp.dest('./dist/css'));
});

// 检查js
gulp.task('lint', function() {
  return gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// 合并,压缩js文件
gulp.task('javascripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('./dist/js'));
});


// 默认任务
gulp.task('default', function(){
  gulp.run('images', 'minifycss', 'lint', 'javascripts');

  // Watch image files
  gulp.watch('./src/images/**/*', ['images']);

  // Watch .css files
  gulp.watch('./src/css/*.css', ['minifycss']);

  // Watch .js files
  gulp.watch('./src/js/*.js', ['lint', 'javascripts']);

});

###运行Gulp###
在项目目录下执行$ gulp命令,就会执行default任务:依次运行images,minifycss,lint,javascripts四个任务,然后监视文件的变动,如果有改动再执行相应的任务(如果有css文件改动时就会实行minifycss任务)。

也可以执行指定任务,比如单独执行压缩合并CSS文件任务,则可以使用$ gulp minifycss来单独执行!

更详细的教程可以参考Gulp.js—比Grunt更易用的前端构建工具及Google。