gulpfile筆記

gulp的使用流程：
首先經過gulp.src()方法獲取到咱們想要處理的文件流，而後把文件流經過pipe方法導入到gulp的插件中，最後把通過插件處理後的流再經過pipe方法導入到gulp.dest()中

一、gulp.task(name[,desp], fn);
    name: 執行的任務名
    desp: 任務執行須要依賴的任務
    PS：若是依賴的任務是異步操做的話，那麼就不會等待依賴的任務執行完再去執行該任務，可是若是想要讓異步的任務執行完再去執行該任務的話，能夠經過如下三種方法：
        （1）經過一個毀掉函數，將回調函數放在異步執行操做裏面，來通知gulp這個異步操做已經完成，這個回調函數就是任務函數的第一個參數
        

   gulp.task('one',function(callback){
              //one是一個異步執行的任務
              setTimeout(function(){
                console.log('one is done');
                callback();  //執行回調，表示這個異步任務已經完成
              },5000);
            });

            //這時two任務會在one任務中的異步操做完成後再執行
            gulp.task('two',['one'],function(){
              console.log('two is done');
            });

            gulp.task("default", ["two"], function() {
                console.log("default is runing");
            });

        （2）定義任務時返回一個流對象。適用於任務就是操做gulp.src獲取到的流的狀況

 gulp.task('one',function(cb){
              var stream = gulp.src('client/**/*.js')
                  .pipe(dosomething()) //dosomething()中有某些異步操做
                  .pipe(gulp.dest('build'));
                return stream;
            });

        （3）返回一個promise對象

  //一個著名的異步處理的庫 https://github.com/kriskowal/q
            var Q = require('q');
            gulp.task('one',function(cb){
              var deferred = Q.defer();
              // 作一些異步操做
              setTimeout(function() {
                 deferred.resolve();
              }, 5000);
              return deferred.promise;
            });

二、gulp.dest(path)
    path: 文件的寫入位置，須要注意的是：只能用來指定要生成的文件目錄，不能指定生成的文件名，生成的文件名是有導入到它的文件流決定的，若是想要改變文件名的話，使用gulp-rename

三、gulp.src(globs)
    globs: 文件匹配模式，用來匹配文件路徑（包括文件名），當有多種匹配時能夠使用數組，可是使用數組的時候，若是要用排除模式（!單個匹配模式）的話，不能將要排除的放在數組的第一個。。。
   

【
        * 匹配文件路徑中的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)
    】

四、gulp.watch(glob, tasks)
    glob: 監視的文件匹配模式
    tasks: 文件變化後要執行的任務，爲一個數組

五、重命名
    好比：
    rename = require('gulp-rename'),
    pipe(rename('jquery.min.js')) //會將jquery.js重命名爲jquery.min.js

六、js文件壓縮
    好比：
    uglify = require("gulp-uglify");
    .pipe(uglify())  //使用uglify進行壓縮,更多配置請參考：

七、css文件壓縮
    好比：
     minifyCss = require("gulp-minify-css");
     .pipe(minifyCss()) //壓縮

八、html文件壓縮
    好比：
     minifyHtml = require("gulp-minify-html");
     .pipe(minifyHtml()) //壓縮

九、圖片壓縮
    好比：
        var imagemin = require('gulp-imagemin');
        var pngquant = require('imagemin-pngquant'); //png圖片壓縮插件
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant來壓縮png圖片
        }))

十、文件合併
    好比：
    concat = require("gulp-concat");
     .pipe(concat('all.js'))  // 合併匹配到的js文件並命名爲 "all.js"

十一、less和sass的編譯
    （1）sass
         sass = require("gulp-sass");
         .pipe(sass())
    （2）less
        less = require("gulp-less");
        .pipe(less())

十二、js代碼檢查
    好比：
    jshint = require("gulp-jshint");
     .pipe(jshint())
     .pipe(jshint.reporter('default'))
     // npm install --save-dev jshint-stylish
     .pipe(jshint.reporter('jshint-stylish'))

1四、自動刷新
    好比：
    browserSync = require("browser-sync").create(),
    reload = browserSync.reload; // 自動刷新
    gulp.task("browser-sync", function() {
        browserSync.init(resource.html, {
            server: {
                baseDir: ["."], //or [,,,,,],
                index: "build/index.html"
            }
        });
    });

1五、加載插件+重命名
var plugins = require("gulp-load-plugins")({
    rename: {
        "gulp-make-css-url-version": "cssver",
        "gulp-content-includer": "includer",
        "gulp-html-extend": "htmlextend",
        "gulp-minify-css": "minicss",
        "gulp-rev-append": "revap"
    }
});

1五、notify：消息提示
    .pipe(plugins.notify({ message: 'Styles task complete' }));

1六、rename：重命名
    .pipe(plugins.rename({suffix: '.min'}))

1七、changed: 編譯或打包改變過的文件
    .pipe(plugins.changed(dist, {extension: ".js"}))