gulp的使用

大雨狂甩了三天，整个华北都已经开启了看海模式，我估计再来两天我就学会游泳了。帝都的排水系统我也是服了，没办法，谁让咱是发展中国家呢！不扯那些没用的了，总结一下gulp的使用方式吧！

什么是gulp？

gulp是可以自动化执行任务的工具

在平时开发的流程里面,一定有一些任务需要手工重复得执行，比如:

把文件从开发目录拷贝到生产目录
把多个 JS 或者 CSS 文件合并成一个文件
对JS文件和CSS进行压缩
把sass或者less文件编译成CSS
压缩图像文件
创建一个可以实时刷新页面内容的本地服务器

只要你觉得有些动作是要重复去做的,就可以把这些动作创建成一个gulp任务，然后在指定的条件下自动执行。比如在less源文件发生改变后自动编译成css文件。

gulp特点

易于使用 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
快速构建 利用 node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。前一级的输出，直接变成后一级的输入，使得在操作上非常简单
高质量的插件 Gulp 严格的插件指南确保插件如你期望的那样简洁地工作。
易于学习 通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握。

流的概念

Stream是nodejs各种对象实现的抽象接口。
所有的stream对象都是EventEmitter的实例,可以发射事件。
流是一种有起点和终点的数据传输手段。
上一个的输出是下一个的输入

gulp中的流

gulp正是通过代码优于配置的策略来尽量简化任务编写的工作。
类似jquery里的链式操作，把各个方法串连起来构建完整的任务。
用gulp编写任务也可看作是用Node.js代码编写任务。
当使用流时,gulp不需要生成大量的中间文件，只将最后的输出写入磁盘，整个过程因此变得非常快。

安装gulp

在项目里使用gulp需要：

安装node
在全局范围内去安装一下gulp的命令行工具
然后在项目里面再去本地安装gulp

安装node

gulp是基于Nodejs的自动任务运行器
安装Gulp和相关行件用的都是node的包管理工具npm
所以你需要先在电脑上安装 node,确定在命令行工具的下面可以使用npm这个命令，这样就能去安装Gulp了

gulp 命令行工具

使用 npm install 去安装 gulp，注意加上一个 -g 的参数，表示在全局范围内去安装.
一般用 npm 安装的时候用一个 -g 的参数就表示，这个安装的东西会作为命令去执行。
如果你在mac或linux下遇到了权限问题,在下面这个命令的前面加上 sudo npm install gulp -g 并输入mac密码。
```
$ npm install -g gulp
```
安装完成后可以输入 gulp --help 如果输出一些帮助的信息就表示可以gulp命令行成功安装了如果安装不上可以换一下源试试
- 淘宝源 npm install -g gulp --registry=http://registry.npm.taobao.org
- 中国源 npm install -g gulp --registry=http://registry.cnpmjs.org
- 官方源 npm install -g gulp --registry=http://www.npmjs.org/

gulp本地安装

1、先创建一个目录在 mac 和 linux 操作系统下创建一个文件夹

mkdir learngulp

2、使用 `cd` 命令进入此目录

cd learngulp

3、创建项目描述文件`package.json` 项目需要一个叫`package.json`的文件来管理项目的配置,可以使用 `npm init` 这个命令生成

npm init

name: (zhufeng_automation) learngulp //项目名称

version: (1.0.0) 1.0.0 //项目版本号

description: learn gulp //项目说明

entry point: (index.js) index.js // 入口文件

test command: test.js //测试脚本

执行npm test时会执行此文件

