压缩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'))
});
评论