gulp

时间 2019-11-20

标签 gulp 栏目 JavaScript 繁體版

原文原文链接

gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也很是简单，学习起来很容易，并且gulpjs使用的是nodejs中stream来读取和操做数据，其速度更快。若是你尚未使用过前端构建工具，或者以为gruntjs太难用的话，那就尝试一下gulp吧。css

本文导航：html

一、gulp的安装

首先确保你已经正确安装了nodejs环境。而后以全局方式安装gulp：前端

npm install -g gulp

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

npm install gulp

若是想在安装的时候把gulp写进项目package.json文件的依赖中，则能够加上--save-dev：jquery

npm install --save-dev gulp

这样就完成了gulp的安装。至于为何在全局安装gulp后，还须要在项目中本地安装一次，有兴趣的能够看下stackoverflow上有人作出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-gulp。大致就是为了版本的灵活性，但若是没理解那也没必要太去纠结这个问题，只须要知道一般咱们是要这样作就好了。git

二、开始使用gulp

2.1 创建gulpfile.js文件

就像gruntjs须要一个Gruntfile.js文件同样，gulp也须要一个文件做为它的主文件，在gulp中这个文件叫作gulpfile.js。新建一个文件名为gulpfile.js的文件，而后放到你的项目目录中。以后要作的事情就是在gulpfile.js文件中定义咱们的任务了。下面是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。github

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

此时咱们的目录结构是这样子的：web

├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json正则表达式

2.2 运行gulp任务

要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，而后在命令行中执行gulp命令就好了，gulp后面能够加上要执行的任务名，例如gulp task1，若是没有指定任务名，则会执行任务名为default的默认任务。chrome

三、gulp的API介绍

使用gulp，仅需知道4个API便可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，因此很容易就能掌握，但有几个地方需理解透彻才行，我会在下面一一说明。为了不出现理解误差，建议先看一遍官方文档。

3.1 gulp.src()

在介绍这个API以前咱们首先来讲一下Grunt.js和Gulp.js工做方式的一个区别。Grunt主要是以文件为媒介来运行它的工做流的，好比在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，而后能够在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，而后又以这个为基础继续执行其它任务...就这样反复下去。而在Gulp中，使用的是Nodejs中的stream(流)，首先获取到须要的stream，而后能够经过stream的pipe()方法把流导入到你想要的地方，好比Gulp的插件中，通过插件处理后的流又能够继续导入到其余插件中，固然也能够把流写入到文件中。因此Gulp是以stream为媒介的，它不须要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个缘由。再回到正题上来，gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，这个咱们暂时不用去深刻理解，你只需简单的理解能够用这个方法来读取你须要操做的文件就好了。其语法为：

gulp.src(globs[, options])

globs参数是文件匹配模式(相似正则表达式)，用来匹配文件路径(包括文件名)，固然这里也能够直接指定某个具体的文件路径。当有多个匹配模式时，该参数能够为一个数组。
options为可选参数。一般状况下咱们不须要用到。

下面咱们重点说说Gulp用到的glob的匹配规则以及一些文件匹配技巧。
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)

下面以一系列例子来加深理解

* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
*.* 能匹配 a.js,style.css,a.b,x.y
**.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
az 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a*.js gulp.src('script*.js') .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist*.js //若是 **underscore.js gulp.src('scriptunderscore.js') //假设匹配到的文件为script/util/underscore.js .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js gulp.src('script*.css') //此时base的值为 app/src
上面咱们说的gulp.dest()所生成的文件路径的规则，其实也能够理解成，用咱们给gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终获得生成文件的路径。
```
gulp.src('app/src*.css') //此时base的值为app/src,也就是说它的base路径为app/src
     //设该模式匹配到了文件 app/src/css/normal.css
    .pipe(gulp.dest('dist')) //用dist替换掉base路径，最终获得 dist/css/normal.css
```
因此改变base路径后，gulp.dest()生成的文件路径也会改变
```
gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js
```
用gulp.dest()把文件流写入文件后，文件流仍然能够继续使用。

3.3 gulp.task()

gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：
```
gulp.task(name[, deps], fn)
```
name 为任务名
deps 是当前定义的任务须要依赖的其余任务，为一个数组。当前定义的任务会在全部依赖的任务执行完毕后才开始执行。若是没有依赖，则可省略这个参数
fn 为任务函数，咱们把任务要执行的代码都写在里面。该参数也是可选的。
```
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务
  // Do something
});
```
gulp.task()这个API没什么好讲的，但须要知道执行多个任务时怎么来控制任务执行的顺序。
gulp中执行多个任务，能够经过任务依赖来实现。例如我想要执行one,two,three这三个任务，那咱们就能够定义一个空的任务，而后把那三个任务当作这个空的任务的依赖就好了：
```
//只要执行default任务，就至关于把one,two,three这三个任务执行了
gulp.task('default',['one','two','three']);
```
若是任务相互之间没有依赖，任务会按你书写的顺序来执行，若是有依赖的话则会先执行依赖的任务。
可是若是某个任务所依赖的任务是异步的，就要注意了，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任务时，会先执行one任务，但不会去等待one任务中的异步操做完成后再执行two任务，而是紧接着执行two任务。因此two任务会在one任务中的异步操做完成以前就执行了。

