Gulp的安装使用与API详解

前言

以前一直使用Grunt作为前端自动化构建工具，但始终觉得配置繁琐，在之后一个项目中便决定使用更流行的构建工具Gulp。因为Gulp使用node的stream流进行文件和数据的读取操作，能减少I/O次数，速度更快，主要API只有4个，易上手。下面我们来详细学习一下Gulp这个工具吧。

安装

确保你已经安装好了node环境，首先全局安装gulp

npm install -g gulp

然后切换路径到你项目的package.json文件所在目录下，本地安装gulp

npm install gulp --save-dev

为什么要安装两次呢？因为全局安装是方便你直接使用gulp命令，而本地安装是因为之后需要安装的gulp插件需要依赖gulp。主要是为了灵活，不用太纠结。

开始使用gulp

与grunt依赖一个Gruntfile.js一样，gulp也依赖一个主文件gulpfile.js，这个文件主要定义了gulp的一些任务。我们可以进入项目package.json文件所在目录，一般是根目录，创建一个js文件并命名为gulpfile.js，然后写入一个最简单的任务，例如：

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

这时我们的目录结构为
├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json
在终端运行命令gulp便可看到终端打印一句hello world。你可以给任务一个特定的名字，然后运行特定任务，如gulp build，如果没有指定任务则自动执行default任务。

API介绍

搭建好工具后就要写入一些任务为项目服务了，gulp的任务编写就跟写js一样，主要API只有4个gulp.src()、gulp.dest()、gulp.task()、gulp.watch()，易于掌握，下面主要介绍一些易理解偏差的点，所以大家还是先看一遍官网的介绍。

1、gulp.scr()

在gulp中使用的是node的stream流，首先获取到stream，然后通过stream的pipe()方法把流导向你想要的地方，而gulp.src()方法就是获取流的。但这个并不是原本的文件流，而是封装过后的虚拟文件对象流(Vinyl files)，带有原始文件的名称、路径、内容等信息。该方法的语法为：

gulp.src(globs [, options])

globs是文件匹配模式(类似正则匹配)，用来匹配文件路径，也可以直接指定某个具体的文件路径，如果有多组匹配模式可以使用数组形式。options是一个可选参数。

下面介绍一下globs的匹配规则：

• * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾。

• ** 匹配路径中的0个或多个目录及其子目录，需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。

• ? 匹配文件路径中的一个字符(不会匹配路径分隔符)。