git repository: (https://github.git) //模块的git仓库

keywords: node.js gulp //在npmjs官网搜索时的关键字

author: zhufengpeixun //项目作者名字 license: (ISC) MIT //授权协议

About to write to D:\mygit\zhufeng_automation\package.json:

Is this ok? (yes) yes //直接回车确认

回车后会在当前目录下创建一个 package.json 文件

初始化为了简便可以直接使用npm init -y 一键同意

npm init -y

本地安装gulp

本地安装gulp到开发依赖中

npm install gulp --save-dev

这样可以把 gulp 作为项目的开发依赖(只在开发时用，不会发布到线上)
第一会在node_modules下安装本地的gulp库
第二会把并把添加配置到package.json文件里面

"devDependencies": {

"gulp": "^3.9.0"

}

运行gulp

gulp的任务要放到一个叫 gulpfile.js 的文件里面

先在项目的根目录下面创建一个这样的文件，然后在这个文件的顶部添加下面这行代码

var gulp = require('gulp');

通过require可以把gulp模块引入当前项目并赋值给gulp变量，这样gulp这个变量里面就会拥有gulp的所有的方法了。

创建gulp的任务

可以使用gulp的task方法。

同样我们去创建一个叫 hello 的任务，它要做的事就是在控制台上输出 "您好" 这两个字

第一个参数是任务的名称
第二个参数是任务的定义,是一个匿名函数

 gulp.task('hello', function () {
   console.log('您好');
 });

执行gulp任务

打开命令行工具，进入到项目所在的目录，然后输入：

gulp hello

会返回：

[21:36:34] Starting 'hello'...

您好

[21:36:34] Finished 'hello' after 959 μs

gulp后面跟着的是任务的名称，不输入任务名称的话会默认找default任务，找不到会报错

执行其它任务

可以使用 gulp <task> <othertask>

gulp参数

gulp 只有你需要熟知的参数标记，其他所有的参数标记只在一些任务需要的时候使用。

-v 或 --version 会显示全局和项目本地所安装的 gulp版本号
--gulpfile 手动指定一个 gulpfile 的路径，这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录
--cwd dirpath 手动指定 CWD。定义 gulpfile 查找的位置，此外，所有的相应的依赖（require）会从这里开始计算相对路径
-T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树
--color 强制 gulp 和 gulp 插件显示颜色，即便没有颜色支持
--no-color 强制不显示颜色，即便检测到有颜色支持
--silent 禁止所有的 gulp 日志

gulp.js工作方式

gulp的使用流程一般是：

首先通过gulp.src()方法获取到想要处理的文件流
然后把文件流通过pipe方法导入到gulp的插件中
最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中
gulp.dest()方法则把流中的内容写入到文件中

 var gulp = require('gulp');
    gulp.src('script/src.js')             // 获取文件的流的api
        .pipe(gulp.dest('dist/dest.js')); // 写文件的api

gulp核心API

gulp只有4个核心API

1、gulp.src()

在gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe方法把流导入到你想要的地方，比如Gulp的插件中,经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度快的一个原因.

gulp.src()方法正是用来获取流的

但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流,这个虚拟文件对象中存储着原始文件的路径、文件名和内容等信息.

其语法为：

gulp.src(globs,[ options])

globs 参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组
options 为可选参数。通常情况下我们不需要用到

glob语法

gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

glob规则

匹配符	说明
*	匹配文件路径中的0个或多个字符，但不会匹配路径分隔符
**	匹配路径中的0个或多个目录及其子目录
?	匹配文件路径中的一个字符(不会匹配路径分隔符)
[...]	匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个
!(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)

glob示例

glob	匹配
*	能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
.	a.js,style.css,a.b,x.y
//*.js	能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
**	能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
a/**/z	能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z	能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
?.js	能匹配 a.js,b.js,c.js
a??	能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js	只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js	能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

2、gulp.dest()

用来向硬盘写入文件的，其语法为：

gulp.dest(path,[options])

path 为写入文件的路径
options 为一个可选的参数对象，通常我们不需要用到

要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。

gulp.dest()传入的路径参数只能用来指定要生成的文件的目录,而不能指定生成文件的文件名

它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的

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

gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。

通过指定gulp.src()方法配置参数中的base属性，我们可以更灵活的来改变gulp.dest()生成的文件路径

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

3、gulp.task()

gulp.task方法用来定义任务，其语法为：

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

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

 gulp.task('mytask', ['array', 'of', 'task', 'names'],
   function() { //定义一个有依赖的任务
      // Do something
  });

如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务

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

在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数

 gulp.task('one',function(callback){ //cb为任务函数提供的回调，用来通知任务已经完成
      //one是一个异步执行的任务
      setTimeout(function(){
        console.log('one is done');
        callback();  //执行回调，表示这个异步任务已经完成
      },5000);
    });

4、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(glob[, opts, cb])

glob和 opts 参数与第一种用法相同
cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息 type属性为变化的类型，可以是 added、changed、deleted和path属性为发生变化的文件的路径

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

基本任务

复制单个文件

     var gulp = require('gulp');
     gulp.task('copy-html',function(){
         return gulp.src('app/index.html').pipe(gulp.dest('dist'));
     });

复制多个文件

    var gulp = require('gulp');
    //复制图片
    gulp.task('copy-images',function(){
        return gulp.src('app/imgs/*.jpg')
        .pipe(gulp.dest('dist'));
    });

    /**
     * 1. {} 里可以指定多个扩展名
     * 2. * 匹配所有的字符，除了路径分隔符 /
     * 3. ** 匹配所有的字符，包括路径分隔符 /
     */
    gulp.task('copy-images',function(){
        return gulp.src('app/imgs/**/*.{jpg,png}')
        .pipe(gulp.dest('dist'));
    });

    /**
     * 1. 匹配多个目录 glob
     * 2. 可以填写一个数组
     */
    gulp.task('copy-other',function(){
        return gulp.src(['app/css/*.css','app/js/*.js'],{base:'app'})
        .pipe(gulp.dest('dist'));
    });

    /**
     * 1. 匹配多个目录 glob
     * 2. !表示 排除一个文件
     */
    gulp.task('copy-other',function(){
        return gulp.src(['app/css/*.css','app/js/*.js'
        ,'!app/js/*.tmp.js'],{base:'app'})
        .pipe(gulp.dest('dist'));
    });

组合任务

    var gulp = require('gulp');

    gulp.task('copy-html',function(){
        return gulp.src('app/index.html').pipe(gulp.dest('dist'));
    });

    gulp.task('copy-images',function(){
        return gulp.src('app/imgs/**/*.{jpg,png}').pipe(gulp.dest('dist'));
    });

    gulp.task('copy-other',function(){
        return gulp.src(['app/css/*.css','app/js/*.js','app/js/*.tmp.js'],{base:'app'}).pipe(gulp.dest('dist'));
    });


    gulp.task('default',['copy-html','copy-images','copy-other'],function(){
        console.log('全部拷贝任务执行完毕!');
    });

监听任务

使用 gulp 的 watch 这个方法，我们可以去监视一些文件，当这些文件发生变化的时候，立即去执行一些指定的任务

    var gulp = require('gulp');

    gulp.task('copy-html',function(){
        return gulp.src('app/index.html')
        .pipe(gulp.dest('dist'));
    });

    gulp.task('copy-images',function(){
        return gulp.src('app/imgs/**/*.{jpg,png}',{base:'app'})
        .pipe(gulp.dest('dist'));
    });

    gulp.task('copy-other',function(){
        return gulp.src(['app/css/*.css','app/js/*.js'
        ,'app/js/*.tmp.js'],{base:'app'}).pipe(gulp.dest('dist'));
    });

    //在执行watch的时候会监控index.html文件的变化，发生变化后可以执行拷贝html的任务
    gulp.task('default',function(){
        gulp.watch('app/index.html',['copy-html']);
        gulp.watch('app/imgs/**/*.{jpg,png}',['copy-images']);
        gulp.watch(['app/css/*.css','app/js/*.js'
        ,'app/js/*.tmp.js'],['copy-other']);
    });

gulp插件

gulp提供了一些很实用的接口，但本身并不能做太多的事情，可以读取文件、写入文件以及监控文件等一少部分功能，其它实用的功能都是依靠插件来进行扩展的，这些插件可以实现比如：

编译 Sass：gulp-sass
编译 Less：gulp-less
合并文件：gulp-concat
压缩js 文件：gulp-uglify
重命名js文件：gulp-rename
优化图像大小：gulp-imagemin
压缩css 文件：gulp-minify-css
创建本地服务器：gulp-connect
实时预览 gulp-connect

使用插件步骤

npm install xxx --save-dev 安装插件
在 gulpfile.js 顶部引入此插件
在创建任务的时候使用此插件

gulp-load-plugins

这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的:

"devDependencies": {

"gulp": "^3.9.0",

"gulp-concat": "^2.6.0",

"gulp-connect": "^2.2.0"

}

然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

然后我们要使用gulp-concat和gulp-connect这两个插件的时候，就可以使用$.concat和$.connect来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。

less

less插件可以把less文件编译成css

npm install gulp-less --save-dev

    var gulp = require('gulp');
    var less = require('gulp-less');

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

    gulp.task('default',['less']);

gulp-concat

这个插件可以把几个文件合并到一块

npm install gulp-concat --save-dev

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

  gulp.task('concat',function(){
      return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])//指定要合并的文件glob
          .pipe(concat('app.js'))//进行合并并指定合并后的文件名
          .pipe(gulp.dest('dist/js'));//输出到目标路径
  });

  gulp.task('default',['concat']);

