npm install gulp　　//这条命令是将gulp安装在项目根目录内，安装过程中会自建一个package-lock.json文件和一个node_modules文件夹，里面有gulp的安装文件

　　npm install --save-dev gulp  //将gulp安装在项目根目录内，同时将gulp依赖写进package.json文件内的devDependencies中

  2.1 建立gulpfile.js文件

　　var gulp = require('gulp');    //导入我们需要的gulp插件信息,与grunt的pkg: grunt.file.readJSON('package.json'),是同一个作用gulp.task('default',function(){  //定义一个任务（task）, default是任务名，function():定义任务所要执行的一系列操作.通常来说，它会是这种形式：gulp.src().pipe(someplugin())。这是测试实例，没按这个来console.log('hello world!');    // 做具体的事});

　　该方法是用来获取需要操作的文件,即查找需要，但注意返回的”流”里的内容不是原始的文件流，而是一个虚拟文件(Vinyl files)对象流，这个虚拟文件对象流中存储着原始文件的路径、文件名、内容等所有信息。

　　参数说明：globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以是一个数组。
      　　options为可选参数。通常情况下不需要用到，要看的话官网有介绍 http://www.gulpjs.com.cn/docs/api/。

　　gulp.src()最重要是globs的匹配规则以及一些文件匹配技巧。
　　Gulp内部使用了node-glob模块来实现文件匹配功能。下面这些特殊的字符可以帮我们匹配出任务需要的文件：

　　　　*  匹配任意数量的字符，但不会匹配路径分隔符(“\”)，除非路径分隔符出现在末尾(“script\”)

　　　　** 匹配路径中任意数量的多个目录及其子目录, 包括路径分隔符(“\”)，需要单独出现，即它左右不能有其他东西了(“/**/*.js”)。如果出现在末尾，也能匹配文件。

　　　　? 匹配文件路径中的单个字符(但不匹配路径分隔符(“\”))；

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

　　　　　　如：foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件；而foo/**/*js将匹配foo/目录以及其子目录中所有以.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，b.css，abc，abc/，但不能匹配a/b.js

　　　　*.* 能匹配 a.js，b.css，a.b，x.y

　　　　*/*/*.js 能匹配 a/b/c.js，x/y/z.css，但不能匹配a/b.js，a/b/c/d.css

　　　　** 能匹配 abc，a/b.js，a/b/c.js，x/y/z，x/y/z.css，能用来匹配所有的目录及其子目录内的文件。

　　　　**/*.js 能匹配 foo.js，a/foo.js，a/b/foo.js，a/b/c/foo.js             ”src/**/*.js” 可以通杀src文件夹下所有js文件！

　　　　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，即不匹配含x,y,z的

　　当然上面这些都是单一匹配模式，当有多种匹配模式时可以使用数组。

　　　　//使用数组的方式来匹配多种文件

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

　　数组的处理方式还有一个好处就是可以很方便的使用排除模式。在数组中的单个匹配模式前加上”!”,即排除模式，它会在匹配的结果中排除这个匹配，当然不能在数组中的第一个元素中使用排除模式，否则排除无效。    如下所示：

　　gulp.src([*.js,'!b*.js'])　　 //匹配所有js文件，但排除掉以b开头的js文件

　　gulp.src(['!b*.js',*.js]) 　　 //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

　　此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果，有点像数学里面的分配率。如下：

• a{b,c}d 会展开为 abd,acd
• a{b,}c 会展开为 abc,ac
• a{0..3}d 会展开为 a0d,a1d,a2d,a3d
• a{b,c{d,e}f}g 会展开为 abg,acdfg,acefg
• a{b,c}d{e,f}g 会展开为 abdeg,acdeg,abdeg,abdfg

　　在介绍gulp.dest()接口之前，先介绍下gulp的工作流程：首先通过gulp.src()方法获取到需要处理的文件流，然后把该文件流通过pipe()方法导入到各种gulp的插件中进行处理，最后把经过插件处理后的流再通过pipe()方法导入到gulp.dest()中写入文件，加以保存！

　　gulp.dest()方法就是用来写文件，并且重新输出（emits）所有数据，因此可以将它 pipe() 到多个文件夹。如果某文件夹不存在，将会自动创建它。

　　其语法为：gulp.dest(path[,options])

　　path：为文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例 来提供。
　　options：为一个可选的参数对象，通常不需要用到。

