gulp是一个前端的自动化项目构建工具,与grunt 类似,不过相比之下,grunt的配置以及使用较为繁琐,而gulp则比较简单易学。

一个项目从最初的启动到实现,基本上有如下的构建任务:

通过使用gulp,可以自动化执行以上的大部分构建任务,从而使得项目的构建变得轻松易行。下面是一个例子:

项目结构如图所示:

|---build/
|---node_modules/
|---src/
|    |---foo.js
|    |---bar.js
|    |---main.js
|---test/
|    |---test.js
|---gulpfile.js
|---index.html
|---package.json

其中src目录下的代码如下,通过browserify,我们可以在浏览器环境中使用CommonJS规范进行模块开发:

/* foo.js */
module.exports = function(i) {
	return i + 1;
};

/* bar.js */
module.exports = function(i) {
	return i * 100;
};

/* main.js */
var foo = require('./foo.js');
var bar = require('./bar.js');
var a = foo(3) + bar(4);
console.log(a);

然后是gulpfile.js:

var gulp = require('gulp');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var uglisfy = require('gulp-uglify');
var jshint = require('gulp-jshint');
var browserify = require('gulp-browserify');
var mocha = require('gulp-mocha');

gulp.task('clean', function() {
    del('build/*');
});

gulp.task('scripts', ['clean'], function() {
    gulp.src('test/test.js')
        .pipe(mocha());

    gulp.src('src/main.js')
        .pipe(sourcemaps.init())
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(browserify())
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('build'));
});

gulp.task('watch', function() {
    gulp.watch('src/*.js', ['scripts']);
})

gulp.task('default', ['watch', 'scripts']);

gulp的构建过程以task为基本单位,默认task为default,通过这种方式,可以很方便地定义构建任务。在上面的代码中,主要有如下任务:

  • clean 清除之前的build代码
  • scripts 脚本构建任务,包括测试、检查、合并以及压缩等
  • watch 实时监控脚本的变化并自动build
  • default 默认的执行任务

然后执行gulp命令即可进行自动构建。

关于gulp的详细文档,可以参看https://github.com/gulpjs/gulp/blob/master/docs/README.md