使用Gulp壓縮混淆JS的相關配置

1、把npm 更新到最新版本

npm install -g npm

2、把npm源切換到taobao源
　　全局安裝nrm：npm install -g nrm 
　　查看正在使用的源：nrm ls
　　添加源，例如：nrm add taobao https://registry.npm.taobao.org
　　刪除源，例如：nrm del taobao
　　使用源：例如：nrm use taobao
　　測試源的速度：nrm test
3、全局安裝gulp

npm install --global gulp

3、在文件根目錄初始化npm,出現package.json

npm init -y

4、安裝依賴

npm install gulp --save-dev

5、在根目錄下面新建gulpfile.js文件，並配置

var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認的任務代碼放在這
});

6、安裝關於gulp的依賴

npm install gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

7、編輯gulpfile.js，如下：

var gulp=require('gulp'), //gulp基礎庫
minifycss=require('gulp-minify-css'), //css壓縮
concat=require('gulp-concat'), //合並文件
uglify=require('gulp-uglify'), //js壓縮
rename=require('gulp-rename'), //文件重命名
notify=require('gulp-notify'); //提示

gulp.task("minjs", function () { //minjs為任務名
return gulp.src("./dest/*.js")    //需要壓縮的文件目錄
.pipe(uglify())    //壓縮混淆，此依賴需要引入
.pipe(gulp.dest("./out"))    //輸出壓縮混淆后的目錄
});

 

8、全局安裝babel-cli

npm install --global babel-cli

9、安裝babel依賴插件

npm install babel-preset-es2015 --save-dev

10、在根目錄新建.babelrc文件，並編輯

{
"presets" : ["es2015"]
}

11、修改命令

"build":"babel j -d dest", //ES6 轉 ES5 並輸出到文件夾 dest
"minjs":"gulp minjs" //壓縮混淆命令

12、運行命令(順序不要變，先把ES6轉化問ES5，然后開始壓縮混淆，uglify不支持ES6壓縮混淆，會報錯)

npm run build
npm run minjs

13、為了方便執行，可以把命令編寫成shell命令來使用git bash執行
在項目根目錄新建文件tools.sh
編輯tools.sh

echo "准備，開始執行了"
npm run build && npm run minjs

保存
使用git bash把當前目錄切到項目根目錄，執行 ./tools.sh 就可以了