4. gulp 学习指南

Gulp：任务自动管理工具
上一篇，gulp 自动化构建工具
练手项目，gulp 学习指南
Gulp 与 Grunt 一样，也是一个自动化构建工具。Gulp 充分借鉴了 Unix 操作系统的管道(pipe)的思想，很多人认为，在操作上，它要比 Grunt 简单。Gulp 需要全局安装，然后再在项目的开发目录中安装为本地模块。

npm install -g gulp
npm install --save-dev gulp

除了安装 gulp 以外，不同的任务还需要安装不同的 gulp 插件模块。举例来说，下面的命令安装了 gulp-uglify 模块。总的来说 gulp 提供的 API 很简单，依靠插件实现功能定制的做法也让 gulp 变得很灵活。

npm install --save-dev gulp-uglify

项目根目录中的 gulpfile.js，是Gulp的配置文件。下面简单介绍一下 gulp 的插件的使用方法。

jshint 插件

GitHub gulp-jshint
JSHint Options
JSHint Documentation

首先我们要下载安装插件。

npm install jshint gulp-jshint --save-dev
npm install jshint-stylish --save-dev

根目录下的 .jshintrc 文件为 gulp-jshint 插件的配置文件。里面的各个配置项的具体含义可以参考 JSHint Options。

gulp-load-plugins 插件

一般情况下，gulpfile.js 中的模块需要一个个加载。这种一一加载的写法，比较麻烦。使用 gulp-load-plugins 模块，可以加载 package.json 文件中所有的 gulp 模块。

# 安装
npm install --save-dev gulp-load-plugins

gulp API

src()

gulp 模块的 src() 方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。参数可以是 String 或者 Array。

dest()

dest() 方法将管道的输出写到文件，同时可以将这些输出继续输出，所以可以依次调用多次 dest() 方法，将输出写入多个目录。如果有目录不存在，将会被新建。dest() 方法还可以接受第二个参数，表示配置对象。配置对象有两个字段。cwd 字段指定写入路径的基准目录，默认是当前目录，mode 字段指定写入文件的权限，默认是0777。

gulp.dest('build', {
  cwd: './app',
  mode: '0644'
})

task()

task() 方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。task() 方法还可以指定按顺序运行的一组任务。如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块。task() 方法的任务函数，还可以接受一个函数作为参数（回掉函数），这对执行异步任务非常有用。如果一个任务的名字为 default，就表明它是“默认任务”，在命令行直接输入 gulp 命令，就会运行该任务。

watch()

watch() 方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。