ionic工程發(fā)布之前的最后一步，即代碼壓縮（獲取更好的性能）以及代碼混淆（以免源碼被有心者輕易獲嚷呈弧）俱两。包括以下步驟：
（cordova hook）檢查javascript：這一步需要在代碼壓縮和代碼混淆之前進(jìn)行以保證javascript代碼無(wú)錯(cuò)誤
（gulp task）將html頁(yè)面代碼轉(zhuǎn)換為angular的JS代碼：這一步起到了混淆html頁(yè)面代碼的作用
（gulp task）啟用angular嚴(yán)格依賴注入：這一步需要在代碼混淆之前進(jìn)行以保證angular的依賴注入沒(méi)有問(wèn)題
（gulp task）組合js代碼以及組合css代碼：這一步起到了混淆js代碼以及css代碼的作用
（cordova hook）代碼丑化、壓縮痛侍、混淆：最后一步 -
為完成上述任務(wù)朝氓，我們需要同時(shí)使用gulp tasks以及cordova hooks魔市。當(dāng)執(zhí)行ionic serve時(shí)，gulp tasks會(huì)被執(zhí)行赵哲。當(dāng)執(zhí)行ionic buildAndroid/iOS或ionic run android/ios時(shí)待德，cordova hooks會(huì)被執(zhí)行。
首先注意枫夺，本文說(shuō)明的工程目錄結(jié)構(gòu)如下将宪，讀者需要根據(jù)不同的工程進(jìn)行路徑修改
檢查javascript
1.這一步需要用到j(luò)shint以及async，可以使用npm安裝：
$ npm install jshint --save-dev
$ npm install async --save-dev
2.復(fù)制cordova hooks文件：
將此文件下載橡庞，并復(fù)制到$PROJECT_DIR/hooks/before_prepare文件夾里较坛。特別注意需要給予此文件“可執(zhí)行”的權(quán)限，即
$ chmod +x file_name
注意：此文件負(fù)責(zé)檢測(cè)$PROJECT_DIR/www/js/目錄下的js文件是否有誤扒最，請(qǐng)根據(jù)自己工程的實(shí)際情況對(duì)此文件進(jìn)行修改:
如我的工程中有2個(gè)存放js文件的路徑：$PROJECT_DIR/www/js目錄和$PROJECT_DIR/www/patchjs目錄丑勤，則我需要對(duì)上述文件進(jìn)行如下修改：
varfoldersToProcess = ['js'];
替換為：
varfoldersToProcess = ['js','patchjs'];
終端執(zhí)行：
$ ionic build android/ios
若成功，則可在終端輸出中看到工程中js文件是否有錯(cuò)誤吧趣，并指出錯(cuò)誤/警告的行法竞、列數(shù)以及錯(cuò)誤/警告的原因:
檢查無(wú)誤
將html頁(yè)面代碼轉(zhuǎn)換為angular的JS代碼
這一步對(duì)html頁(yè)面代碼的混淆是將html頁(yè)面代碼處理成angular的js代碼（保存到一個(gè)js文件中）。
1.這一步需要用到gulp-angular-templatecache强挫〔戆裕可以使用npm安裝：
npm install gulp-angular-templatecache --save-dev
vartemplateCache =require('gulp-angular-templatecache');
varpaths = {? ? sass: ['./scss/**/*.scss'],? ? templatecache: ['./www/templates/**/*.html']};
gulp.task('templatecache',function(done){gulp.src('./www/templates/**/*.html')? ? ? .pipe(templateCache({standalone:true}))? ? ? .pipe(gulp.dest('./www/js'))? ? ? .on('end', done);});
gulp.task('default', ['sass','templatecache']);
gulp.task('watch',function(){gulp.watch(paths.sass, ['sass']);? gulp.watch(paths.templatecache, ['templatecache']);});
"gulpStartupTasks": ["sass","templatecache","watch"]
angular.module('starter', ['ionic','starter.controllers','templates'])
5.在index.html中引入templates.js文件：
注意：這里的templates.js文件是下一步生成的。
$ ionic serve
或者
$ gulp templatecache
執(zhí)行完畢俯渤，在$PROJECT_DIR/www/js目錄下將生成templates.js文件呆细，此文件中將包含對(duì)html頁(yè)面代碼的轉(zhuǎn)換結(jié)果。
打開$PROJECT_DIR/www/js/templates.js文件稠诲，我們可以看到類似于下面的代碼：
$templateCache.put("login.html", ...
大家可以看到侦鹏，此時(shí)的login.html前面沒(méi)有templates路徑前綴，其他的html文件也是類似的臀叙，所以我們之前在js中使用templateUrl指定的html文件路徑便需要作出相應(yīng)變化—-去除templates路徑前綴:
首先略水，我們要知道哪里會(huì)使用到templateUrl屬性，可能有如下幾種情況：
1.app.js中使用$stateProvider.state()定義路由時(shí);
2.類似于$ionicPopover的控件或自定義的directives中到;
我們以情況1為例說(shuō)明修改的過(guò)程：
app.js之前可能的情況：
.state('login', {? ? url:"/",? ? templateUrl:"templates/login.html",? ? controller:'LoginCtrl'});
修改之后則為：
.state('login', {? ? url:"/",? ? templateUrl:"login.html",? ? controller:'LoginCtrl'});
其他的也類似地進(jìn)行修改劝萤。
啟用angular ng-strict-di
在我們進(jìn)行代碼壓縮之前渊涝，我們需要啟用angular的ng-strict-di，即嚴(yán)格依賴注入床嫌，使用ng-strict-di使得工程中依賴注入不會(huì)有問(wèn)題跨释，更多關(guān)于ng-strict-di可以看這里。
1.首先通過(guò)npm安裝gulp-ng-annotate：
$ npm install gulp-ng-annotate --save-dev
varngAnnotate =require('gulp-ng-annotate');
varpaths = {? ? sass: ['./scss/**/*.scss'],? ? ? templatecache: ['./www/templates/**/*.html'],? ? ? ng_annotate: ['./www/js/*.js']};
gulp.task('ng_annotate',function(done){gulp.src('./www/js/*.js')? ? ? .pipe(ngAnnotate({single_quotes:true}))? ? ? .pipe(gulp.dest('./www/dist/dist_js/app'))? ? ? .on('end', done);});
gulp.task('default', ['sass','templatecache','ng_annotate']);
gulp.task('watch',function(){gulp.watch(paths.sass, ['sass']);? ? gulp.watch(paths.templatecache, ['templatecache']);? ? gulp.watch(paths.ng_annotate, ['ng_annotate']);});
"gulpStartupTasks": ["sass","templatecache","ng_annotate","watch"]
5.在ng-app標(biāo)簽下加入directive:ng-strict-di：
$ ionic serve
或
$ gulp ng_annotate
上面的執(zhí)行過(guò)程將會(huì)生成$PROJECT_DIR/www/dist/dist_js/app文件夾鳖谈，并且其中包含了嚴(yán)格符合注入標(biāo)準(zhǔn)的工程js文件。
合并js文件以及css文件
$ npm install gulp-useref --save-dev
varuseref =require('gulp-useref');
varpaths = {? ? sass: ['./scss/**/*.scss'],? ? ? templatecache: ['./www/templates/**/*.html'],? ? ? ng_annotate: ['./www/js/*.js'],? ? ? useref: ['./www/*.html']};
gulp.task('useref',function(done){varassets = useref.assets();? ? gulp.src('./www/*.html')? ? ? .pipe(assets)? ? ? .pipe(assets.restore())? ? ? .pipe(useref())? ? ? .pipe(gulp.dest('./www/dist'))? ? ? .on('end', done);? });
gulp.task('default', ['sass','templatecache','ng_annotate','useref']);
gulp.task('watch',function(){gulp.watch(paths.sass, ['sass']);? ? gulp.watch(paths.templatecache, ['templatecache']);? ? gulp.watch(paths.ng_annotate, ['ng_annotate']);? ? gulp.watch(paths.useref, ['useref']);? });
"gulpStartupTasks": ["sass","templatecache","ng_annotate","useref","watch"]
4.修改index.html文件缆娃，對(duì)需要合并的js文件和css文件進(jìn)行處理：
注意：可能有些外部的css文件或js文件不想被處理捷绒，那么就保持原狀即可。
$ ionic serve
或
$ gulp useref
上面的執(zhí)行過(guò)程會(huì)生成以下文件：
$PROJECT_DIR/www/dist/index.html
$PROJECT_DIR/www/dist/dist_css/styles.css
$PROJECT_DIR/www/dist/dist_js/app.js
其中后面2個(gè)文件贯要，即是被合并過(guò)后的文件暖侨。
注意：新版本的gulp-useref沒(méi)有assets()方法，所以可能會(huì)出現(xiàn)錯(cuò)誤崇渗，大家可以用gulp-useref的2.1.0版本字逗，即第一步安裝時(shí)使用：
$ npm install gulp-useref@2.1.0--save-dev
最后一步
$ npm install cordova-uglify --save-dev
$ npm instal mv --save-dev
將這些文件添加至$PROJECT_DIR/hooks/after_prepare文件夾中。并且要注意這些文件中的有關(guān)路徑的操作宅广，是對(duì)應(yīng)于前幾步中的路徑的葫掉，如果工程結(jié)構(gòu)不一樣，請(qǐng)自行調(diào)整這些文件中有關(guān)路徑的部分乘碑。特別注意需要給予此文件“可執(zhí)行”的權(quán)限挖息，即
$ chmod +x file_name
1
1
現(xiàn)在，我們就可以生成處理完成的文件了：
$ ionic build android/ios
