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