gulp之道

文章同步自我的github，地址：https://github.com/ireeoo/not...,已于2018年1月17号重新编辑。

说起来用gulp也有四年多了，之前在sf上也写过一篇文章，今天就重新整理下相关的东西，跟大家分享下，长文预警~

gulp是什么

__上面这个大可乐就是了__~

gulp是一个___基于流式构建___的TaskRunner，通过gulp你可以自己编写一系列的gulp任务，组成一个完整的构建系统，帮你完成大部分无聊的工作，这也是构建工具最大的价值 —— 自动化。

说到gulp就很难避开grunt，grunt是先于gulp出现的TaskRunner，只不过gulp优化了一些功能的实现方式，带来了不一样的思想。

gulp vs grunt

先说一下gulp：

1. gulp是通过正常的写代码而不是配置的方式来实现构建。
2. gulp采用了unix的管道思想，把上一级的输出当做下一级的输入，把简单的一些gulp插件组合起来，解决复杂的问题，每个插件只负责自己的事情，完成自己的工作之后就把流扔给下一个插件，下一个插件处理完之后再往下传，如此，直至处理完，然后生成最后的处理结果，整个过程，采用了流式的写法.
3. gulp只抽象出了很少的API，很容易上手。
4. gulp基于nodejs的stream来处理文件，不会产生中间文件，能更快地完成构建。

gulp处理任务：

再看看grunt：

1. 在grunt中，一切都是基于配置的，在一个大型的构建系统中，你可能会看到比较多的配置项，一堆配置可能看得人头晕眼花，每个插件的配置项还不尽相同，用一个插件你就得取熟悉下它的配置，这就很恶心了。
2. grunt是基于文件系统来构建的，在构建的过程中会生成中间文件，A插件处理完的东西不能直接交给B插件继续处理，而是采用了迂回的方式，A把处理后的扔到C这个地方，然后B插件从C这个地方再去读取，影响构建速度倒是小事，主要是把事情搞复杂了。据说grunt后续的版本可能也会使用stream这种形式，其实这也不奇怪，看看现在的webpack，前端时间rollup以tree-shaking为突破口，准备挑战webpack，结果webpack分分钟就把tree-shaking的特性给实（chao）现(xi)了，你有的老子都有，你没有的老子还有，哈哈哈哈，不过grunt好像后知后觉，不知道现在怎么样了，好久没有关注grunt了。

Grunt处理任务的流程：

总体来说，我个人觉得gulp是比grunt更为优雅的一种构建工具~，哈哈。