　　gulp.dest()这个接口很重要，若要将此接口使用好，就必须理解给它传入的“路径参数”与“最终生成的文件”之间的关系。给gulp.dest()传入的路径参数，只能用来指定最后生成文件的目录，而不是指定生成文件的文件名，生成文件的文件名还是导入到它的文件流自身的文件名，所以生成文件的文件名是由导入到它的文件流决定的，即使给它传入一个带有文件名的路径参数，然而gulp.dest()也会把这个文件名当做是目录名，如：

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

　　如果真想改变文件名，可以使用插件gulp-rename，后文对该插件的加载和使用有介绍，此处不做说明！

　　下面以一些具体例子说明“文件路径”与给gulp.dest()方法传入的“路径参数”之间的关系。
　　gulp.dest(path)生成的文件路径是在传入的path参数后面再加上gulp.src()中通配符(“**”，”*.js”，”/**/*.js”)开始出现后的那部分路径。例如：

    var gulp = reruire('gulp');gulp.src('script/**/*.js')   //通配符开始出现的那部分路径为 **/*.js.pipe(gulp.dest('dist'));   //传入的路劲参数是“dist”，最后生成的文件路径为：dist/**，文件名还是“.js”；文件全路径则为:“dist/**/.js”　　　　//假设**/*.js 匹配到的文件为 zTree/zTree.js ,则生成的文件路径及文件名为 dist/zTree/zTree.js

    //但如果不是通过通配符匹配的文件，如　　 gulp.src('script/zTree/zTree.js')    //不是通过通配符匹配的文件.pipe(gulp.dest('dist'));  //最后生成的文件路径则为 dist/zTree.js，即gulp.dest()“路径参数/”加文件名//有通配符出现的那部分路径为 **/zTree.jsgulp.src('script/**/zTree.js')      //假设匹配到的文件为script/zTree/zTree.js.pipe(gulp.dest('dist'));        //则最后生成的文件路径为 dist/zTree/zTree.js//有通配符出现的那部分路径为 *.jsgulp.src('script/*.js')    //假设匹配到的文件为script/zTree.js .pipe(gulp.dest('dist'));        //则最后生成的文件路径为 dist/zTree.js　

　　通过指定gulp.src()方法配置参数中的base属性，可以更灵活的改变gulp.dest()生成的文件路径。如果在gulp.src()方法中没有配置base属性时，base的默认值为“通配符开始出现之前”那部分路径。

　　　　例如：gulp.src('src/modules/**/*.css')          //此时base的值为 src/modules

　　其实gulp.dest()生成文件路径的规则，其实也可以理解成，用给gulp.dest()传入的“路径参数”替换gulp.src()中的base路径，最终得到生成文件的路径。

　　　　gulp.src(' src/modules/**/*.js ')  　　 //此时base的值为src/modules,即base路径为src/modules

　　//假设该模式下匹配到的文件 src/modules/zTree /zTree.js

　　.pipe(gulp.dest('dist'))  　　//用dist替换掉base路径，即用dist替换掉src/modules/，最终得到 dist/zTree/zTree.js

　　所以改变base路径后，gulp.dest()生成的文件路径也会跟着改变，从而变得更灵活！

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

　　gulp.dest()把文件流写入文件后，其在nodejs中流转的文件流仍然可以继续使用，并被写成多个文件！

　　gulp.task()方法：定义一个使用 Orchestrator 实现的任务（task），即该方法内部使用的是Orchestrator。

　　语法结构为：gulp.task(name[, deps], fn)

　　name 为任务名，注：如果需要在命令行中运行具体任务，则名字中不能出现空格
　　deps 是一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。即deps是当前任务的依赖任务，只有等这些依赖任务执行完毕后，才会执行当前任务。如果没有依赖，则可省略这个参数

　　　　注意： 你的任务是否在这些前置依赖的任务完成之前就运行了？请一定要确保所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 stream或 promise 。
　　fn 为任务函数，定义任务所要执行的一些操作，执行代码都写在里面。该参数也是可选的。通常格式：gulp.src().pipe(someplugin())

    //定义一个有依赖的任务，下面的['task0', 'task1', 'task2']就是task的依赖gulp.task('task', ['task0', 'task1', 'task2'], function() {  // Do something});

　　gulp.task()这个API很简单，但需要知道执行多个任务时怎么来控制任务执行的顺序。
　　gulp中执行多个任务，可以通过任务依赖来实现。如想执行task0, task1, task2这三个任务，则可以定义一个空任务，然后把这三个任务当做这个空的任务的依赖就可以了：

    //执行default任务，就会把task0, task1, task2这三个任务都执行了gulp.task('default', ['task0', 'task1', 'task2']), function(){// Do something};

