如何gulp壓縮,丑化代碼

linkin 發(fā)布于2019-08-23 14:10 / 2103人閱讀

摘要：其中使用代碼如下部分丑化代碼注意路徑的寫法合并所有到壓縮后的文件名丑化代碼，相當(dāng)加密排除關(guān)鍵字注意路徑的寫法

為什么使用

最近在迭代公司的項目,發(fā)現(xiàn)項目有如下缺點(diǎn):

代碼沒有壓縮,js文件，內(nèi)存大，放在服務(wù)器上占空間；

源代碼沒有混淆或者丑化處理，本公司的程序員寫出來的代碼和高質(zhì)量邏輯容易被其他公司的程序員盜用；

js,css 文件數(shù)量多，瀏覽器加載起來會“手忙腳亂”和“生氣”。

這個小項目使用gulp構(gòu)建工具寫的，所以很自然用gulp下的一系列插件來完成。其中用到的插件有：gulp-concat整合數(shù)量大的文件為一個文件，gulp-uglify丑化代碼，不讓別人輕易得到你的源碼，gulp-uglify重新命名文件名稱等等

實現(xiàn)

運(yùn)行cnpm i gulp-concat gulp-uglify gulp-rename --save-dev 安裝這三個包 --save-dev的意思就是在開發(fā)環(huán)境；

這幾個插件使用起來還好，容易，比較曲折一點(diǎn)的就是gulp-uglify: 我一開始是上npm官網(wǎng)安裝了一個最新版的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代碼，相當(dāng)加密
            sourceMap: false,
            compress: {
                warnings: false,
                drop_console: true,
                drop_debugger: true,
            },
            mangle: {except: ["$super", "$", "exports", "require","avalon"]} //排除關(guān)鍵字
        }))
        .pipe(gulp.dest("./src/js"));  //注意路徑的寫法
});
//