那若是咱们想等待异步任务中的异步操做完成后再执行后续的任务，该怎么作呢？
有三种方法能够实现：
第一：在异步操做完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。
```
gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成
  //one是一个异步执行的任务
  setTimeout(function(){
    console.log('one is done');
    cb();  //执行回调，表示这个异步任务已经完成
  },5000);
});

//这时two任务会在one任务中的异步操做完成后再执行
gulp.task('two',['one'],function(){
  console.log('two is done');
});
```
第二：定义任务时返回一个流对象。适用于任务就是操做gulp.src获取到的流的状况。
```
gulp.task('one',function(cb){
  var stream = gulp.src('client*.js')
      .pipe(dosomething()) //dosomething()中有某些异步操做
      .pipe(gulp.dest('build'));
    return stream;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});
```
第三：返回一个promise对象，例如
```
var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/q
gulp.task('one',function(cb){
  var deferred = Q.defer();
  // 作一些异步操做
  setTimeout(function() {
     deferred.resolve();
  }, 5000);
  return deferred.promise;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});
```
gulp.task()就这些了，主要是要知道当依赖是异步任务时的处理。

3.4 gulp.watch()

gulp.watch()用来监视文件的变化，当文件发生变化后，咱们能够利用它来执行相应的任务，例如文件压缩等。其语法为
```
gulp.watch(glob[, opts], tasks)
```
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，一般不须要用到
tasks 为文件变化后要执行的任务，为一个数组
```
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])
```
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); //变化的文件的路径
});
```
四、一些经常使用的gulp插件

gulp的插件数量虽然没有grunt那么多，但也能够说是应有尽有了，下面列举一些经常使用的插件。

4.1 自动加载插件

使用gulp-load-plugins
安装：npm install --save-dev gulp-load-plugins
要使用gulp的插件，首先得用require来把插件加载进来，若是咱们要使用的插件很是多，那咱们的gulpfile.js文件开头可能就会是这个样子的：
```
var gulp = require('gulp'),
    //一些gulp插件,abcd这些命名只是用来举个例子
    a = require('gulp-a'), 
    b = require('gulp-b'),
    c = require('gulp-c'),
    d = require('gulp-d'),
    e = require('gulp-e'),
    f = require('gulp-f'),
    g = require('gulp-g'),
    //更多的插件...
    z = require('gulp-z');
```
虽然这没什么问题，但会使咱们的gulpfile.js文件变得很冗长，看上去不那么舒服。gulp-load-plugins插件正是用来解决这个问题。
gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的:
```
{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}
```
而后咱们能够在gulpfile.js中使用gulp-load-plugins来帮咱们加载插件：
```
var gulp = require('gulp');
//加载gulp-load-plugins插件，并立刻运行它
var plugins = require('gulp-load-plugins')();
```
而后咱们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，以后再转换为驼峰命名。
实质上gulp-load-plugins是为咱们作了以下的转换
```
plugins.rename = require('gulp-rename');
plugins.rubySass = require('gulp-ruby-sass');
```
gulp-load-plugins并不会一开始就加载全部package.json里的gulp插件，而是在咱们须要用到某个插件的时候，才去加载那个插件。
最后要提醒的一点是，由于gulp-load-plugins是经过你的package.json文件来加载插件的，因此必需要保证你须要自动加载的插件已经写入到了package.json文件里，而且这些插件都是已经安装好了的。

4.2 重命名

使用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/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
    //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename
});
```
4.3 js文件压缩

使用gulp-uglify
安装：npm install --save-dev gulp-uglify
用来压缩js文件，使用的是uglify引擎
```
var gulp = require('gulp'),
    uglify = require("gulp-uglify");
 
gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});
```
4.4 css文件压缩

使用gulp-minify-css
安装：npm install --save-dev gulp-minify-css
要压缩css文件时可使用该插件
```
var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});
```
4.5 html文件压缩

使用gulp-minify-html
安装：npm install --save-dev gulp-minify-html
用来压缩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'));
});
```
4.6 js代码检查

使用gulp-jshint
安装：npm install --save-dev gulp-jshint
用来检查js代码
```
var gulp = require('gulp'),
    jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});
```
4.7 文件合并

使用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'));
});
```
4.8 less和sass的编译

less使用gulp-less,安装：npm install --save-dev gulp-less
```
var gulp = require('gulp'),
    less = require("gulp-less");
 
gulp.task('compile-less', function () {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});
```
sass使用gulp-sass,安装：npm install --save-dev gulp-sass
```
var gulp = require('gulp'),
    sass = require("gulp-sass");
 
gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});
```
4.9 图片压缩

可使用gulp-imagemin插件来压缩jpg、png、gif等图片。
安装：npm install --save-dev gulp-imagemin
```
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist'));
});
```
gulp-imagemin的使用比较复杂一点，并且它自己也有不少插件，建议去它的项目主页看看文档

4.10 自动刷新

使用gulp-livereload插件，安装:npm install --save-dev gulp-livereload。
当代码变化时，它能够帮咱们自动刷新页面
该插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。
```
var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen(); //要在这里调用listen()方法
  gulp.watch('less/*.less', ['less']);
});
```

gulp

一、gulp的安装

二、开始使用gulp

2.1 创建gulpfile.js文件

2.2 运行gulp任务

三、gulp的API介绍

3.1 gulp.src()

3.3 gulp.task()

3.4 gulp.watch()

四、一些经常使用的gulp插件

4.1 自动加载插件

4.2 重命名

4.3 js文件压缩

4.4 css文件压缩

4.5 html文件压缩

4.6 js代码检查

4.7 文件合并

4.8 less和sass的编译

4.9 图片压缩

4.10 自动刷新