　　如果任务相互之间没有依赖，则会按照书写的顺序来依次执行；若有依赖则会先执行依赖任务。

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

    // task是一个异步执行的任务
    gulp.task(‘task’,function(){setTimeout(function(){console.log('Hello,Today!');},5000);});//task1任务依赖于task任务,但并不会等到task任务中的异步操作完成后再执行gulp.task('task1',['task'],function(){console.log(''Very good!');});

　　上面例子中执行task1任务时，会先执行task任务，但不会等待task任务中的异步操作完成后再执行task1任务，而是紧接着直接执行task1任务。所以task1任务会在task任务异步操作完成之前就执行了。也就失去了两者的依赖关系，这样的依赖没有实际意义！

　　所以既要在异步任务中异步操作完成后,再执行后续的任务（即,在依赖的异步任务异步执行完成后，再执行后续的任务），根据接口文档的叙述，可以理解为有以下三种方式：
　　第一：接受一个 callback。在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成, 回调函数作为一个参数传入任务函数，并且是第一个参数。

    //task是一个异步执行的任务,而test是用于通知异步任务已经完成的回调函数，作为参数传入任务函数gulp.task('task',function(test){setTimeout(function(){console.log('Hello,Today!');test();  //执行回调，表示这个异步任务已经完成},5000);});//这就可以让task1任务在task任务中的异步操作完成后再执行，从而避免了异步问题gulp.task('task1',['task'],function(){console.log(' Very good!');});

　　第二：返回一个 stream。在定义任务时返回一个流对象。对于本身就是操作gulp.src获取到的流的情况。

    gulp.task('somename', function() {var stream = gulp.src('client/**/*.js').pipe(doSomething ())       //doSomething()中有某些异步操作   .pipe(gulp.dest('build'));return stream;});gulp.task('task2',[ 'somename'],function(){console.log(' Do Something!');});

　　第三：返回一个promise对象。如

    var Q = require('q');   //一个很好的异步处理的库 https://github.com/kriskowal/qgulp.task('somename', function() {var deferred = Q.defer();setTimeout(function() {  // 执行异步的操作
        deferred.resolve();}, 5000);return deferred.promise;});gulp.task(' task2',[ 'somename'],function(){console.log(' Do Something!');});

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

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

　　gulp.task()就这些了，主要是要知道当依赖是异步任务时该怎么处理。下面接下来是gulp.watch();

  3.4 gulp.watch() 

