怎样gulp紧缩,丑化代码

为何应用

最近在迭代公司的项目,发明项目有以下瑕玷:

  1. 代码没有紧缩,js文件,内存大,放在服务器上占空间;
  2. 源代码没有殽杂或许丑化处置惩罚,本公司的程序员写出来的代码和高质量逻辑随意马虎被其他公司的程序员盗用;
  3. js,css 文件数目多,浏览器加载起来会“惊慌失措”和“生机”。

这个小项目应用gulp构建东西写的,所以很天然用gulp下的一系列插件来完成。个中用到的插件有:gulp-concat整合数目大的文件为一个文件,gulp-uglify丑化代码,不让他人随意马虎获得你的源码,gulp-uglify重新命名文件名称等等

完成

运转cnpm i gulp-concat gulp-uglify gulp-rename --save-dev 装置这三个包 --save-dev的意义就是在开辟环境;

这几个插件应用起来还好,随意马虎,比较迂回一点的就是gulp-uglify: 我一开始是上npm官网装置了一个最新版的uglify但是没有用,我百度,谷歌折腾了一会,同事和我说vue-cli项目就有这个gulp功用,让我去参考怎样应用。原来是uglify的版本不一样,我把版本从最新版降级到2.0.0就能够了。

"gulp-uglify": "^2.0.0",

个中应用代码以下:(js部份)

//丑化js代码
gulp.task('compress', function () {
    gulp.src('./src/oldJs/*.js')    //注重途径的写法
        .pipe(concat('main.js'))    //兼并一切js到main.js
        .pipe(rename({suffix: '.min'}))   //rename紧缩后的文件名
        .pipe(uglify({              //丑化js代码,相称加密
            sourceMap: false,
            compress: {
                warnings: false,
                drop_console: true,
                drop_debugger: true,
            },
            mangle: {except: ['$super', '$', 'exports', 'require','avalon']} //消除关键字
        }))
        .pipe(gulp.dest('./src/js'));  //注重途径的写法
});
//😀😀😀😀😀😀

个中源文件夹和输出文件夹的途径要看详细项目而言。

末了,应用这个知识点,你会发明代码简约,内存变小,js文件的数目也控制在1了,不是挺好的吗,嘿嘿。

    原文作者:StephenWu5
    原文地址: https://segmentfault.com/a/1190000017435347
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