gulp编译文件基本操作集囊

一、简介

        gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不尽能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不尽可以很愉快的编写代码，而且大大提高我们的工作效率。

        gulp是基于node.js的自动任务运行器，她能自动化地完成JavaScript/coffee/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成。并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了lunix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上十分简单。通过本文，我们将学习如何使用gulp来改变开发流程，从而使开发更加快速高效。

    gulp和grunt非常类似，但相比于grunt的频繁IO操作，gulp的流操作，能更快更便捷的完成项目构建工作。

二、安装以及运行

这里不做介绍，请参考以下链接：

gulp中文文档：https://www.gulpjs.com.cn/docs/getting-started/

gulp详细教程：http://www.ydcss.com/archives/18#lesson2

三、gulp主要参数

gulp主要参数有.src 、 .watch 、 .dest 、CLI：

gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

例如：gulp.task('less', function () {
                  return gulp.src('public/less/*.less')
                       .pipe(less())
                        .pipe(gulp.dest('public/dist'))
           });

 gulp.src返回了stream。

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的，相对路径也可以根据所给的 base 来计算。

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

定义一个使用 Orchestrator 实现的任务（task）。

gulp.task('somename', function() {
  // 做一些事
});

name

任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

deps

类型： Array

一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

fn

该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

异步任务支持

任务可以异步执行，如果 fn 能做到以下其中一点：

接受一个 callback

// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

返回一个 stream

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

返回一个 promise

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：

• 给出一个提示，来告知 task 什么时候执行完毕，
• 并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。

对于这个例子，让我们先假定你有两个 task，"one" 和 "two"，并且你希望它们按照这个顺序执行：

1. 在 "one" 中，你加入一个提示，来告知什么时候它会完成：可以再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。

2. 在 "two" 中，你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

因此，这个例子的实际代码将会是这样：

var gulp = require('gulp');

// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

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

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

四、基本插件操作介绍

1、gulp-less：

    使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

1.1、基本使用

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ;   gulp . task ( 'testLess' , function ( ) {      gulp . src ( 'src/less/index.less' )          . pipe ( less ( ) )          . pipe ( gulp . dest ( 'src/css' ) ) ; } ) ;

