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