首页手记 Gulp笔记！Gulp笔记！

Gulp笔记！Gulp笔记！

标签：

JavaScript CSS3 深度学习

Gulp笔记

http://www.cnblogs.com/2050/p/4198792.html

前期

npm init // 生成package.json
npm install -g gulp // 先在全局安装gulp
npm install gulp // 再在项目中安装gulp，如果想把依赖写进package.json，加上--save-dev

通常都是这样操作，至于为什么，可能是为了版本的灵活性

原理

gulp中使用的是node的stream（流），是以stream为媒介

先读取需要的stream，通过stream的pipe()方法导入到想要的地方，比如插件等，经过插件处理过的流可以继续导入到其他地方，包括写入到文件中

流程

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

使用

gulpfile.js

匹配规则

*             // 0个或多个字符，可匹配a.js、a/，但是不能a/b.js
**            // 0个或多个目录、子目录，若末尾也可以匹配文件，可匹配a/b/c、a/b/c/d.js
?             // 匹配一个字符，不会匹配路径分隔符
[...]         // 括号内任意一个字符，注意也是只匹配一个字符而已
!(p1|p2|p3)   // 匹配任何与括号中给定的任一模式都不匹配的，传说中的“排除模式”
?(p1|p2|p3)   // 匹配括号中给定的任一模式0次或1次
+(p1|p2|p3)   // 匹配括号中给定的任一模式至少1次
*(p1|p2|p3)   // 匹配括号中给定的任一模式0次或多次
@(p1|p2|p3)   // 匹配括号中给定的任一模式1次

API

gulp.src

  获取流，即读取我们要操作的文件

  gulp.src(globs[, options])    // globs为文件匹配模式，匹配文件路径，多个匹配模式时可用数组，options一般用不到

gulp.dest

  写文件

  gulp.dest(path[,options])     // path为写入文件的路径，options一般用不到

  注意点：传入的路径只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，生成的文件名是由导入到它的文件流决定的

  关键点：（理解传入的路径参数与最终生成的文件的关系）

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

    也可以这样理解，是gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终得到生成文件的路径

    // 情况一、gulp.src没配置base参数
    gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib
        //假设匹配到的文件为script/lib/jquery.js    /**/
        .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

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

gulp.task

  定义任务

  gulp.task(name[, deps], fn)   // name任务名  deps依赖其他任务的数组   fn任务函数

  关键点：

    1. 如果执行多个任务时，如何控制执行顺序

      定义一个空的任务，将要执行的多个任务当作依赖

      //只要执行default任务，就相当于把one,two,three这三个任务执行了
      gulp.task('default',['one','two','three']);

      注意：

        若任务间无依赖，则会按照书写的顺序执行

        若依赖的任务是异步操作，gulp并不会等待这个依赖的异步操作完成，而是会继续执行后续任务

    2. 如果我们想要等依赖的异步操作完成后才继续执行，该如何做？（有3种方法）

      i. 在异步操作完成后执行一个回调函数来通知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');
        });

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

      iii. 返回一个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.watch

  监视变化，我们可以在监视到变化后做一些操作

  gulp.watch(glob[, opts], tasks) // glob监视的文件匹配模式  opts配置对象（一般不用）  tasks文件变化后要执行的任务（数组）

  gulp.watch(glob[, opts, fn]) // glob和opts同上  fn表示文件变化后要做的操作（函数 event对象 event.type变化的类型 event.path变化文件的路径 ）

gulp插件

自动加载

gulp-load-plugins

var gulp = require('gulp');   //加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')(); // 这样如果需要使用gulp-rename插件，则plugins.rename

注意插件需在 package.json 中写好并安装好

重命名