此外，gulp和grunt都需要一个构建文件来支持构建，grunt的是gruntfile.js，gulp的是gulpfile.js
通过两个文件来对比一下：
gruntfile.js文件，我之前项目中的大概是这么个样子：

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    cssmin: {
      minify: {
        expand: true,
        cwd: 'css/',
        src: ['*.css', '!*.min.css'],
        dest: 'css/',
        ext: '.min.css'
      },
      my_target: {
        files: [{
          expand: true,
          cwd: '../style/',
          src: ['*.css', '!*.min.css'],
          dest: '../build/style/'
        }]
      }
    },
    copy: {
      main: {
        files: [
          {
            expand: true,
            cwd: '../views/',
            src: ['**'],
            dest: '../build/views/'
          }, {
            expand: true,
            cwd: '../img/',
            src: ['**'],
            dest: '../build/img/'
          }, {
            expand: true,
            cwd: '../',
            src: ['main.html'],
            dest: '../build/'
          }, {
            expand: true,
            cwd: '../',
            src: ['*.txt'],
            dest: '../build/'
          }
        ]
      }
    },
    uglify: {
      buildall: {
        files: [{
          expand: true, 
          cwd: '../config/', 
          src: '**/*.js', 
          dest: '../build/config/' 
        }, {
          expand: true, 
          cwd: '../js/controllers/', 
          src: '**/*.js', 
          dest: '../build/js/controllers/' 
        }, {
          expand: true,
          cwd: '../js/directive/',
          src: '**/*.js', 
          dest: '../build/js/directive/' 
        }, {
          expand: true, 
          cwd: '../js/filter/', 
          src: '**/*.js',
          dest: '../build/js/filter/' 
        }, {
          expand: true,
          cwd: '../js/service/', 
          src: '**/*.js', 
          dest: '../build/js/service/' 
        }]
      },
      builda: {
        files: {
          '../build/js/app.js': ['../js/app.js'],
          '../build/js/libs/bridge.1.1.0.js': ['../js/libs/bridge.1.1.0.js']
        }
      },
      release: {
        files: {
          '../build/js/libs/libs.min.js': ['../js/libs/zepto.20140520.js', '../js/libs/angular.min.js', '../js/libs/*.js', '!../js/libs/bridge.1.1.0.js', '!../js/libs/libs.min.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify'); 
  grunt.loadNpmTasks('grunt-contrib-cssmin'); 
  
  grunt.registerTask('default', ['copy', 'cssmin', 'uglify']);

};

再来看gulp的：

var gulp = require('gulp'),//gulp基础库
    concat = require('gulp-concat'),//合并文件
    cssmin = require('gulp-minify-css'),//压缩css
    htmlmin = require("gulp-htmlmin"),//压缩html
    jsmin = require('gulp-uglify'),//压缩js
    rename = require('gulp-rename'),//重命名文件
    clean = require("gulp-clean"),//清理目录
    replace = require('gulp-replace'),//文本替换
    processhtml = require('gulp-processhtml'),//处理html文件
    addsrc = require('gulp-add-src'),//添加额外的文件流
    option = {
        buildPath: "../dist"//构建目录
    };
//构建目录清理
gulp.task("clean", function (done) {
    //return cache.clearAll(done);
    return gulp.src(option.buildPath, {
        read: false
    })
    .pipe(clean({force: true}));

})

gulp.task("imgcopy", function () {//图片拷贝
    gulp.src("../img/**/*")
    .pipe(gulp.dest(option.buildPath + '/img/'))
})

//js文件压缩
gulp.task('jsmin', function () {
    gulp.src(["../js/**/**/*.js",'!../js/libs/*.js'])
        .pipe(jsmin())
        .pipe(gulp.dest(option.buildPath+ "/js/"))
});

//需要合并和压缩的文件
gulp.task('concat', function () {
    gulp.src(['../js/libs/angular.min.js','../js/libs/*.js', '!../js/libs/bridge*.js'])
        .pipe(concat('libs.min.js'))
        .pipe(jsmin())
        .pipe(addsrc('../js/libs/bridge*.js'))
        .pipe(jsmin())
        .pipe(gulp.dest(option.buildPath + "/js/libs/"))
});

gulp.task("processhtml", function () {
    var date = new Date().getTime();
    gulp.src('../main.html')
        .pipe(replace(/_VERSION_/gi, date))
        .pipe(processhtml())
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(option.buildPath + '/'))
})

//压缩css
gulp.task("cssmin", function () {
    gulp.src("../style/*.css")
        .pipe(cssmin())
        .pipe(gulp.dest(option.buildPath + '/style'))
})

//压缩html文件
gulp.task("htmlmin", function () {
    gulp.src('../views/**/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(option.buildPath + '/views'))
})

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function () {
    gulp.start('jsmin', 'cssmin', 'processhtml', "htmlmin", 'imgcopy', 'concat');
});

注：上面两个文件只是拿来做对比说明gulp和grunt的书写方式不同，具体的任务两者并不完全匹配。

gulp为什么快

1. 使用orchestrator任务系统,最大限度的并发运行多个任务.
2. 每个插件只做一件事,做好一件事, 提升处理速度
3. 流式处理,极少的文件IO

gulp快速上手

以下是一分钟上手教程：

1. 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

   npm install -g gulp

2. 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

   npm install gulp

   如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–D：

   npm install -D gulp

3. 在项目根目录创建gulpfile.js文件

   var gulp = require('gulp');
   gulp.task('default', function() {
       console.log('hello world');
   });

4. 运行gulp

   gulp

   默认任务将被运行，向控制台输出hello world。
   如果需要运行单个任务, 使用 gulp taskname命令。

gulp api速览

使用gulp，仅需知道4个API即可：

• gulp.task()
• gulp.src()
• gulp.dest()
• gulp.watch()

所以很容易就能掌握。

gulp.src(globs[, options])

gulp处理文件的流程是【读取文件】、【用插件处理文件】、【输出文件】，gulp.src()正式用来读取要操作的文件的，globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。

globs 文件匹配模式

gulp内部使用了node-glob模块来实现其文件匹配功能。举些栗子：

• * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
• ** 匹配路径中的0个或多个目录及其子目录，需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
• ?匹配文件路径中的一个字符(不会匹配路径分隔符)
• [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法!(pattern|pattern|pattern)匹配任何与括号中给定的任一模式都不匹配的
• ?(pattern|pattern|pattern)匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
• +(pattern|pattern|pattern)匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
• *(pattern|pattern|pattern)匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
• @(pattern|pattern|pattern)匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

文件匹配列子：

• * 能匹配 reeoo.js,reeoo.css,reeoo,reeoo/,但不能匹配reeoo/reeoo.js
• *.*能匹配 reeoo.js,reeoo.css,reeoo.html
• */*/*.js能匹配 r/e/o.js,a/b/c.js,不能匹配a/b.js,a/b/c/d.js
• **能匹配 reeoo,reeoo/reeoo.js,reeoo/reeoo/reeoo.js,reeoo/reeoo/reeoo,reeoo/reeoo/reeoo/reeoo.co,能用来匹配所有的目录和文件
• **/*.js能匹配 reeoo.js,reeoo/reeoo.js,reeoo/reeoo/reeoo.js,reeoo/reeoo/reeoo/reeoo.js
• reeoo/**/co能匹配 reeoo/co,reeoo/ooo/co,reeoo/a/b/co,reeoo/d/g/h/j/k/co
• reeoo/**b/co能匹配 reeoo/b/co,reeoo/nb/co,但不能匹配reeoo/x/nb/co,因为只有单**单独出现才能匹配多级目录
• ?.js能匹配 reeoo.js,reeoo1.js,reeoo2.js
• reeoo??能匹配 reeoo.co,reeooco,但不能匹配reeooco/,因为它不会匹配路径分隔符
• [reo].js只能匹配 r.js,e.js,o.js,不会匹配re.js,reo.js等,整个中括号只代表一个字符
• [^reo].js能匹配 a.js,b.js,c.js等,不能匹配r.js,e.js,o.js

当有多种匹配模式时可以使用数组

//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是【不能在数组中的第一个元素】中使用排除模式，用了也无效！

gulp.src([*.js,'!r*.js']) 匹配所有js文件，但排除掉r开头的js文件
gulp.src(['!r*.js',*.js]) 不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：

• r{e,o}c会展开为 rec，roc
• r{e,}o会展开为 reo，ro
• r{0..3}o会展开为 r0o，r1do，r2o，r3o

options

options主要用来配置一些跟文件流相关的额外的信息，主要有三个参数：

options.buffer

默认值是true，如果设置为false，则会以为stream的方式返回文件内容(file.contents)，而不是buffer方式，如果对buffer或者stream不了解，可以去nodejs官网看下文档。

options.read

默认值是true
如果设置为false，那么file.contents会返回空值，也就是并不会去读取文件，这个值如无需求，最好不要改~

options.base

base的值很神奇，它可以影响到你插件最终输出的文件的路径，默认情况下，gulp会根据gulp.src匹配到的路径自动设置base的值，如果你发现这个base满足不了你的需求，就可以手动指定base
举个栗子：

// 匹配40017/js/vendor/vue.js，并将base解析成 40017/js
gulp.src('40017/js/**/*.js')
  .pipe(uglify())//压缩
  // 处理完毕的文件，输出的时候，会用build替换掉base，即输出文件的路径为 build/vendor/vue.js
  .pipe(gulp.dest('build'));

// 手动设置base的值
gulp.src('40017/js/**/*.js', { base: '40017' })
  .pipe(uglify())//压缩
  // 处理完毕的文件，输出的时候，会用build替换掉base，即输出文件的路径为 build/js/vendor/vue.js
  .pipe(gulp.dest('build'));

gulp.dest(path[,options])

和gulp.src呼应的是gulp.dest(),这个方法是用来写文件的，path为写入文件的路径,options为一个可选的参数对象，用了这么长时间的gulp，这个参数还真是一次都没用过，今天就不扯了。
要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。
gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如：

var gulp = require('gulp');
gulp.src('40017/js/vue/vendor.js')
    .pipe(gulp.dest('dist/vue.js'));
//最终生成的文件路径为 dist/vue.js/vendor.js,而不是dist/vue.js

要想改变文件名，可以使用插件gulp-rename

下面说说生成的文件路径与我们给gulp.dest()方法传入的路径参数之间的关系。
gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。例如：

var gulp = reruire('gulp');
//有通配符开始出现的那部分路径为 **/*.js
gulp.src('js/**/*.js')
    .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js
//如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js

Two more 栗子

gulp.src('js/**/fish.js')
    //假设匹配到的文件为js/lib/fish.js
    .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/lib/fish.js

gulp.src('js/*') //有通配符出现的那部分路径为 *
    //假设匹配到的文件为js/4in1.js
    .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/4in1.js

gulp.src('js/vue/vendor.js') //没有通配符出现的情况
    .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/vendor.js

通过指定gulp.src()方法配置参数中的base属性，我们可以更灵活的来改变gulp.dest()生成的文件路径(前面已经说过)。
当我们没有在gulp.src()方法中配置base属性时，base的默认值为通配符开始出现之前那部分路径，例如：

gulp.src('src/js/**/*.js') //此时base的值为 src/js

上面我们说的gulp.dest()所生成的文件路径的规则，其实也可以理解成，用我们给gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终得到生成文件的路径。

gulp.src('src/js/**/*.js') //此时base的值为src/js,也就是说它的base路径为src/js
     //设该模式匹配到了文件 src/js/common/common.js
    .pipe(gulp.dest('dist')) //用dist替换掉base路径，最终得到 dist/common/common.js

所以改变base路径后，gulp.dest()生成的文件路径也会改变，这个前面说过了，这里就不赘述了。

用gulp.dest()把文件流写入文件后，如果还有后续操作的话，文件流仍然可以继续使用。

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

gulp.task方法用来定义任务，
name 为任务名，
deps 是当前定义的任务需要依赖的其他任务列表，
为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。
如果没有依赖，则可省略这个参数，
fn 为具体的任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

栗子(HTML压缩)：

let gulp = require("gulp");
let htmlmin = require("gulp-htmlmin");
gulp.task("htmlmin",()=>{
    gulp.src("src/**/*.html")
        .pipe(htmlmin({
            collapseWhitespace: true,
            removeComments: true,               //清除HTML注释
            collapseBooleanAttributes: true,    //省略布尔属性的值 <input checked="true"/> ==> <input />
            removeScriptTypeAttributes: true,       //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,    //删除<style>和<link>的type="text/css"
            minifyJS: true,                         //压缩页面JS
            minifyCSS: true                     //压缩页面CSS
        })))
        .pipe(gulp.dest("dist"))
})

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

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等，这样就不需要在文件改变的时候，手动去执行任务了。
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同，不再赘述。
opts 为一个可选的配置对象，通常不需要用到，略过。
tasks 为文件变化后要执行的任务，为一个数组，一个或者多个通过 gulp.task() 创建的 task的名字的列表。

gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);//在js文件发生变化的时候执行uglify和reload两个任务

