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 就可以了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/58574.html
標籤：JavaScript
上一篇：keep-Alive搭配vue-router實作快取頁面效果
下一篇：小程式相冊授權后保存圖片到相冊