gulp-uglify

合并后我们可以对JS文件进行合并，最小化处理

npm install gulp-uglify --save-dev

    var gulp = require('gulp');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify')

    gulp.task('uglify',function(){
        return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
            .pipe(concat('app.js')) //把多个JS文件合并成一个文件
            .pipe(uglify()) //对合并后的app.js文件进行压缩
            .pipe(gulp.dest('dist/js')); //输出到目的地
    });

    gulp.task('default',['uglify']);

gulp-rename

在把处理好的文件存放到指定的位置之前，我们可以先去重新命名一下它

npm install gulp-rename --save-dev

    var gulp = require('gulp');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    gulp.task('uglify',function(){
        return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])//指定要处理的文件
            .pipe(concat('app.js'))//合并成一个文件
            .pipe(gulp.dest('dist/js'))//保存此文件
            .pipe(uglify())//进行压缩
            .pipe(rename('app.min.js'))//对此文件进行重命名
            .pipe(gulp.dest('dist/js'));//再输出一次
    });

    gulp.task('default',['uglify']);

gulp-minify-css

压缩css

npm install gulp-minify-css --save-dev

   var gulp = require('gulp');
    var less = require('gulp-less');
    var minify = require('gulp-minify-css');//在文件的顶部去包含这个插件，起个名字，叫做 minify
    var rename = require('gulp-rename');
    gulp.task('minify',function(){
        return gulp.src('app/less/page.less')//指定 less文件
            .pipe(less())//把less编译成css
            .pipe(gulp.dest('dist/css'))//输出到目的地
            .pipe(minify())//对 css再进行压缩
            .pipe(rename('page.min.css'))//重命名
            .pipe(gulp.dest('dist/css'));//输出到目的地
    });

    gulp.task('default',['less']);

