首页 > 代码库 > 自动构建工具Gulp
自动构建工具Gulp
摘要：
gulp与grunt一样，都是自动构建工具。和grunt相比它更突出一个流的概念，任务是一个接一个执行的。今天就分享如何用gulp做自动化。
安装：
gulp也是基于node环境，所以安装gulp之前你需要安装node.js。
npm install -g gulp
只要在命令窗口中执行上面一行命令就完成安装，这样安装的是全局安装。在项目中一般是通过package.json中的devDependencies属性来安装。如下：
{ "name": "", "version": "0.0.0", "description": "", "main": "gulpfile.js", "dependencies": {}, "devDependencies": { "gulp": "~3.5.6" }, "license": "ISC"}
执行npm install就会将gulp安装到当前项目中。
如何运行：
安装完gulp之后，需要新建一个gulpfile.js文件，一般是在项目的根目录，与package.json放在一块。那gulpfile.js文件里面到底写什么呢？当然是定义一些任务。如下：
var gulp = require(‘gulp‘);gulp.task(‘default‘, function() { // 执行任务});
然后在当前目录中通过命令窗口执行gulp，default里面的任务就会被执行。
配置参数：
gulp.src(globs[, options])
加载文件，并将文件以流的方式传到插件中，如下：
gulp.src(‘client/templates/*.jade‘) .pipe(jade()) .pipe(minify()) .pipe(gulp.dest(‘build/minified_templates‘));
gulp首先会加载client/templates/下的所有jade文件，然后分别传递给jade插件、minify插件，然后输出到build/minified_templates中。
globs
类型：String，Array
文件或者是路径，多个文件以数组的形式。
options
类型：Object
gulp通过options将配置参数传递给node
options.buffer
类型：bool
默认值： false
是否将文件以流的方式返回，false设置文件内容以流的方式读取，并且不缓存，对于大文件设置缓存将是非常有用的。
options.read
类型：bool
默认值：true
设置是否读取文件，如果设置false将永远不读取文件
options.base
类型： String
设置输出文件的根目录，如下：
gulp.src(‘client/js/**/*.js‘) // Matches ‘client/js/somedir/somefile.js‘ and resolves `base` to `client/js/` .pipe(minify()) .pipe(gulp.dest(‘build‘)); // Writes ‘build/somedir/somefile.js‘gulp.src(‘client/js/**/*.js‘, { base: ‘client‘ }) .pipe(minify()) .pipe(gulp.dest(‘build‘)); // Writes ‘build/js/somedir/somefile.js‘
gulp.dest(path[, options])
输出文件，可以输出到不同目录下，如果目录不存在就创建，如下：
gulp.src(‘./client/templates/*.jade‘) .pipe(jade()) .pipe(gulp.dest(‘./build/templates‘)) .pipe(minify()) .pipe(gulp.dest(‘./build/minified_templates‘));
path
类型： String，Function
设置输出文件的路径
options.cwd
类型： String
默认值： process.cwd()
输出的文件夹，只有当路径为相对路径时才起作用
options.mode
类型：String
默认值：0777
设置输出文件的权限
gulp.task(name[, deps], fn)
定义一个任务，如下：
gulp.task(‘somename‘, function() { // Do stuff});
name
任务名，调用任务是只需要gulp.run(任务名)
deps
类型：Array
执行当前任务所需要依赖的任务，被依赖的任务会在当前任务执行之前执行。注意异步任务
fn
需要执行的任务都定义在此处
异步执行任务：
使用回调函数
// run a command in a shellvar exec = require(‘child_process‘).exec;gulp.task(‘jekyll‘, function(cb) { // build Jekyll exec(‘jekyll build‘, function(err) { if (err) return cb(err); // return error cb(); // finished task });});
返回一个文件流
gulp.task(‘somename‘, function() { var stream = gulp.src(‘client/**/*.js‘) .pipe(minify()) .pipe(gulp.dest(‘build‘)); return stream;});
使用promise
var Q = require(‘q‘);gulp.task(‘somename‘, function() { var deferred = Q.defer(); // do async stuff setTimeout(function() { deferred.resolve(); }, 1); return deferred.promise;});
注意任务依赖关系，下面是一个例子：
var gulp = require(‘gulp‘);// takes in a callback so the engine knows when it‘ll be donegulp.task(‘one‘, function(cb) { // do stuff -- async or otherwise cb(err); // if err is not null and not undefined, the run will stop, and note that it failed});// identifies a dependent task must be complete before this one beginsgulp.task(‘two‘, [‘one‘], function() { // task ‘one‘ is done now});gulp.task(‘default‘, [‘one‘, ‘two‘]);
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
监听文件，当文件发生变化时，定义的任务将会被执行。如下当js文件发生改变时会触发change事件。
var watcher = gulp.watch(‘js/**/*.js‘, [‘uglify‘,‘reload‘]);watcher.on(‘change‘, function(event) { console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);});
或者：
gulp.watch(‘js/**/*.js‘, function(event) { console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);});
实例：
下面是一个简单的例子，实现js、css的压缩合并。
package.json安装模块
{ "name": "", "version": "0.0.0", "description": "", "main": "gulpfile.js", "dependencies": {}, "devDependencies": { "gulp": "~3.5.6", "gulp-minify-css": "~0.3.0", "gulp-uglify": "^1.0.0", "gulp-concat": "~2.0.0", "gulp-rename": "^1.0.0" }, "license": "ISC"}
gulpfile.js
var gulp = require(‘gulp‘);// 加载模块var minifycss = require(‘gulp-minify-css‘), // CSS压缩 uglify = require(‘gulp-uglify‘), // js压缩 concat = require(‘gulp-concat‘), // 合并文件 rename = require(‘gulp-rename‘); // 重命名// 合并、压缩、重命名cssgulp.task(‘min-styles‘, function() { gulp.src([‘./static/css/*.css‘]) .pipe(concat(‘all.css‘)) .pipe(gulp.dest(‘./static/build/css/‘)) .pipe(rename({ suffix: ‘.min‘ })) .pipe(minifycss()) .pipe(gulp.dest(‘./static/build/css‘));});// 合并，压缩js文件gulp.task(‘min-javascripts‘, function() { gulp.src(‘./static/js/*.js‘) .pipe(concat(‘all.js‘)) .pipe(gulp.dest(‘./static/build/js‘)) .pipe(rename({ suffix: ‘.min‘ })) .pipe(uglify()) .pipe(gulp.dest(‘./static/build/js‘));});// 定义develop任务发布或者运行时使用gulp.task(‘develop‘,function(){ gulp.run(‘min-styles‘,‘min-javascripts‘);});// gulp命令默认启动的就是defaultgulp.task(‘default‘, function() { // 监听.css文件,一旦有变化,立刻调用min-styles任务执行 gulp.watch(‘./css/*.css‘, [‘min-styles‘]); gulp.run(‘develop‘);});
在gulpfile.js文件目录下，通过命令窗执行gulp，则default任务就会执行。
自动构建工具Gulp