最近接到一个需求,对一个老项目的文件做优化,干掉注释和log,压缩代码,项目是原生JS项目,用的AMD模块,由于对gulp熟一点,而且gulp打包项目简单,就选用了gulp
第一步.对js,css,html文件做压缩处理,分别引用gulp-uglify,gulp-clean-css,gulp-htmlmin。运行打包命令后提示报错但无法查看具体报错信息,引用gulp-util后发现是部分js页面已经是压缩后的了,无法压缩,因此在gulp.src([])内对后缀名为min.js的文件做忽略处理,但是这些被忽略的文件手动ctrl C,ctrl V又麻烦,故在每次打包前把文件都复制到dist文件再打包做覆盖处理。
第二步.项目打包后运行发现页面空白无报错,经过排查发现是require变量名被压缩更换导致引用文件无效引起的,百度查资料发现可以用gulp-uglify内置的except属性对包含指定词的文件做排除混淆处理,
// mangle: {
// except: ['require', 'exports', 'module', '$']//排除混淆关键字
// },
敲好代码运行后发现报错,DefaultsError: except
is not a supported option。在查阅github和百度无果后,使用google查询发现gulp-uglify3.0以后的版本就不支持except属性了,而是改用了reserved,原文链接在这里:
https://stackoverflow.com/questions/31694685/mangle-all-variables-except-one-with-gulp-uglify
尝试后发现依然无效!!!没办法,开始尝试降低gulp-uglify版本,使用except试试,打包后发现except是把包含指定关键字的文件都不做处理了,这样依然不符合需求,因为基本上所有js文件都是通过require引用,如果不做处理里面的注释和log依然在,继续查阅资料,一个属性引入眼帘, mangle: false这个属性可以不改变变量名,满怀期待的打包后,去你大爷的,require还是被改变了,不行,继续查,,终于发现一个属性, compress: false 这个属性可以不完全打包文件,使用后发现require正常了!!!没有被改变,感谢cctv
附上js打包的代码:
function json(cb) {
gulp.src(['./**/*.js','!./test','!./**/*.min.js'])
.pipe(uglify({
mangle: false,
//mangle: {reserved: ['exports', 'module', 'require' , '$'] },
// mangle: {
// except: ['require', 'exports', 'module', '$']//排除混淆关键字
// },
compress: false, //完全压缩,默认true
output: {
comments: false //类型:Boolean 默认:true, 是否保留注释
},
// compress: {
// drop_console: true // 过滤 console
// }
}))
.on('error', function (err) {
gutil.log(gutil.colors.red('[Error]'), err.toString());
})
.pipe(gulp.dest('test'))
cb();
}