1.2、编译多个less文件

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ;   gulp . task ( 'testLess' , function ( ) {      gulp . src ( [ 'src/less/index.less' , 'src/less/detail.less' ] ) //多个文件以数组形式传入          . pipe ( less ( ) )          . pipe ( gulp . dest ( 'src/css' ) ) ; //将会在src/css下生成index.css以及detail.css } ) ;

3.3、匹配符“!”，“*”，“**”，“{}”

JavaScript

1 2 3 4 5 6 7 8 9 10

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ;   gulp . task ( 'testLess' , function ( ) {      //编译src目录下的所有less文件      //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）      gulp . src ( [ 'src/less/*.less' , '!src/less/**/{reset,test}.less' ] )          . pipe ( less ( ) )          . pipe ( gulp . dest ( 'src/css' ) ) ; } ) ;

1.4、调用多模块（编译less后压缩css）

JavaScript

1 2 3 4 5 6 7 8 9 10 11

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ,      //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev]      cssmin = require ( 'gulp-minify-css' ) ;   gulp . task ( 'testLess' , function ( ) {      gulp . src ( 'src/less/index.less' )          . pipe ( less ( ) )          . pipe ( cssmin ( ) ) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))          . pipe ( gulp . dest ( 'src/css' ) ) ; } ) ;

1.5、当less有各种引入关系时，编译后不容易找到对应less文件，所以需要生成sourcemap文件，方便修改

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ,      //确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]      sourcemaps = require ( 'gulp-sourcemaps' ) ;   gulp . task ( 'testLess' , function ( ) {      gulp . src ( 'src/less/**/*.less' )          . pipe ( sourcemaps . init ( ) )          . pipe ( less ( ) )          . pipe ( sourcemaps . write ( ) )          . pipe ( gulp . dest ( 'src/css' ) ) ; } ) ;

参考地址：http://www.ydcss.com/archives/34

2、gulp-uglify：

使用gulp-uglify压缩javascript文件，减小文件大小。

2.1、基本使用

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      uglify = require ( 'gulp-uglify' ) ;   gulp . task ( 'jsmin' , function ( ) {      gulp . src ( 'src/js/index.js' )          . pipe ( uglify ( ) )          . pipe ( gulp . dest ( 'dist/js' ) ) ; } ) ;

2.2、压缩多个js文件

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      uglify = require ( 'gulp-uglify' ) ;   gulp . task ( 'jsmin' , function ( ) {      gulp . src ( [ 'src/js/index.js' , 'src/js/detail.js' ] ) //多个文件以数组形式传入          . pipe ( uglify ( ) )          . pipe ( gulp . dest ( 'dist/js' ) ) ; } ) ;

2.3、匹配符“!”，“*”，“**”，“{}”

JavaScript

1 2 3 4 5 6 7 8 9 10

var gulp = require ( 'gulp' ) ,      uglify = require ( 'gulp-uglify' ) ;   gulp . task ( 'jsmin' , function ( ) {      //压缩src/js目录下的所有js文件      //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）      gulp . src ( [ 'src/js/*.js' , '!src/js/**/{test1,test2}.js' ] )          . pipe ( uglify ( ) )          . pipe ( gulp . dest ( 'dist/js' ) ) ; } ) ;

2.4、指定变量名不混淆改变

JavaScript

1 2 3 4 5 6 7 8 9 10 11

var gulp = require ( 'gulp' ) ,      uglify = require ( 'gulp-uglify' ) ;   gulp . task ( 'jsmin' , function ( ) {      gulp . src ( [ 'src/js/*.js' , '!src/js/**/{test1,test2}.js' ] )          . pipe ( uglify ( {              //mangle: true,//类型：Boolean 默认：true 是否修改变量名              mangle : { except : [ 'require' , 'exports' , 'module' , '$' ] } //排除混淆关键字          } ) )          . pipe ( gulp . dest ( 'dist/js' ) ) ; } ) ;

2.5、gulp-uglify其他参数 具体参看

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12

var gulp = require ( 'gulp' ) ,      uglify = require ( 'gulp-uglify' ) ;   gulp . task ( 'jsmin' , function ( ) {      gulp . src ( [ 'src/js/*.js' , '!src/js/**/{test1,test2}.js' ] )          . pipe ( uglify ( {              mangle : true , //类型：Boolean 默认：true 是否修改变量名              compress : true , //类型：Boolean 默认：true 是否完全压缩              preserveComments : 'all' //保留所有注释          } ) )          . pipe ( gulp . dest ( 'dist/js' ) ) ; } ) ;

参考地址：http://www.ydcss.com/archives/54

3、gulp-imagemin

使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）

3.1、基本使用

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      imagemin = require ( 'gulp-imagemin' ) ;   gulp . task ( 'testImagemin' , function ( ) {      gulp . src ( 'src/img/*.{png,jpg,gif,ico}' )          . pipe ( imagemin ( ) )          . pipe ( gulp . dest ( 'dist/img' ) ) ; } ) ;

3.2、gulp-imagemin其他参数 具体参看

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

var gulp = require ( 'gulp' ) ,      imagemin = require ( 'gulp-imagemin' ) ;   gulp . task ( 'testImagemin' , function ( ) {      gulp . src ( 'src/img/*.{png,jpg,gif,ico}' )          . pipe ( imagemin ( {              optimizationLevel : 5 , //类型：Number  默认：3  取值范围：0-7（优化等级）              progressive : true , //类型：Boolean 默认：false 无损压缩jpg图片              interlaced : true , //类型：Boolean 默认：false 隔行扫描gif进行渲染              multipass : true //类型：Boolean 默认：false 多次优化svg直到完全优化          } ) )          . pipe ( gulp . dest ( 'dist/img' ) ) ; } ) ;

3.3、深度压缩图片

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var gulp = require ( 'gulp' ) ,      imagemin = require ( 'gulp-imagemin' ) ,      //确保本地已安装imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]      pngquant = require ( 'imagemin-pngquant' ) ;   gulp . task ( 'testImagemin' , function ( ) {      gulp . src ( 'src/img/*.{png,jpg,gif,ico}' )          . pipe ( imagemin ( {              progressive : true ,              svgoPlugins : [ { removeViewBox : false } ] , //不要移除svg的viewbox属性              use : [ pngquant ( ) ] //使用pngquant深度压缩png图片的imagemin插件          } ) )          . pipe ( gulp . dest ( 'dist/img' ) ) ; } ) ;

3.3、只压缩修改的图片。压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）。

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var gulp = require ( 'gulp' ) ,      imagemin = require ( 'gulp-imagemin' ) ,      pngquant = require ( 'imagemin-pngquant' ) ,      //确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]      cache = require ( 'gulp-cache' ) ;      gulp . task ( 'testImagemin' , function ( ) {      gulp . src ( 'src/img/*.{png,jpg,gif,ico}' )          . pipe ( cache ( imagemin ( {              progressive : true ,              svgoPlugins : [ { removeViewBox : false } ] ,              use : [ pngquant ( ) ]          } ) ) )          . pipe ( gulp . dest ( 'dist/img' ) ) ; } ) ;

参考地址：http://www.ydcss.com/archives/26

4、gulp-htmlmin

使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。

4.1、基本使用

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

4.2、更多压缩【参数】请查看 https://github.com/kangax/html-minifier [html-minifer docs]

参考地址：http://www.ydcss.com/archives/20

5、gulp-concat

使用gulp-concat合并javascript文件，减少网络请求

基本使用

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      concat = require ( 'gulp-concat' ) ;   gulp . task ( 'testConcat' , function ( ) {      gulp . src ( 'src/js/*.js' )          . pipe ( concat ( 'all.js' ) ) //合并后的文件名          . pipe ( gulp . dest ( 'dist/js' ) ) ; } ) ;

参考地址：http://www.ydcss.com/archives/83

6、gulp-rev-append

使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存

6.1、gulp-rev-append 插件将通过正则(?:href|src)=”(.*)[?]rev=(.*)[“]查找并给指定链接填加版本号（默认根据文件MD5生成，因此文件未发生改变，此版本号将不会变）

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

< ! doctype html > < html >    < head >      < link rel = "stylesheet" href = "css/style.css?rev=@@hash" >      <script src = "js/js-one.js?rev=@@hash" > </script>      <script src = "js/js-two.js" > </script>    < / head >    < body >      < div > hello , world ! < / div >      < img src = "img/test.jpg?rev=@@hash" alt = "" / >      <script src = "js/js-three.js?rev=@@hash" > </script>    < / body > < / html >

6.2、配置gulpfile.js

基本使用（给页面引用url添加版本号，以清除页面缓存）

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      rev = require ( 'gulp-rev-append' ) ;   gulp . task ( 'testRev' , function ( ) {      gulp . src ( 'src/html/index.html' )          . pipe ( rev ( ) )          . pipe ( gulp . dest ( 'dist/html' ) ) ; } ) ;

参考地址：http://www.ydcss.com/archives/49

7、gulp-minify-css

使用gulp-minify-css压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。重要：gulp-minify-css已经被废弃，请使用gulp-clean-css，用法一致。

3.1、基本使用

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      cssmin = require ( 'gulp-minify-css' ) ;   gulp . task ( 'testCssmin' , function ( ) {      gulp . src ( 'src/css/*.css' )          . pipe ( cssmin ( ) )          . pipe ( gulp . dest ( 'dist/css' ) ) ; } ) ;

3.2、gulp-minify-css 最终是调用clean-css，其他参数查看这里

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var gulp = require ( 'gulp' ) ,      cssmin = require ( 'gulp-minify-css' ) ;   gulp . task ( 'testCssmin' , function ( ) {      gulp . src ( 'src/css/*.css' )          . pipe ( cssmin ( {              advanced : false , //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]              compatibility : 'ie7' , //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]              keepBreaks : true , //类型：Boolean 默认：false [是否保留换行]              keepSpecialComments : '*'              //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀          } ) )          . pipe ( gulp . dest ( 'dist/css' ) ) ; } ) ;

3.3、给css文件里引用url加版本号（根据引用文件的md5生产版本号），像这样：

JavaScript

1 2 3 4 5 6 7 8 9 10 11

var gulp = require ( 'gulp' ) ,      cssmin = require ( 'gulp-minify-css' ) ;      //确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]      cssver = require ( 'gulp-make-css-url-version' ) ;   gulp . task ( 'testCssmin' , function ( ) {      gulp . src ( 'src/css/*.css' )          . pipe ( cssver ( ) ) //给css文件里引用文件加版本号（文件MD5）          . pipe ( cssmin ( ) )          . pipe ( gulp . dest ( 'dist/css' ) ) ; } ) ;

参考地址：http://www.ydcss.com/archives/41

8、gulp-autoprefixer

使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】

8.1、基本使用

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var gulp = require ( 'gulp' ) ,      autoprefixer = require ( 'gulp-autoprefixer' ) ;   gulp . task ( 'testAutoFx' , function ( ) {      gulp . src ( 'src/css/index.css' )          . pipe ( autoprefixer ( {              browsers : [ 'last 2 versions' , 'Android >= 4.0' ] ,              cascade : true , //是否美化属性值 默认：true 像这样：              //-webkit-transform: rotate(45deg);              //        transform: rotate(45deg);              remove : true //是否去掉不必要的前缀 默认：true          } ) )          . pipe ( gulp . dest ( 'dist/css' ) ) ; } ) ;

8.2、gulp-autoprefixer的browsers参数详解 （传送门）：

● last 2 versions: 主流浏览器的最新两个版本

● last 1 Chrome versions: 谷歌浏览器的最新版本

● last 2 Explorer versions: IE的最新两个版本

● last 3 Safari versions: 苹果浏览器最新三个版本

● Firefox >= 20: 火狐浏览器的版本大于或等于20

● iOS 7: IOS7版本

● Firefox ESR: 最新ESR版本的火狐

● > 5%: 全球统计有超过5%的使用率

8.3、发现上面规律了吗，相信这不难看出，接下来说说各浏览器的标识：

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

Chrome for Google Chrome.

Firefox or ff for Mozilla Firefox.

Explorer or ie for Internet Explorer.

iOS or ios_saf for iOS Safari.

Opera for Opera.

Safari for desktop Safari.

OperaMobile or op_mob for Opera Mobile.

OperaMini or op_mini for Opera Mini.

ChromeAndroid or and_chr

FirefoxAndroid or and_ff for Firefox for Android.

ExplorerMobile or ie_mob for Internet Explorer Mobile

更多详细资料：https://www.gulpjs.com.cn/