gulp之道

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

gulp

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

gulp是什么

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

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

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

gulp vs grunt

先说一下gulp

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

gulp处理任务:
gulp

再看看grunt

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

Grunt处理任务的流程:
grunt

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

此外,gulpgrunt都需要一个构建文件来支持构建,grunt的是gruntfile.jsgulp的是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');
});
注:上面两个文件只是拿来做对比说明gulpgrunt的书写方式不同,具体的任务两者并不完全匹配。

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会展开为 recroc
  • r{e,}o会展开为 reoro
  • r{0..3}o会展开为 r0or1dor2or3o

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])

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

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

OK,gulpApi就介绍这么多了,是不是很简单?

常用的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
用来把多个文件合并为一个文件,我们可以用它来合并jscss文件等,这样就能减少页面的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会输出如下信息:

bytediff

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-syncgulp.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还有什么不明白之处,或者本文有什么遗漏或错误,欢迎一起交流。
阅读 13.3k

推荐阅读
Reeoo's Page
用户专栏

Reeoo's Page

8 人关注
5 篇文章
专栏主页