如何gulp壓縮,醜化程式碼

StephenWu5發表於2019-02-16

為什麼使用

最近在迭代公司的專案,發現專案有如下缺點:

  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了，不是挺好的嗎，嘿嘿。

相關文章