关于gulp打包AMD模块代码的各种坑以及最终解决方案

最近接到一个需求,对一个老项目的文件做优化,干掉注释和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();
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值