• [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法。

• !(pattern|pattern|pattern) 匹配与括号中给定的任一模式都不匹配的字符。

• ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次。

• +(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次。

• *(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次。

• @(pattern|pattern|pattern) 匹配括号中给定的任一模式1次。

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

gulp.src(['static/**/*.js', 'static/**/*.css', 'static/**/*.html'])

使用数组的好处在于能使用!进行排除某些模式，但注意!不能为数组的第一个字符

gulp.src(['static/**/*.js', '!static/module/*.js'])

2、gulp.dest()

gulp.dest()方法是用来写文件的，语法如下：

gulp.dest(path [, options])

path是路径参数，options是可选参数，一般用不到。

如果想用好这个方法，就要理解好文件传入路径与传出路径的关系。gulp的工作流程是通过src()获取指定路径下的文件流，通过pipe()导到某些gulp插件中处理，完成后通过pipe()导到dest()中，最后写到指定的目录下。

• 这里重要的一点是，gulp.dest()的路径参数只能指定生成文件的目录路径名称，不能指定生成文件的文件名称，而文件名称是由传入的文件流名称决定的。

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

如果想改变文件名称可以使用其他gulp插件完成。

• 另一点是gulp.dest()生成的路径是由path参数加上gulp.src()文件匹配路径的通配符开始出现后的部分组成，举例说明：

var gulp = require('gulp');// 如果匹配到的文件是static/js/me/me.jsgulp.src('static/js/**/*.js')      // 由于通配符出现的部分是**/*.js，所以导出的文件路径是dist/js/me/me.js
      .pipe(gulp.dest('dist/js'));

再比如

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

通过设置gulp.src()的base参数，可以灵活的修改gulp.dest()生成的路径，如果没有设置则base参数默认是指传入路径匹配模式通配符出现前的部分，比如：

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

所以上面的说法可以理解为，gulp.dest()生成的路径是path参数替换传入文件路径的base部分，修改base参数就可以修改生成文件路径，比如：

// 没有配置base参数，此时默认的base路径为script/libgulp.src('script/lib/*.js') 
     // 假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')); // 生成的文件路径为 build/jquery.js// 如果配置了base参数，此时base路径为scriptgulp.src('script/lib/*.js', {base:'script'}) 
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build'));// 此时生成的文件路径为 build/lib/jquery.js

• gulp.dest()把文件流写入文件后，文件流还能导入其他插件继续使用

3、gulp.task()

gulp.task()是用来定义任务的，内部使用的是Orchestrator，一个以最大并发排列和运行任务和依赖的模块，task的语法为：

gulp.task(name [, deps] fn)

name是定义的任务名，deps是任务依赖的其他任务，是一个数组的形式，定义的任务会在依赖的任务执行完成后再执行，如果没有依赖任务可以省略，fn是任务具体执行的操作，该参数也是可选的。

在gulp.task()中执行多个任务，可以通过依赖来完成，比如要执行default任务时，还要执行one、two、three三个任务，可以这样写

// 这样one tow three三个任务都被执行了gulp.task('default', ['one', 'two', 'three'], function() {    // do something})

如果任务相互间没有依赖，则任务会按照你写的顺序执行，如果有依赖则先执行依赖的任务。但如果某个依赖的任务是异步的，那gulp不会等待这个异步任务执行完，而会继续执行后面的任务。例如：

gulp.task('one',function(){  //one是一个异步执行的任务
  setTimeout(function(){    console.log('one is done')
  },5000);
});//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行gulp.task('two',['one'],function(){  console.log('two is done');
});

最终的结果是先打印'two is done'，然后再打印'one is done'。
那我们如何实现异步任务同步的功能呢，请看另一篇文章《以同步的方式运行 Gulp 任务和任务中的步骤》。

4、gulp.watch()

gulp.watch()是用来监听文件变化的，这样你就可以在开发中实时监测文件的改动，然后自动做出相应的变化，比如压缩，其语法为

gulp.watch(glob [, opts] task)

glob是文件的通配符模式，匹配文件路径，opts是可配置参数，一般不用，task是监听变化后要执行的任务，是一个数组。

gulp.task('uglify',function(){  //do something});
gulp.task('reload',function(){  //do something});
gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch()还有另一种形式

gulp.watch(glob [, opts] cb)

前两个参数一样，cb是回调函数，监听的文件变化时会调用该方法，方法传递一个参数，该参数带有文件变化的信息，type属性为变化的类型，可以是added，changed，deleted；path属性为发生变化的文件的路径

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

gulp常用插件

• gulp-rename 重命名文件

• gulp-sass 编译scss文件

• gulp-uglify 压缩js文件

• gulp-concat 合并文件，css和js

• gulp-htmlmin 压缩html文件

• gulp-autoprefixer 编译厂商前缀

• gulp-clean 删除文件

• gulp-rev 根据文件内容生成hash值，做静态资源版本管理

• gulp-rev-collector 替换html中的文件引用，与gulp-rev一起用

• gulp.spritesmith 生成精灵图

• gulp-load-plugins加载gulp插件，减少require的书写

• gulp-requirejs-optimize 合并打包requirejs的模块引用

• pump 使gulp的文件流往下传递，包括error，如果有一个地方报错，流的传递会停止

• gulp-util 用来在命令中输入参数，给任务传递自定义的参数

• run-sequence 以同步的方式执行异步任务

最后希望本文能帮助初学gulp的朋友理解gulp，参考自《前端构建工具gulpjs的使用介绍及技巧》，谢谢！

作者：朱man
链接：https://www.jianshu.com/p/71cff94b642c