gulp中文文档

##简介：

反正官方网站上都是吹牛逼，所以这里我就随便写写了

Gulp是新一代的前端构建引擎，相比与Grunt配置要更简单，相对的速度也会更快速。

对于使用者而言，如果有一些nodejs的基础，将会更加快速的理解Gulp的使用和配置，因为它的语法，真的很像你写一个简单的nodejs小脚本！

最后附上官网地址：gulpjs.com

###开始：

#####1.首先，你要在全局环境中通过npm安装Gulp：

$ npm install -g gulp

如果安装失败，有可能是你没有root用户权限，可以尝试一下：

$ sudo install -g gulp

#####2.接下来，在你的项目中安装你所需要的插件和Gulp

和Grunt一样，Gulp只提供了核心的脚手架功能，很多具体的功能，都需要通过不同的第三方插件去搞定，这个步骤，就是安装你所需的插件。你所需要的插件，都需要你在package.json中的devDependencies写入：

$ npm install --save-dev gulp

#####3.然后，在项目的根目录创建你的gulpfile.js

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

#####4.最后，运行你的Gulp吧

$ gulp

##API

上面说过了，Gulp的配置很简单，如果你使用Grunt的话，你就会发现，Gulp的配置真是他妈的太简单了！写个gulpfile.js再也不是让人头大的事情了！

###gulp.src(globs[,options])

定义一个具体文件，或者是文件目录。返回一个stream或者Vinyl files ，使其可以使用pipe操作。

ps:使用过nodejs的同学一定对此很亲切，stream,pipe；这不就是nodejs嘛！

globs遵循globs规则，当然，你也可以定位到具体的某个文件。

#####globs

Type:String or Array

需要读取和操作的文件

####options

Type:Object

通过globs规则生成glob-stream

gulpglobs在和glob-stream 的参数基础上，又添加了两个参数。

#####options.buffer

Type:Boolean Default:true

设置这个参数为false时，将返回文件内容为stream而不是buffer。这在编译大文件时很有用处，但是不一定所有插件都会支持stream类型的文件。

#####options.read

Type:Boolean Default:true

设置这个参数为false的话，返回的文件内容将为null，这表示不会读取该文件。

###gulp.dest(path[,options])

定义你的目标文件夹，将这个步骤之前编译的文件（也就是在pipe）中的文件，写入到目标文件夹中。

gulp.src('./client/templates/*.jade')
  		.pipe(jade())
	.pipe(gulp.dest('./build/templates'))
  		.pipe(minify())
  		.pipe(gulp.dest('./build/minified_templates'));

#####path

Type:String or Function

目标路径。如果要写入Function的话，需要返回目标路径，并且function需要支持vinyl File instance

#####options

Type:Object

#####options.cwd

Type:String Default:process.cwd()

定义目标路径的相对路径，默认问当前gulp运行路径，也就是你的项目根路径。

#####options.mode

Type:String Default:0777

文件权限。

###gulp.task(name[,deps],fn)

定义执行的task，使用了orchestrator模块。

#####name

就是task的名称，如果定义为default，那么直接执行

$ gulp

即可运行该task，如果定义了其他名字，则运行：

$gulp taskname

即可。

#####deps

Type:Array

你的task运行依赖的流程。

如果想了解你的task是否在其所依赖的流程执行前执行了，可以确认一下你所依赖的其他异步流程，是否运行了hints，如果提供了hints，那么该流程将返回一个promise对象或者触发一个事件

#####fn

fn将是你所定义的task的主体，通常是在其中执行gulp.src().pipe(someplugins)的操作。

####异步task

可以通过回调,返回proimes和返回stream的方式，支持异步的task。

#####回调:

// run a command in a shell
var 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
  		});
});

#####返回stream:

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;
});

通常情况下，task都是全并发的，例如，它会执行所有的task，并且不做任何等待。

如果你想在一系列的task使用特定的顺序，你需要做两件事：

1. 当所依赖的异步task完成后，给接下来task一个hint，这个是必须要有的，否则接下来的task不会执行
2. 在依赖异步task的task中，声明deps包含异步task

看一个栗子：

1. 在taskone中，在其执行完毕之后，添加了一个hint，使用callback,porimes和stream的方式都可以，总之是要task引擎知道，应该等这里执行完毕之后，再继续执行。
2. 在tasktwo中，需要添加个hint，告诉task引擎，依赖前一个task的执行结果;

看代码：

var gulp = require('gulp');
// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
	// do stuff -- async or otherwise
	// if err is not null and not undefined, the run will stop, and note that it failed
	cb(err); 
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
	// task 'one' is done now
});

gulp.task('default', ['one', 'two']);

###gulp.watch(globs[,options,callback]) & gulp.watch(globs[,options],tasks)

#####globs

Type:String or Array

文件路径。

#####options

Type:Object

options完全等同于gaze的options，如下所列：

#####options.interval

Type:integer

定时查看的时间间隔

#####options.debounceDelay

Type:integer

watch所带事件的延迟，例如change事件的延迟（不可能每次文件change都触发该事件的回调，cpu受不了的…）

#####options.mode

Type:String

文件权限。

#####options.cwd

Type:String Default:process.cwd()

文件相对路径。

#####tasks

Type:Array

发现文件有改动之后，要执行的task，可以这样使用：

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  		console.log('File ' + event.path + ' was ' + event.type + ', running 		tasks...');
});

#####callback

Type:Function(event)

watch触发的回调，传入event参数。

#####event.type

Type:String

watch响应的事件，有三种值：added,changed和deleted

#####event.path

Type:String

触发事件的文件的路径

##结束

是不是非常简单！

看了这份文档之后，你会发现Gulp完全就是开源社区的产物，各种规范和设置，直接照搬开源模块的部分，通过阅读文档，会发现不少优质的开源模块。

Tweet Share