gulp常見命令

1. gulp-htmlmin：壓縮html文件
2. gulp-imagemin：壓縮圖片
3. imagemin-pngquant：深度壓縮png圖片
4. gulp-cache：只壓縮修改的圖片
5. gulp-minify-css：壓縮CSS文件
6. gulp-make-css-url-version：給css文件引用文件加版本號(文件MD5)
7. gulp-rev-append：通過正則(?:href|src)=”(.*)[?]rev=(.*)[“]查找並給指定鏈接填加版本號（默認根據文件MD5生成，因此文件未發生改變，此版本號將不會變）
8. gulp-uglify：使用gulp-uglify壓縮javascript文件，減小文件大小
9. gulp-concat：使用gulp-concat合併javascript文件，減少網絡請求
10. gulp-autoprefixer：根據設置瀏覽器版本自動處理瀏覽器前綴。使用她我們可以很瀟灑地寫代碼，不必考慮各瀏覽器兼容前綴。【特別是開發移動端頁面時，就能充分體現它的優勢。例如兼容性不太好的flex佈局。】
11. gulp-less：
12. gulp-livereload：當監聽文件發生變化時，瀏覽器自動刷新頁面。【事實上也不全是完全刷新，例如修改css的時候，不是整個頁面刷新，而是將修改的樣式植入瀏覽器，非常方便。】特別是引用外部資源時，刷新整個頁面真是費時費力。

詳細講解以上命令：

1. gulp-htmlmin：壓縮html文件

 var gulp = require('gulp'),

htmlmin = require('gulp-htmlmin')

gulp.task('testHtmlmin',function(){

var options = {

    removeComments: true, //清除HTML註釋

    collapseWhitespace:true, //壓縮HTML

    collapseBooleanAttributes:true, //省略布爾屬性的值<input checked='true'/> ==> <input checked/>

    removeEmptyAttributes:true, //刪除所有空格作屬性的值<input id=''/> ==> <input />

    removeScriptTypeAttributes:true, //刪除<script> 的type='text/javascript'

    removeStyleLinkTypeAttributes:true, //刪除<style>和<link>的type='text/css'

    minifyJS:true, //壓縮頁面JS

    minifyCSS:true //壓縮頁面CSS

    };

    gulp.src('src/html/*.html')

    .pipe(htmlmin(options))

    .pipe(gulp.dest('dist/html'));

  });

2.gulp-imagemin：壓縮圖片

var gulp = require('gulp'),

imagemin = require('gulp-imagemin')；

gulp.task('testImagemin',function(){

gulp.src('src/img/*.{png,jpg,gif,ico}')
    .pipe(imagemin({
        optimizationLevel:5, //類型：Number 默認：3 取值範圍：0-7 (優化等級)
        progressive:true, //類型：Boolean 默認：false 無損壓縮jpg圖片

        interlaced:true, //類型：Boolean 默認：false 隔行掃描gif進行渲染

        multipass:true //類型：Boolean 默認：false 多次優化svg直到完全優化

    }))

    .pipe(gulp.dest('dist/img'));

});

3.imagemin-pngquant：深度壓縮png圖片

 var gulp = require('gulp'),

    pngquant = require('imagemin-pngquant')；

gulp.task('testImagemin',function(){

    gulp.src('src/img/*.{png,jpg,gif,ico}')

        .pipe(imagemin({

           progressive:true,

           svgoPlugins:[{removeViewBox:false}], //不要移除svg的viewbox屬性

           use:[pngquant()] //使用pangquant深度壓縮png圖片的imagemin插件

       }))

       .pipe(gulp.dest('dist/img'));

 });

4.gulp-cache：只壓縮修改的圖片

var gulp = require('gulp'),

cache = require('gulp-cache');

gulp.task('testImagemin',function(){

    gulp.src('src/img/*.{png,jpg,gif,ico}')

        .pipe(cache(imagemin({

            progressive:true,

            svgoPlugins:[{removeViewBox:false}],

            use:[pngquant()]
        })))

    .pipe(gulp.dest('dist/img'));

});

5.gulp-minify-css：壓縮CSS文件；gulp-make-css-url-version：給css文件引用文件加版本號(文件MD5)

var gulp = require('gulp'),

    cssmin = require('gulp-minify-css')；

