# 准备工作 ↵

安装

00$ npm install -g gulp

如果觉得慢可以科学上网或者使用 taobao npm 源：

00$ cnpm install -g gulp
01# 或者： 
02$ npm install --registry=https://registry.npm.taobao.org

gulp是命令行工具，因此需要全局安装，它运行时会读取当前工作路径下的 gulpfile.js 来读取配置并工作。

# gulp 的 4 个核心 API ↵

gulp 是基于流的自动化构建工具，这个流是指文件流，而 gulp 的 4 个核心API则是紧紧围绕‘流’这个主题进行的。

# gulp.src

主要的意思是 “选择文件”，确定流的来源。

00gulp.src('./*.js');  // 命中当前路径下的所有js文件 （不包括子文件夹里的js文件）
01gulp.src('./**/*.js')  // 命中当前路径下的所有js文件 （包括子文件夹里的js文件）

# gulp.dest

主要的意思是 “流的去处”，确定流的去处。

00var dest = './dest'; 
01gulp.dest(dest);

# gulp.task

用来做跟任务相关的事情。

00gulp.task('help', function(){
01    console.log('help'); 
02});

那么当执行 gulp help 的时候，就会做 help 这个被注册的任务。

# gulp.watch

监听文件，当触发文件事件的时候可以执行你制定好了的任务

00gulp.watch('./**/*', ['help']);

# Examples: 压缩js文件 ↵

00var gulp = require('gulp');
01var uglify = require('gulp-uglify');
02var concat = require('gulp-concat'); 
03
04gulp.task('uglify', function(){
05    return gulp.src('./src/*.js')   // 选中全部 js
06        .pipe(uglify())             // 压缩
07        .pipe(concat('app.min.js')) // 多个文件合并为一个 app.min.js 文件 
08        .pipe('./build');           // 输出到 ./build 下 
09}); 
10
11// default 由后面的数组所列的任务复合而成 
12gulp.task('default', ['uglify']);

gulp有很多插件比如压缩css的，编译sass的，编译vue的还有 gulp-webpack 等等。都可以上 npm 去找。

# 注意事项 ↵

# gulp.task 的 default

default 是保留任务

当执行 gulp 而不指定任务名的时候就会执行 default

# return 的作用

不加return的话，task和里面的gulp流是异步执行的。
比如 gulp.task(‘default’, [‘uglify’, ‘clean’]);
如果uglify 里面用的不是return 那么 clean将会跟他同时进行，会产生很大的问题。

# 任务依赖

很多时候，一个任务的开始需要在某些任务已经完成之后才能进行。

比如服务器reload自动刷新这件事就必须在所有事都忙完以后进行。

00// 这里的意思就是  server-reload 重载需要在 'file-regulp' 结束以后才能进行 
01gulp.task('server-reload', ['file-regulp'], function(){
02    console.log('Reload'); 
03    var toRe = path.join(config.dest, '**/*');
04    return gulp.src([toRe])
05        .pipe(connect.reload());
06});

# [中括号]

设定多个规则：
gulp.src([’./index.html’, ‘./html/*.html’])

排除某个文件： (加感叹号)
gulp.src([’./index.html’, ‘./html/*.html’, ‘!./html/hello.html’]);

# Links ↵