压缩CSS
插件名: gulp-clean-css
1
| npm install gulp-clean-css --save-dev
|
用法如下:
1 2 3 4 5 6
| var cleanCSS = require('gulp-clean-css'); gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('./public')); });
|
压缩javascript
插件名: gulp-uglify-es
1
| npm install gulp-uglify-es --save-dev
|
用法如下:
1 2 3 4 5 6
| 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
1 2
| npm install gulp-htmlclean --save-dev npm install gulp-htmlmin --save-dev
|
用法如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| 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, collapseWhitespace: true, collapseBooleanAttributes: true, removeEmptyAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, minifyJS: true, minifyCSS: true, minifyURLs: true })) .pipe(gulp.dest('./public')) });
|
合并JS文件
插件名: gulp-concat
1
| npm install gulp-concat --save-dev
|
用法如下:
1 2 3 4 5 6 7 8
| var concat = require('gulp-concat'); gulp.task('concat', function() { return gulp.src(['./public/js/A.js', './public/js/B.js']) .pipe(concat('concat.js')) .pipe(uglify()) .pipe(gulp.dest('./public/js')) });
|
混淆JS代码
插件名: gulp-javascript-obfuscator
1
| npm install gulp-javascript-obfuscator --save-dev
|
用法如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| var javascriptObfuscator = require("gulp-javascript-obfuscator"); gulp.task("obfuscator", function (cb) { gulp.src(["./public/js/test.js"]) .pipe(javascriptObfuscator({ compact: true, mangle: true, rotateStringArray: true, selfDefending: true, stringArray: true, target: "browser" })) .pipe(gulp.dest("./public/js/obfuscator") .on("end", cb)); });
|
压缩图片
以下提供3种压缩图片的方法,分别是pngquant
,tinypng
, smushit
,
根据压缩质量效果任选其一即可。
pngquant
插件名: gulp-imagemin,imagemin-pngquant
1 2
| npm install gulp-imagemin --save-dev npm install imagemin-pngquan --save-dev
|
用法如下:
1 2 3 4 5 6 7 8 9 10
| 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
1
| npm install gulp-tinypng-nokey --save-dev
|
用法如下:
1 2 3 4 5 6
| 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
1
| npm install gulp-smushit --save-dev
|
用法如下:
1 2 3 4 5 6 7 8
| var smushit = require('gulp-smushit'); gulp.task('smushit', function () { return gulp.src('./images/*.*') .pipe(smushit({ verbose: true })) .pipe(gulp.dest('dist/smushit')) });
|