gulp.task('testCssmin',function(){

    gulp.src('src/css/*.css')

    .pipe(cssver()) //給css文件引用文件加版本號(文件MD5)

    .pipe(cssmin({

        advanced:false, //類型：Boolean 默認：true [是否開啓高級優化(合併選擇器等)]

        compatibility:'ie7', //保留ie7及以下兼容寫法 類型：String 默認：''or '*'[啓用兼容模        式；'ie7':IE7兼容模式，'ie8':IE8兼容模式，'*':IE9+兼容模式]

        keepBreaks:true, //類型：Boolean 默認：false[是否保留換行]

        keepSpecialComments:'*' //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能會刪除你的部分前綴
    }))

    .pipe(gulp.dest('dist/css'));
});

6.gulp-rev-append：通過正則(?:href|src)=”(.*)[?]rev=(.*)[“]查找並給指定鏈接填加版本號（默認根據文件MD5生成，因此文件未發生改變，此版本號將不會變）

var gulp = require('gulp')；

var rev = require('gulp-rev-append');

gulp.task('testRev',function(){

    gulp.src('src/html/html3.html')

        .pipe(rev())

        .pipe(gulp.dest('dist/html'))

});

gulp

7.uglify：使用gulp-uglify壓縮javascript文件，減小文件大小

var gulp = require('gulp'),

    uglify = require('gulp-uglify');

gulp.task('jsmin',function(){

    gulp.src(['src/js/*.js','!dist/js/**/{test1,test2}.js'])

        .pipe(uglify({

            mangle:{toplevel:true} ,//類型：Boolean 默認：true 是否修改變量名

            compress: true, //類型：Boolean 默認：true 是否完全壓縮

            //preserveComments: 'all' //保留所有註釋 ?????

         }))

    .pipe(gulp.dest('dist/js'));
});

8.gulp-concat：使用gulp-concat合併javascript文件，減少網絡請求

 var gulp = require('gulp'),

    concat = require('gulp-concat');

gulp.task('testConcat',function(){

    gulp.src('src/js/*.js')

    .pipe(concat('all.js')) //合併後的文件名

    .pipe(gulp.dest('dist/js'));

});

 

9.gulp-autoprefixer：根據設置瀏覽器版本自動處理瀏覽器前綴。使用她我們可以很瀟灑地寫代碼，不必考慮各瀏覽器兼容前綴。【特別是開發移動端頁面時，就能充分體現它的優勢。例如兼容性不太好的flex佈局。】

var gulp = require('gulp'),

    autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx',function(){

    gulp.src('src/css/css3.css')

        .pipe(autoprefixer({

            browsers:['last 5 versions','Android >= 4.0'],

            cascade:true, //是否美化屬性值 默認：true 像這樣：

            //-webkit-transform: rotate(45deg);

            // transform: rotate(45deg);

            remove:true //是否去掉不必要的前綴 默認：true

        }))

       .pipe(gulp.dest('dist/css'));

       //gulp-autoprefixer的browsers參數詳解 （傳送門）：

     /*

    last 2 versions: 主流瀏覽器的最新兩個版本；

    last 1 Chrome versions: 谷歌瀏覽器的最新版本；

    last 2 Explorer versions: IE 的最新兩個版本；

    last 3 Safari versions: 蘋果瀏覽器最新三個版本；

    Firefox >=20: 火狐瀏覽器的版本大於或等於20；

    ios 7:IOS7版本；

    Firefox ESR: 最新ESR版本的火狐；

    > 5%:全球統計有超過5%的使用率；

    */

  //各瀏覽器的標識：

  /*

  Android: for Android WebView;

  BlackBerry or bb: for Blackberry browser;

  Chrome: for Google Chrome;

  Firefox or ff: for Mozilla Firefox;

  Explorer or ie: for Internet Explorer;

  iOS or ios_saf: for iOS Safari;

  Opera: for Opera;

  Safari: for desktop Safari;

  OperaMobile or op_mob: for Opera Mobile;

  OperaMini or op_mini: for Opera Mini;

  ChromeAndroid or and_chr;

  FirefoxAndroid or and_ff: for Firefox for Android;

  ExplorerMobile or ie_mob: for Internet Explorer Mobile.

  */

 

});

 

10gulp-less；gulp-livereload：當監聽文件發生變化時，瀏覽器自動刷新頁面。【事實上也不全是完全刷新，例如修改css的時候，不是整個頁面刷新，而是將修改的樣式植入瀏覽器，非常方便。】特別是引用外部資源時，刷新整個頁面真是費時費力。

var gulp = require('gulp'),

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

livereload = require('gulp-livereload');

gulp.task('less',function(){

    gulp.src('src/less/*.less')

    .pipe(less())

    .pipe(gulp.dest('src/css'))

    .pipe(livereload());

});