工作流遇见gulp

认识

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

简而言之：gulp可以看做是一个能够帮助开发人员通过自动执行一系列任务流来简化开发流程的工具集合。

安装

gulp依赖于node，所以需要先安装node环境。

$npm install gulp-cli -g //安装命令行gulp工具
$npm install gulp -D //安装当前项目gulp依赖
$touch gulpfile.js //生成gulp任务配置文件
$gulp --help

使用

1. 配置文件
   gulp默认的配置文件为当前目录下的gulpfile.js，也可以通过运行时添加--gulpfile参数来指定，详情可通过gulp --help查看。
2. 书写任务

写任务前先要知道gulp任务几个要点（个人理解）

• 所有操作都是通过操作文件或流来完成的
• 每一步操作都返回当前的操作结果（这也是写插件的要求之一）
• 任务整体是一个工作流程，只有依赖和被依赖的关系。

这里简述几个常用API【详情】：
2.1 gulp.src(globs[, options])
主要是用来为任务提供输入源
- globs 输入文件的匹配规则
- file.js 精确匹配
- *.js 匹配js后缀的文件
- */.js 匹配当前及子目录下的js文件
- !file.js 排除特定的文件
- options 输入源的配置项，其中base用来配置输出的相对路径

gulp.src('client/js/**/*.js') //此时的配置规则是{base:'client/js'}
.pipe(gulp.dest('build'));  // 输出的是build/**/*.js
gulp.src('client/js/**/*.js', { base: 'client' })
.pipe(gulp.dest('build'));  //输出的是build/js/**/*.js
  ```

2.2 gulp.dest(path[, options])
主要是用来为任务提供输入源
  - path 输出文件路径
  - options 输出的配置项
    - cwd 指定文件输出的相对路径，默认process.cwd()
    - mode 指定文件的输出权限，默认0777 

2.3 gulp.task(name [, deps] [, fn])
 - name 任务名
 - deps 依赖的任务名
 - fn 任务执行的回调（任务的主体部分）

2.4 gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
- glob 监控文件的匹配规则
- opts 监控的配置项
- tasks/cb 文件改变后执行任务或/回调。
回调的事件event包含事件类型(event.type)和文件路径(event.path)，根据不同的事件可以做更详尽的文件处理。
事件类型包括added, changed, deleted or renamed。

3. 运行任务

$gulp [options] tasks

gulp的默认任务名称为default，即执行gulp的缺省任务。

$gulp <=> $gulp default

4. 附加说明
当任务运行时，gulp被依赖的任务一定会先于第一个依赖该任务任务执行，切不会重复执行。
如：A->C, B->C,任务依次执行的时候，执行顺序是C->A->B。

## 栗子
书写脚本文件 gulpfile.js

//引入gulp及插件
var gulp = require('gulp');
var pug = require('gulp-pug');
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');

//定义html任务
gulp.task('html', function(){
return gulp.src('client/templates/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});

//定义css任务
gulp.task('css', function(){
return gulp.src('client/templates/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});

//定义默认任务和依赖任务
gulp.task('default', [ 'html', 'css' ]);

执行查看结果

$gulp

[注]：gulp的强大支持在于任务之间的协作，不同的插件则为文件提供了不同处理能力，结合插件并合理的安排任务会使得工作流更加高效。