← 全部文章

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完全就是开源社区的产物,各种规范和设置,直接照搬开源模块的部分,通过阅读文档,会发现不少优质的开源模块。

写于 2014.09.14继续阅读 ↗