gulpjs学习笔记

1.gulp的安装

---

1.1. 在gulp安装前,请确保正确安装了node.js的环境。然后再全局安装gulp

     npm install -g gulp

1.2. 完成gulp的全局安装之后，还需要在每个使用gulp的项目中单独的安装一次，如果需要将gulp添加到package.json文件的依赖中，则需要在后面添加--save-dev

     npm install --save-dev gulp

2.gulp的使用

---

2.1 新建gulpfile.js文件    gulp.js的运行需要一个主文件，主文件的文件名为gulpfile.js(注：文件名不能改变),然后我们就可以在gulpfile.js文件中定义我们的gulp任务了，一个简单的gulp任务如下：

    var gulp = require("gulp");        gulp.task("default",funciton(){            console.log("hello gulp!!!");        })

2.2 运行gulp任务    打开命令行，将目录切换到gulpfile.js 所在的目录，在命令行中运行 gulp, gulp的后面也可以跟任务名，如gulp taskName。如果任务名为default，则可以省略，如本例，直接运行gulp即可。

3.gulp的API

---

gulp的工作流程：gulp是基于Nodejs中的stream(流)工作的，首先获取到需要gulp进行处理的文件流(使用gulp.src()),然后通过stream的pipe()方法导入到需要处理的地方，例如合并文件的插件中， 经过插件处理后的流又可以通过pipe继续导入到其他的插件中，如压缩文件的插件，也可以将流写入到文件中(使用gulp.dest())

3.1 gulp.src()

---

    作用：用来获取流，注意这里的流里面的内容并不是原始的文件流，而是一个虚拟的文件对象流，这个虚拟的文件对象流中储存着原始文件的文件名，路径和内容等信息。    语法：gulp.src(globs[,options]);    globs:文件的匹配模式(可以通过一定的规则来匹配文件的路径)，可以直接理解为需要进行处理的文件的路径。如果包含多个匹配模式时，该参数可以是一个数组    options:可选参数，通常不需要用到    ?   匹配一个字符，但不匹配/    *   匹配0个或多个字符，但不能匹配/，若/出现在末尾则除外。例：能匹配index.html,src/;但不能匹配src/index.html    **  匹配0个或者多个目录，但需要单独出现，但需要作为单独的一级目录出现，即左右除了/外，不能有其他的字符。例：能匹配index.html,src/index.html,object/src/index.html    []  匹配方括号中出现的任意一个字符，若方括号中的内容以^或!开头，则表示不匹配方括号中出现的任意一个字符。例[abc].js能匹配a.js,b.js,c.js,但不匹配ab.js,abc.js等;[^abc].js匹配除a.js,b.js,c.js外的其他js文件;    !(pattern|pattern|pattern)  匹配除括号中任意一种模式以外的其他模式    @(pattern|pattern|pattern)  匹配括号中给定的任意模式一次    ?(pattern|pattern|pattern)  匹配括号中给定的模式0次或1次    *(pattern|pattern|pattern)  匹配括号中给定的模式0次或多次    +(pattern|pattern|pattern)  匹配括号中给定的模式至少一次    a{b,c}d     匹配abc,acd    a{b,}c      匹配abc,ac    a{0..2}c    匹配a0c,a1c,a2c

3.2 gulp.dest()

---

    作用：用来将文件流写入文件的    语法：gulp.dest(path[,options])    path: 为写入文件的路径;    注：使用gulp.dest()时，传入的路径参数,只能够用来指定要生成的文件的路径，并不能指定文件名。生成的文件的文件名是导入文件的文件名。例如：

     gulp.src("a/b.js")         .pipe(gulp.dest("c/d.js"))         //最终生成的文件的路径为c/d.js/b.js,并不是c/d.js;

    可以使用gulp-rename插件来更改文件名。    注：gulp.dest(path)生成的文件路径是path参数的路径再加上gulp.src()中有通配符开始出现的那部分路径；如

     gulp.src("src/**/jquery.js")     //有通配符开始出现的那部分路径为**/jquery.js          .pipe(gulp.dest("dist"));          //最后生成的路径dist/**/jquery.js          /*若通过gulp.src("src/**/jquery.js")中的匹配模式匹配到的路径为"src/lib/jquery.js",则最后生成的路径为"dist/lib/jquery.js"*/

    我们可以通过配置gulp.src()方法中的base参数，来改变gulp.dest()生成的文件路径    但不配置base参数时，base参数默认为通配符开始出现之前的那部分文件路径，如上例中的src    其实，通过gulp.dest(path)生成的文件的路径就是用path替换gulp.src()中的base后，得到的文件路径。

    gulp.src("src/lib/**/jquery.js",{base:"src"})            .pipe(gulp.dest("dist"));            /*若通过gulp.src("src/lib/**/jquery.js")中的匹配模式匹配到的路径为"src/lib/script/jquery.js",则最后生成的路径为"dist/lib/script/jquery.js",而不再是dist/script/jquery.js*/

    通过gulp.dest()将文件流写入文件后，文件流仍然可以继续使用

3.3 gulp.task()

---

    作用：用来定义一个gulp的任务    语法：gulp(name[,deps],fn)    name: 任务名   若为"default"时，则可以直接通过gulp命令执行，不需要gulp taskName    deps: 可选。定义当前任务需要依赖的其他任务，为一个数组。若定义这个参数，这需要等待依赖任务都执行完毕后，当前任务才会执行    fn: 可选，即当前任务需要执行的函数。    gulp.task('default',['task1','task2','task3']);    //运行gulp命令，就相当于执行了task1,task2,task3这三个任务    //如果task1,task2,task3任务之间没有依赖关系，则会按照书写的顺序来执行。如果存在依赖关系，则会按照依赖关系来先后执行，但是如果依赖的任务中包含有异步操作，并不会等待异步操作执行完成后才执行当前任务，如

     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');        });

    若需要等待异步任务中的异步操作完成后再执行后续的任务，有如下三种方法实现：    1.可在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。    gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成

        //one是一个异步执行的任务             setTimeout(function(){            console.log('one is done');            cb();  //执行回调，表示这个异步任务已经完成            },1000);        });        //这时two任务会在one任务中的异步操作完成后再执行        gulp.task('two',['one'],function(){            console.log('two is done');        });

    2. 定义任务时返回一个流对象。适用于任务就是操作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');        });

    3. 返回一个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');            });

3.4 gulp.watch()

---

作用：用来监视文件的变化;语法：gulp.watch(glob[, opts], tasks);glob    需要监控的文件匹配模式，规则同gulp.src()中的globtasks   文件变化后执行的任务，为一个数组；例：gulp.watch("src/**",[task1,task2])//当文件发生变化后，执行task1，task2任务也可以传入一个回调函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径

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

注：个人gulp学习笔记，参考博客：http://www.cnblogs.com/2050/p/4198792.html