gulp是前端的自动化构建工具，gulp的出现是希望能取代grunt，成为最流行的前端自动化构建工具，它与grunt比起来有如下优势：

• 遵循代码优于配置策略：无需写一堆配置参数，维护起来更像写代码
• 易上手：它的核心API只有4个（有些地方可能会说是5个API，因为目前已经摒弃了run方法，所以我们只要知道这4个API就行）
• 速度快：各任务之间通过nodejs的stream进行数据互通，速度更快

gulp的安装

在安装之前，请确保已经安装nodejs环境，如何安装nodejs可以查看这里搭建nodejs环境

全局安装

npm install -g gulp

通过gulp -v检查是否安装成功，安装成功后会在全局目录中找到gulp文件夹，我这里是/usr/lib/node_modules

本地安装

1. 生成package.json文件

npm init

2. 本地安装gulp

npm install --save-dev gulp

安装成功后，能在本地node_modules文件夹中看到gulp；其中--save-dev表示会将安装gulp的信息写入package.json文件的devDependencies字段中

搭建gulp项目

gulp API介绍

gulp的核心API只有4个：task、watch、src、dest；有些地方可能会说是5个API，因为目前已经摒弃了run方法，所以我们只要知道这4个API就行。

1. gulp.src(globs[, options])

gulp使用gulp.src函数读取文件，然后将文件内容转换成stream流后通过pipe传输给其他的任务，最终通过gulp.dest将处理结果写入文件中，整个流程如下：

gulp

代码例子:

// 读取src/scss/目录下scss文件
gulp.src('src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('build/css'));

• globs：文件匹配模式，用来匹配文件；该函数还可以为数组，这样能有多种匹配模式来匹配文件。
• options：可选参数，一般不用，可以忽略。

这里列出globs参数的匹配规则：

• *：匹配0到多个字符；如：
  *.js：匹配js文件
*.css：匹配css文件。
• **：匹配0到多个目录或文件；如：
  src/**/*.js：匹配src/目录下所有的js文件。
• ?：匹配一个字符；如 ：
  ?.js：匹配a.js和b.js，不能匹配ab.js。
• !：不匹配；如：
  !*.js：不匹配js文件。
• [字符]：匹配方括号内出现字符的任意一个；如：
  [abc].js：匹配a.js、b.js、c.js；
  [^abc].js：不匹配a.js、b.js、c.js。
• (模式1|模式2)：匹配括号内任意一个模式，可与*、+、?和!作为前缀组合使用；如：
  *.+(js|css)：匹配js文件或css文件

2. gulp.dest(path[, options])

将stream流写入文件

• path：写入文件的目录
• options：可选参数，一般不用，可以忽略

// 编译scss文件后，保存到build/css/目录中
gulp.src('src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('build/css'));

3. gulp.task(name[, deps], fn)

gulp使用gulp.task函数创建任务

• name：任务名称
• deps：任务列表，这些任务会在当前任务运行之前被执行；当这个任务依赖于其他任务时，可以把任务写入列表中，否则可以不写。
• fn：任务函数，我们可以把要执行的代码都写在这个函数中，该参数也是可选的。

代码例子：

gulp.task('one', function(){
    console.log('task one');
});

gulp.task('two', ['one'], function(){
    console.log('task two');
});

gulp.task创建了one和two任务，该two任务依赖one任务，使用gulp命令执行two任务

gulp two

4. gulp.watch(glob[, opts], tasks)

gulp.watch用来监视文件内容是否变化

• glob：文件匹配模式，规则与gulp.src中的glob参数一样
• opts：可选参数，一般不用，可以忽略。
• task：任务列表，当glob匹配的文件有变化时，就会执行该列表中的任务。
  代码例子：

gulp.watch('src/**/*.+(scss|js)', ['sass', 'js']);

监控src/目录下所有的scss文件和js文件，如果有文件内容发送变化，则顺序执行sass、js任务。

搭建项目例子

我们把项目的文件放在本地src/文件夹中，项目结构为：

├── gulpfile.js
├── node_modules
    ├── ...
├── package.json
└── src
    ├── js
    │   ├── a.js
    │   └── b.js
    └── scss
        ├── c.scss
        └── d.scss

gulpfile.js内容：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    jshint = require('gulp-jshint'),
    cssmin = require('gulp-clean-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename');

// 检查、编译scss文件后，保存到build/css中
gulp.task('sass', function(){
    gulp.src('src/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('build/css'));
});

// 检查js语法后，保存到build/js中
gulp.task('js', function(){
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(gulp.dest('build/js'));
});

// 监听文件变化
gulp.task("watch", function(){
    // 监听src目录下的scss、js文件
    gulp.watch('src/**/*.+(scss|js)', ['sass', 'js']);
});

// 压缩css、js文件
gulp.task('dist', ['sass', 'js'], function(){
    // 压缩css文件
    gulp.src('build/css/*.css')
        .pipe(cssmin())
        .pipe(rename({
            suffix: ".min", // 文件名后缀加上".min"
        })).pipe(gulp.dest('dist/css'));

    // 压缩js文件
    gulp.src('build/js/*.js')
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min", // 文件名后缀加上".min"
        })).pipe(gulp.dest('dist/js'));
});

gulp.task('default', ["sass", "js", "watch"]);

首先我们要安装项目需要的gulp插件

npm install node-sass gulp-sass gulp-jshint gulp-clean-css gulp-uglify gulp-rename --save-dev

安装好之后，执行gulp命令

gulp

会在build/文件夹下产生：build/js/a.js、build/js/b.js和build/css/c.css、build/css/d.css；

gulp dist

会在dist/文件夹下生成dist/js/a.min.js、dist/js/b.min.js、dist/css/c.min.css、dist/css/d.min.css。

gulp入门教程