gulp学习笔记

0 起因

今天接到任务需要提高一个web应用项目的加载效率。

前端使用了angular，在未经优化前，产生了“数量可观”的js和css文件，而且未经任何的压缩，使用的框架和第三方库（jQuery、angular、bootstrap等等）也不是从cdn加载，所以浏览器加载页面的时候花了很多时间，体验很差。

所以现学了一下gulp，并打算使用gulp-cdnizer、gulp-concat、gulp-uglify完成这项工作。

---

1 简述

gulp是一种构建工具，构建是什么意思呢？我感觉就是通过自己写一些脚本（gulpfile.js）让gulp工具运行，自动化的完成一些文件汇聚、CSS编译、植入链接等工作。

---

1.1 安装

安装方法还是很简单的，官网也有讲，出于完整性的考虑，还是罗列一下用到的命令。

sudo npm install --global gulp
sudo npm install --save-dev gulp

---

1.2 使用

gulp的核心就是一个gulpfile.js的文件，其中包含了自定义的gulp任务（task），在命令行运行gulp指令时，会执行其中的指令。

一个最简单的例子如下所示：

var gulp = require('gulp');

gulp.task('default', function() {
  // 默认的任务代码
});

gulp.task('task1', function() {
  // task1的内容
});

执行指令gulp会默认执行default这个task的内容，
执行指令gulp task1会执行task1的内容。

---

2 gulp的API

这一部分参考了官方网站。
因为gulp是基于文件流的构建工具，所以大量的使用到了node.js当中与文件流相关的API，不熟悉的同学可以先看这个 https://nodejs.org/api/stream.html ，特别是pipe。

gulp的API其实只有四个，其中watch有两种参数形式：

• gulp.src(globs[,options])
• gulp.dest(path[, options])
• gulp.task(name[, deps], fn)
• gulp.watch(glob [, opts], tasks)
• gulp.watch(glob [, opts, cb])

其之所以可以完成如此复杂的工作还依赖其拥有众多的插件（plugins），插件的内容后面再说。

---

2.1 src(globs[, options])

这个API会将所有与给定的glob匹配的文件输出，返回值是一个stream，可以通过pipe方法传递给别的插件。

---

2.1.1 globs

类型： String 或 Array

所要读取的 glob 或者包含 globs 的数组。

---

2.1.2 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

如果该项被设置为 false， 那么 file.contents 会返回空值（null），也就是并不会去读取文件。

options.base

类型： String 默认值： 将会加在 glob 之前

---

2.2 dest(path[, options])

与src的作用相反，可以输入文件到指定的路径。

---

2.2.1 path

类型： String or Function

文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例 来提供。

---

2.2.2 options

类型： Object

options.cwd

类型： String 默认值： process.cwd()

输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

options.mode

类型： String 默认值： 0777

八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

---

2.3 task(name[, deps], fn)

用于定义特定的任务，完成一些批处理。

---

2.3.1 name

指定task的名字，可以与gulp指令搭配使用，运行特定的task，name中不要出现空格。

---

2.3.2 deps

类型： Array

指定该task的前置依赖任务，deps的任务都完成之后才会运行该task。

注意： 请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式： 调用callback，或者返回promise 或 stream。

---

2.3.3 fn

用于定义task的具体内容。通常形如gulp.src().pipe(someplugin())。

var gulp = require('gulp');

// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

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

---

2.4 watch(glob [, opts], tasks)

监控文件是否被改动，并在改动发生时触发一些事件。

---

2.4.1 glob

类型： String or Array

一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

---

2.4.2 opts

类型： Object

传给 gaze 的参数。

---

2.4.3 tasks

类型： Array

需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字。

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

---

2.5 watch(glob[, opts, cb])

---

2.5.1 glob

类型： String or Array

一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

---

2.5.2 opts

类型： Object

传给 gaze 的参数。

---

2.5.3 cb(event)

类型： Function

每次变动需要执行的 callback。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

event.type

类型： String

发生的变动的类型：added, changed 或者 deleted。

event.path

类型： String

触发了该事件的文件的路径。