gulp-minify-html

html文件压缩

npm install gulp-minify-html --save-dev

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

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

gulp-imagemin

如果要想在保证不改变图像质量的情况下，让图像文件的体积变得更小一点,我们可以使用gulp-imagemin

npm install gulp-imagemin --save-dev

 var gulp = require('gulp');
 var imagemin = require('gulp-imagemin');

 gulp.task('copy-images',function(){
     return gulp.src('app/imgs/**/*.{jpg,png}')//指定要压缩的图片
         .pipe(imagemin()) //进行图片压缩
         .pipe(gulp.dest('dist'));//输出目的地
 });

  gulp.task('default',['copy-images']);

gulp-connect

有些时候我们需要把文件放到本地服务器上去预览，gulp-connect可以帮我们创建一个本地服务器去运行我们的项目

npm install gulp-connect --save-dev

    var gulp = require('gulp');
    var connect = require('gulp-connect');

    gulp.task('server',function(){
       connect.server({
           root:'dist',//服务器的根目录
           port:8080 //服务器的地址，没有此配置项默认也是 8080
       });
    });

    gulp.task('default',['server']); //运行此任务的时候会在8080上启动服务器，

自动刷新

我们希望当文件变化的时候浏览器可以自动刷新，这样我们就不需要文件修改后手动去刷新浏览器了

 var gulp = require('gulp');
    var connect = require('gulp-connect');

    gulp.task('copy-html',function(){
         gulp.src('app/index.html')//指定源文件
             .pipe(gulp.dest('dist'))//拷贝到dist目录
             .pipe(connect.reload());//通知浏览器重启
    });

    gulp.task('watch',function(){
        gulp.watch('app/index.html',['copy-html']);//当index.html文件变化时执行copy-html任务
    });

    gulp.task('server',function(){
        connect.server({
            root:'dist',//服务器的根目录
            port:8080, //服务器的地址，没有此配置项默认也是 8080
            livereload:true//启用实时刷新的功能
        });
    });
    gulp.task('default',['server','watch']);//运行此任务的时候会在8080上启动服务器，

gulp.js 特点

使用gulp.js构建的是代码不是配置文件
使用node标准库编写脚本
插件非常简单，职责单一
任务都是最大的并发数执行