gulp

标签（空格分隔）： Session

---

什么是Gulp

gulp是一个nodejs的streaming构建工具，所谓的streaming大致意思就是把构建流程想成一个个链接的管道（pipe）。

为什么要这样做呢？

要解释原因，就不得不提到unix。unix本身只提供了数量相对较少的命令，但是你可以命令的组合完成很强大的功能。命令和命令之间的衔接通常就用的是pipe。

类似，使用gulp，你仅仅只需要记住5个命令。这5个命令就是gulp提供给我们的一套streaming构建的架子，也就相当于提供了unix中的pipe功能。至于说pipe中每个命令的功能，则可以使用现有的plugin或者自定义完成。

gulp的安装

npm的安装

更新/安装npm

curl https://www.npmjs.org/install.sh | sudo sh

也可以通过安装nodejs来安装npm

安装gulp

npm install -g gulp

npm install –save-dev gulp

安装完成以后，可以用gulp -v试一试是否正确

user@user-OptiPlex:~/GulpTest$ gulp -v[16:04:19] CLI version 3.9.1[16:04:19] Local version 3.9.1

最基本使用

一个最简单的gulp脚本
首先需要写一个名为gulpfile.js的文件

var gulp = require('gulp')gulp.task('default', function() {   console.log('this is the default task')})

在里面有一个名为default的默认任务，gulp会从这个默认任务开始执行。
运行gulp:

user@user-OptiPlex:~/GulpTest$ gulp[10:37:38] Using gulpfile ~/GulpTest/gulpfile.js[10:37:38] Starting 'default'...this is the default task[10:37:38] Finished 'default' after 77 μs

5个命令

• task：gulp.task(name[, deps], fn)
  定义一个使用 Orchestrator实现的任务（task）

gulp.task('somename', function() {  // 做一些事});

name：
任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。
deps：
类型： Array
一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {  // 做一些事});

注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。
fn:
该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：

gulp.src().pipe(someplugin())

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：

给出一个提示，来告知 task 什么时候执行完毕，
并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。
对于这个例子，让我们先假定你有两个 task，”one” 和 “two”，并且你希望它们按照这个顺序执行：

在 “one” 中，你加入一个提示，来告知什么时候它会完成：可以再完成时候返回一个 callback，或者返回一个promise或stream，这样系统会去等待它完成。

在 “two” 中，你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

因此，这个例子的实际代码将会是这样：

var gulp = require('gulp');// 返回一个 callback，因此系统可以知道它什么时候完成gulp.task('one', function(cb) {    // 做一些事 -- 异步的或者其他的    var err = null;    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了});// 定义一个所依赖的 task 必须在这个 task 执行之前完成gulp.task('two', ['one'], function() {    // 'one' 完成后    console.log('two');});gulp.task('default', ['two', 'one']);

执行结果:

[10:59:43] Using gulpfile ~/GulpTest/gulpfile.js[10:59:43] Starting 'one'...[10:59:43] Finished 'one' after 50 μs[10:59:43] Starting 'two'...two[10:59:43] Finished 'two' after 37 μs[10:59:43] Starting 'default'...[10:59:43] Finished 'default' after 6.4 μs

默认运行gulp命令会执行default任务，但可以通过gulp task 的方式运行具体的一个任务

• gulp.start(tasks…)尽可能多的并行运行多个task
  可以在default的function中通过该命令传入要并行的任务

gulp.start('task1', 'task2');

task名称即为上一个命令中所命名的name

• watch: gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
  监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

gulp.watch(glob[, opts], tasks)
glob
类型： String or Array
一个 glob 字符串，或者一个包含多个glob字符串的数组，用来指定具体监控哪些文件的变动。
opts
类型： Object
传给 gaze 的参数。
tasks
类型： Array
需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task的名字

var gulp = require('gulp');gulp.task('default', function(){    gulp.watch('./source/scripts/**/*.coffee', function(event) {      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');    });});});

运行结果：

user@user-OptiPlex:~/GulpTest$ gulp[14:09:26] Using gulpfile ~/GulpTest/gulpfile.js[14:09:26] Starting 'default'...[14:09:26] Finished 'default' after 10 ms

当改变一个coffee文件时,　控制台输出如下

File /home/user/GulpTest/source/scripts/bus/applyeditCtrl.coffee was changed, running tasks...

• src: gulp.src(globs[, options])
  输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。
  globs
  类型： String 或 Array
  所要读取的 glob 或者包含 globs 的数组。
  options
  类型： Object
  通过 glob-stream 所传递给 node-glob 的参数。
  除了 node-glob 和 glob-stream所支持的参数外，gulp增加了一些额外的选项参数：
  options.buffer
  类型： Boolean 默认值： true
  如果该项被设置为 false，那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。注意：插件可能并不会实现对 stream 的支持。
  options.read
  类型： Boolean 默认值： true

gulp.task('clean', function () {    return gulp.src(buildPath, {read: false})        .pipe(clean())        .pipe(notify({message: 'clean task complete'}));});

执行上述命令后，会将build目录下的文件清空，原本会读取文件流，但加了read:false后不读取文件流
如果该项被设置为 false， 那么 file.contents 会返回空值（null），也就是并不会去读取文件。
options.base
类型： String 默认值： 将会加在 glob 之前 (请看 glob2base)

gulp.task('copyPartial', function () {    gulp.src(partialSource)        .pipe(gulp.dest(partialBuildPath));});

上述代码注册一个名为copyPartial的任务，会在partialSource目录下读取文件，然后输出到partialBuildPath目录下

• dest: gulp.dest(path[, options])返回一个可写的stream
  能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它
  path
  类型： String or Function
  文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例 来提供。
  options
  类型： Object
  options.cwd
  类型： String 默认值： process.cwd()
  输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。
  options.mode
  类型： String 默认值： 0777
  八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

参考资料

中文api：http://www.gulpjs.com.cn/docs/api/
英文api：https://github.com/gulpjs/gulp/blob/master/docs/API.md
http://blog.csdn.net/kiwi_coder/article/details/36422385/
gulp　plugin：http://gulpjs.com/plugins/