gulp常用插件汇总

压缩CSS

插件名: gulp-clean-css

npm install gulp-clean-css --save-dev

用法如下:

var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
   return gulp.src('./public/**/*.css')
       .pipe(cleanCSS({compatibility: 'ie8'}))  //兼容IE8
       .pipe(gulp.dest('./public'));
});

压缩javascript

插件名: gulp-uglify-es

npm install gulp-uglify-es --save-dev

用法如下:

var uglify = require('gulp-uglify-es').default;
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

压缩HTML

插件名: gulp-htmlclean，gulp-htmlmin

npm install gulp-htmlclean --save-dev
npm install gulp-htmlmin --save-dev

用法如下:

var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
      .pipe(htmlclean())
      .pipe(htmlmin({
          removeComments: true,//清除HTML注释
          collapseWhitespace: true,//压缩 HTML
          collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /
          removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
          removeScriptTypeAttributes: true,//删除 <script> 的 type="text/javascript"
          removeStyleLinkTypeAttributes: true,//删除 <style> 和 <link> 的 type="text/css"
          minifyJS: true,//压缩页面 JS
          minifyCSS: true,//压缩页面 CSS
          minifyURLs: true
      }))
      .pipe(gulp.dest('./public'))
});

合并JS文件

插件名: gulp-concat

npm install gulp-concat --save-dev

用法如下:

var concat = require('gulp-concat');
gulp.task('concat', function() {
	return gulp.src(['./public/js/A.js', 
		'./public/js/B.js'])   //数组里存放需要合并的多个js文件,支持通配符
		.pipe(concat('concat.js'))  //生成合并文件
		.pipe(uglify())  //压缩目标文件
		.pipe(gulp.dest('./public/js'))
});

混淆JS代码

插件名: gulp-javascript-obfuscator

npm install gulp-javascript-obfuscator --save-dev

用法如下:

var javascriptObfuscator = require("gulp-javascript-obfuscator");
gulp.task("obfuscator", function (cb) {
    gulp.src(["./public/js/test.js"])  //准备混淆的JS文件
        .pipe(javascriptObfuscator({
            compact: true,
            mangle: true,
            rotateStringArray: true,
            selfDefending: true,
            stringArray: true,
            target: "browser"
        }))
        .pipe(gulp.dest("./public/js/obfuscator")  //存放混淆之后的JS路径
        .on("end", cb));
});

压缩图片

以下提供3种压缩图片的方法，分别是pngquant, tinypng, smushit,

根据压缩质量效果任选其一即可。

pngquant

插件名: gulp-imagemin，imagemin-pngquant

npm install gulp-imagemin --save-dev
npm install imagemin-pngquan --save-dev

用法如下:

var imagemin = require('gulp-imagemin')
var pngquant = require('imagemin-pngquant');
gulp.task('images', function () {
    return gulp.src('./images/*.*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant({quality: '65-80'})]
        }))
        .pipe(gulp.dest('dist/images'))
});

tinypng

插件名: gulp-tinypng-nokey

npm install gulp-tinypng-nokey --save-dev

用法如下:

var tinypng_nokey = require('gulp-tinypng-nokey');
gulp.task('tinypng', function () {
    return gulp.src('./images/*.*')
        .pipe(tinypng_nokey())
        .pipe(gulp.dest('dist/tinypng'))
});

smushit

插件名: gulp-smushit

npm install gulp-smushit --save-dev

用法如下:

var smushit = require('gulp-smushit');
gulp.task('smushit', function () {
    return  gulp.src('./images/*.*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('dist/smushit'))
});