gulp.watch()还有另外一种使用形式：

gulp.watch(glob[, opts, cb])

glob和opts参数略过，这里跟上面的那种方式唯一不同的地方就是第三个参数了，cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted，path属性为发生变化的文件的路径

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 
    console.log(event.path); //变化的文件的路径
});     

OK，gulp的Api就介绍这么多了，是不是很简单？

常用的gulp插件介绍

js文件压缩

使用gulp-uglify
安装：npm install --save-dev gulp-uglify
用来压缩js文件，使用的是UglifyJs引擎

var gulp = require('gulp'),
    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

重命名文件

使用gulp-rename
安装：npm install --save-dev gulp-rename
用来重命名文件流中的文件。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");

gulp.task('rename', function () {
    gulp.src('js/vue.js')
    .pipe(uglify())  //压缩
    .pipe(rename('vue.min.js')) //vue.js重命名为vue.min.js
    .pipe(gulp.dest('js'));
});

压缩css文件

之前的压缩插件gulp-minify-css已经废弃
现在推荐使用的是gulp-clean-css
安装：npm install gulp-clean-css --save-dev
栗子：

var gulp = require('gulp'),
    cleanCSS = require("gulp-clean-css");

gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(cleanCSS()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

html文件压缩

使用gulp-minify-html
安装：npm install --save-dev gulp-minify-html

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");

gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

文件合并

使用gulp-concat
安装：npm install --save-dev gulp-concat
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数。

var gulp = require('gulp'),
    concat = require("gulp-concat");

gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

处理html

使用gulp-processhtml
安装：npm install --save-dev gulp-processhtml
在构建时处理按你设想的修改html文件，比如说你构建之前你有N个脚本需要引入到html页面中，构建之后可能这N个文件被合并成了一个，这时候引入的地方也需要做相应的调整，那么差个插件就能派上用场了。
插件使用

gulp.task("processhtml", function () {
    gulp.src('../main.html')
        .pipe(processhtml())
        .pipe(gulp.dest("dist"))
})

main.html构建之前的代码

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<!-- build:js js/libs/libs.min.js --> <!--process-html插件需要用到这个注释-- >
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular.touch.min.js"></script>
<script src="js/libs/zepto.20140520.js"></script>
<script src="js/libs/angular.ui.bootstrap.js"></script>
<script src="js/libs/angular-sanitize.min.js"></script>
<script src="js/libs/angular-ui-route.min.js"></script>
<script src="js/libs/fastclick.0.6.7.min.js"></script>
<script src="js/libs/carous.min.js"></script>
<!-- /build --> <!--process-html插件需要用到这个注释-->
</html>

main.html构建之后

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/libs/libs.min.js"></script> <!--注意这里的变化-->
</html>

字符串替换

使用gulp-replace
安装：npm install --save-dev gulp-replace
可以替换html或者txt等文件内的字符串为你想要的。
比如我每次构建的时候都需要去修改引用的文件的版本号，就可以使用这个插件

gulp.task("replace", function () {
    var date = new Date().getTime();
    gulp.src('../main.html')
        .pipe(replace(/_VERSION_/gi, date))
        .pipe(gulp.dest("dist"))
})

main.html文件

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=_VERSION_"/>
    <link rel="stylesheet" href="style/index.css?v=_VERSION_"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=_VERSION_"></script>
<script src="js/app.js?v=_VERSION_"></script>
<script src="js/service/TrackDataService.js?v=_VERSION_"></script>
<script src="js/service/APIService.js?v=_VERSION_"></script>
<script src="js/service/DService.js?v=_VERSION_"></script>
<script src="js/controllers/indexCtrl.js?v=_VERSION_"></script>
<script src="js/directive/lazy.js?v=_VERSION_"></script>
<script src="js/directive/slider.js?v=_VERSION_"></script>
<script src="js/filter/filters.js?v=_VERSION_"></script>
</html>

构建之后，_VERSION_被替换为时间戳。

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=1433405631860"/>
    <link rel="stylesheet" href="style/index.css?v=1433405631860"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=1433405631860"></script>
<script src="js/app.js?v=1433405631860"></script>
<script src="js/service/TrackDataService.js?v=1433405631860"></script>
<script src="js/service/APIService.js?v=1433405631860"></script>
<script src="js/service/DService.js?v=1433405631860"></script>
<script src="js/controllers/indexCtrl.js?v=1433405631860"></script>
<script src="js/directive/lazy.js?v=1433405631860"></script>
<script src="js/directive/slider.js?v=1433405631860"></script>
<script src="js/filter/filters.js?v=1433405631860"></script>
</html>

gulp-bytediff

用gulp-bytediff这个插件，你可以看到gulp处理前后文件的大小变化。
栗子：

let uglify = require("gulp-uglify");
let util = require("gulp-util");
let bytediff = require("gulp-bytediff");
function bytediffFormatter(data){
    let difference = (data.savings > 0) ? ' smaller.' : ' larger.',
            result = data.savings > 0 ? ('and is ' +
            util.colors.yellow.bold(~~((1 - data.percent) * 100) + '%') + difference) : "";
        return `${util.colors.cyan.bold(data.fileName)} from ${util.colors.yellow.bold((data.startSize / 1000).toFixed(2))} kB to ${util.colors.yellow.bold((data.endSize / 1000).toFixed(2))} kB ${result}`;
}

gulp.task("bd",()=>{
    gulp.src("src/js/**/*.js")
    .pipe(bytediff.start())
    .pipe(uglify())
    .pipe(bytediff.stop(bytediffFormatter))
    .pipe(gulp.dest("dist")) 
})

console会输出如下信息：

gulp-sequence

由于gulp执行的多个任务的时候，任务之间彼此是异步的，不能确保执行顺讯，这个插件可以让一系列的任务按顺序执行。

安装

npm install --save-dev gulp-sequence

使用：

var gulp = require('gulp')
var gulpSequence = require('gulp-sequence')
 
gulp.task('a', function (cb) {
  //doSomething
})
 
gulp.task('b', function (cb) {
  //doSomething
})
 
gulp.task('c', function (cb) {
  //doSomething
})

gulp.task('d', function () {
  // return stream
  return gulp.src('js/**/*.js')
})

// 1. 并行执行a、b;
// 2. 执行完a、b之后执行c;
// 3. 执行完c之后，执行d;
gulp.task('default', gulpSequence(['a', 'b'], 'c', 'd'))

自动刷新

可以结合browser-sync和gulp.watch()做多终端自动刷新，只要文件发生变化，就可以自动构建，然后浏览器自动刷新代码，类似于webpack的热替换。
安装：
npm i browser-sync -D
栗子：

const browserSync = require("browser-sync")；
const uglify = require("gulp-uglify")；
const sequence = require("gulp-sequence");//按顺序执行
gulp.task("uglify",()=>{
    return gulp.src('js/**/*js')
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
})

gulp.task('watch', () => {
    const watcher = gulp.watch("js/**/*.js", ["uglify"]);
    wathcer.on('change', function (path) {
        browserSync.reload();
    })
})

gulp.task('server', () => {
    //静态服务器
    browserSync({
        server: {
            baseDir: `dist` //从这个项目的dist目录启动服务器
        },
        open: "external",//Browsersync启动时自动打开外部网址，也就是我们的本地IP加端口
        logConnections: true,
        // directory: true,//是否列出目录
        startPath: "/main.html",//服务器启动之后默认访问哪个页面
    });
})

gulp.task("default",sequence(['uglify'], ['server'], ['watch']))

模块化管理插件

上面说到的插件都是用commonjs的方式手动引入的，比如 let bs = require("browser-sync"),使用gulp-load-plugins这个插件，可以自动地从依赖文件中提取插件并注入到你想要的对象中，无需手动引入。

插件安装：

npm install --save-dev gulp-load-plugins

栗子：

let $ = require('gulp-load-plugins')({//初始化各种插件引用
    pattern: ['gulp-*', 'imagemin-pngquant', 'browser-sync'],//搜索插件的正则
    replaceString: /\bgulp[\-.]/,//当把插件加载到执行环境的时候，去除哪些文本
    lazy: true,//是否懒加载插件，true，只有用到的时候才去加载，false反之
    camelize: true//设置为true则插件被加载进来的时候名称是驼峰形式的
})

比如之前安装了gulp-clean-css的插件，那么现在这需要这么用：

var gulp = require('gulp'),
    //cleanCSS = require("gulp-clean-css");这个就不用了

//gulp-load-plugins会根据搜索的正则去找gulp-clean-css这个插件，并把它名字前面的gulp去掉，然后把剩下的转成驼峰`cleanCss`，这就是待会要使用的插件的方法名字了，这个方法是挂在前面已经定义好的对象$上的，所以可以直接$.cleanCss()这样去调用。

gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe($.cleanCSS()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

其他的插件使用方式大同小异。
上面只介绍了gulp-load-plugins一些常用的参数，其他的参数大家可以去npm查看。

gulp还有很多插件，大家可以去gulp官网查看

写在最后

有人会说，webpack都一统天下了，你怎么还在折腾gulp？
大多数人都觉得webpack是目前前端工程化完整性解决方案，不管你什么grunt还是gulp都得给我靠边站，只要使用webpack就足够了。

真的是这样吗？？？

webpack官网给自身的定位是webpack is a module bundler，也就是说，webpack是模块打包器，webpack的竞争对手应该是browserify之流，而不是gulp或是grunt这类Task Runner。

我记得之前webpack官方也给出了gulp中使用webpack的方式(webpack1.x的文档已经被删了，找不到了，呵呵)

虽然webpack可以替代gulp的一些功能，但是我不觉得这两者是非此即彼的状态，工具只选合适的。

来，干了这杯大可乐~

如对gulp还有什么不明白之处，或者本文有什么遗漏或错误，欢迎一起交流。