gulp常用插件汇总

压缩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'})) //兼容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,//清除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

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']) //数组里存放需要合并的多个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"]) //准备混淆的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

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'))
});
文章作者: Shawn
文章链接: https://www.shawnlin.cn/e454f5ae/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Shawn's Blog
打赏
  • 微信
  • 支付宝

评论