　　//定义了一些任务,再定义一个gulp.watch()
gulp.task('uglify',function(){//do something});gulp.task(‘miniJs’,function(){//do something});gulp.watch('/src/modules/**/*.js', ['uglify', miniJs’]);

　　gulp.watch('src/modules/**/*.js ', function(event) {console.log('文件路径' + event.path + ' ,文件变化类型 ' + event.type);});//也可以分开写gulp.watch('src/modules/**/*.js ', function(event){console.log(event.type); //变化的类型 added为新增, changed为改变，deleted为删除，console.log(event.path); //发生变化的文件的路径});

  4.1 自动加载插件 gulp-load-plugins

    gulp = require('gulp');runSequence = require('run-sequence');del = require('del');uglify = require('gulp-uglify');concat = require('gulp-concat');minifyCss = require('gulp-minify-css');browserSync = require('browser-sync').create();

    {"devDependencies": {"gulp": "^3.9.1","gulp-concat": "^2.6.1","gulp-minify-css": "^1.2.4","gulp-uglify": "^3.0.0"}}

    首先需要将gulp加载进来var gulp = require('gulp');然后，加载gulp-load-plugins插件，并运行它var plugins = require('gulp-load-plugins')(); //或者： var gulpLoadPlugins = require('gulp-load-plugins')；var plugins = gulpLoadPlugins();

　　plugins. concat = require('gulp- concat);plugins. uglify = require('gulp- uglify ');

　　plugins. minifyCss = require(“gulp-minify-css”);

  4.2 文件合并　　gulp-concat

    //加载方式：var gulp = require('gulp'),var concat = require("gulp-concat");//或者：plugins. concat       // plugins是var plugins = require('gulp-    load-plugins')(); 　　　　//文件合并任务创建gulp.task('concat', function () {gulp.src('/src/modules/Suspension/scripts/*.js')      //要合并的文件.pipe(concat('all.js'))   //合并到一个名为"all.js"的新JS文件.pipe(gulp.dest('dist/ modules/Suspension/scripts')); 　　//将合并成的新JS文件存放到dist/ modules/Suspension/scripts路径下});

  4.3 JS文件压缩　　gulp-uglify

    //加载方式：var gulp = require('gulp'),uglify = require("gulp-uglify");//或者：
    plugins. uglify//JS文件压缩任务创建gulp.task('miniJs', function () {gulp.src(' dist/ modules/Suspension/scripts /*.js') // 要压缩的js文件.pipe(uglify())  //使用uglify进行JS文件压缩,更多配置请参考：.pipe(gulp.dest(' dist/ modules/Suspension/scripts ')); //压缩后的文件路径(此处压缩的是all.js源文件)});

  4.4 CSS文件压缩　　gulp-minify-css

    //加载方式：var gulp = require('gulp'),var minifyCss = require("gulp-minify-css");//或者：plugins. minifyCss     //驼峰命名方式// CSS文件压缩任务创建gulp.task('miniCss', function () {gulp.src(' dist/ modules/Suspension/ style /*.css')  //要压缩的css文件.pipe(minifyCss()) //压缩CSS文件.pipe(gulp.dest(' dist/ modules/Suspension/ style ')); //压缩后的文件路径(此处压缩的是all.css源文件)});

  4.5 图片压缩　　gulp-imagemin

    //加载方式：var gulp = require('gulp');var imagemin = require('gulp-imagemin');var pngquant = require('imagemin-pngquant');     //png图片压缩插件// 图片文件压缩任务创建gulp.task('imageMin', function () {return gulp.src('src/images/*').pipe(imagemin({optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化use: [pngquant()]  //使用pngquant来压缩png图片
        　　})).pipe(gulp.dest('dist'));});

  4.6 Html文件压缩　　gulp-minify-html

    //加载方式：var gulp = require('gulp'),minifyHtml = require("gulp-minify-html");//或者：plugins. minifyHtml     //驼峰命名方式// Html文件压缩任务创建gulp.task('minifyHtml', function () {gulp.src('client/*.html') // 要压缩的html文件.pipe(minifyHtml()) //压缩Html文件.pipe(gulp.dest('dist/client'));});

  4.7 JS代码检查　　gulp-jshint

    //加载方式：var gulp = require('gulp'),jshint = require("gulp-jshint");//或者：
    plugins. jshint//jshint文件压缩任务创建gulp.task('jshint', function () {gulp.src('/src/modules/Suspension/scripts/*.js ').pipe(jshint()).pipe(jshint.reporter());  // 对代码进行报错提示
    });//可以定义一个自定义错误（引入map-stream模块）提示：var mapstream = require( 'map-stream' );/* file.jshint.success = true; // or false 代码检查是否成功file.jshint.errorCount = 0; // 错误的数量file.jshint.results = []; // 错误的结果集file.jshint.data = []; // JSHint返回关于隐含的全局变量、圈复杂度等的详细信息 file.jshint.opt = {}; //将选择的选项传递给JSHint*/var myReporter = map(function (file, cb) {if (!file.jshint.success) {console.log('[ '+file.jshint.errorCount+' errors in ]'+file.path);file.jshint.results.forEach(function (err) {/*err.line 错误所在的行号err.col  错误所在的列号err.message/err.reason 错误信息*/if (err) {console.log(' '+file.path + ': line ' + err.line + ', col ' + err.character + ', code ' + err.code + ', ' + err.reason);}});}cb(null, file);});gulp.task('jshint', function() {return gulp.src('dist/ modules/Suspension/scripts /*.js')  // 指定目录下所有的js文件.pipe(jshint())     // js代码检查.pipe(myReporter);  // 若有错误，则调用myReporter进行提示
    });　　也可以定一个执行函数，在代码检查完毕后，自动执行合并和压缩。

  4.8 重命名　　gulp-rename

    //加载方式：var gulp = require('gulp'),rename = require('gulp-rename'),uglify = require("gulp-uglify");//或者：
    plugins. renameplugins. uglify// rename插件使用任务gulp.task('rename', function () {gulp.src('dist/ modules/Suspension/scripts/all.js').pipe(uglify())  //JS文件压缩.pipe(rename(‘all.min.js’))      //将all.js重命名为all.min.js，便于自己识别.pipe(gulp.dest('dist/ modules/Suspension/scripts'));});

  4.9 自动刷新　　gulp-livereload

    //加载方式：var gulp = require('gulp'),less = require('gulp-less'),livereload = require('gulp-livereload');//或者：
    plugins. lessplugins. 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']);});