使用gulp-uglify压缩javascript文件,可以减小文件大小。有时需要完全压缩去除全部注释,有时则需要保留部分,具体如下详述:
1.安装gulp-uglify
gith地址:GitHub - terinjokes/gulp-uglify: Minify files with UglifyJS
2.基本使用
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('uglifyJs', function(){
gulp.src('assets/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
3.常用参数
gulp.task('uglifyJs', function(){
gulp.src('assets/js/*.js')
.pipe(uglify({
mangle: true, //类型:Boolean 默认:true, 是否修改变量名
compress: true, //类型:Boolean 默认:true, 是否完全压缩
}))
.pipe(gulp.dest('dist/js'));
});
4.去除全部注释
gulp.task('uglifyJs', function(){
gulp.src('assets/js/*.js')
.pipe(uglify({
output: {
comments: true, //类型:Boolean 默认:true, 是否保留注释
}
}))
.pipe(gulp.dest('dist/js'));
});
5.通过indexOf判断保留部分注释
gulp.task('uglifyJs', function(){
gulp.src('assets/js/*.js')
.pipe(uglify({
output: {
comments: function(node, comment){
//含有@date字符 部分的注释进行保留
return comment.value.indexOf("@date")>=0;
}
}
}))
.pipe(gulp.dest('dist/js'));
});
//例如:
/**
* @date 2020-12-30
* 描述内容...
*/
6.通过正则判断保留部分注释
gulp.task('uglifyJs', function(){
gulp.src('assets/js/*.js')
.pipe(uglify({
output: {
comments: function(node, comment){
//以!号开头 部分的注释进行保留
return /^!/.test(comment.value);
}
}
}))
.pipe(gulp.dest('dist/js'));
});
//例如:
/*!
* 描述内容...
*/
7.统一添加公共注释
gulp.task('uglifyJs', function(){
gulp.src('assets/js/*.js')
.pipe(uglify({
output: {
preamble: "/** \r\n 版本所有 \r\n 填写日期 \r\n 填写作者信息 */"
}
}))
.pipe(gulp.dest('dist/js'));
});