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)格依賴(lài)注入：這一步需要在代碼混淆之前進(jìn)行以保證angular的依賴(lài)注入沒(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'];

3.測(cè)試：

終端執(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?？梢允褂胣pm安裝：

npm install gulp-angular-templatecache --save-dev

2.修改gulpfile.js文件：

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']);});

3.修改ionic.project文件：

"gulpStartupTasks": ["sass","templatecache","watch"]

4.在app.js中增加templates模塊依賴(lài)：

angular.module('starter', ['ionic','starter.controllers','templates'])

5.在index.html中引入templates.js文件：

注意：這里的templates.js文件是下一步生成的。

6.測(cè)試：

$ ionic serve

或者

$ gulp templatecache

執(zhí)行完畢，在$PROJECT_DIR/www/js目錄下將生成templates.js文件，此文件中將包含對(duì)html頁(yè)面代碼的轉(zhuǎn)換結(jié)果。

7.改變templateUrl路徑：

打開(kāi)$PROJECT_DIR/www/js/templates.js文件，我們可以看到類(lèi)似于下面的代碼：

$templateCache.put("login.html", ...

大家可以看到，此時(shí)的login.html前面沒(méi)有templates路徑前綴，其他的html文件也是類(lèi)似的，所以我們之前在js中使用templateUrl指定的html文件路徑便需要作出相應(yīng)變化—-去除templates路徑前綴:

首先，我們要知道哪里會(huì)使用到templateUrl屬性，可能有如下幾種情況：

1.app.js中使用$stateProvider.state()定義路由時(shí);

2.類(lèi)似于$ionicPopover的控件或自定義的directives中到;

我們以情況1為例說(shuō)明修改的過(guò)程：

app.js之前可能的情況：

.state('login', {? ? url:"/",? ? templateUrl:"templates/login.html",? ? controller:'LoginCtrl'});

修改之后則為：

.state('login', {? ? url:"/",? ? templateUrl:"login.html",? ? controller:'LoginCtrl'});

其他的也類(lèi)似地進(jìn)行修改。

啟用angular ng-strict-di

在我們進(jìn)行代碼壓縮之前，我們需要啟用angular的ng-strict-di，即嚴(yán)格依賴(lài)注入，使用ng-strict-di使得工程中依賴(lài)注入不會(huì)有問(wèn)題，更多關(guān)于ng-strict-di可以看這里。

1.首先通過(guò)npm安裝gulp-ng-annotate：

$ npm install gulp-ng-annotate --save-dev

2.其次，修改gulpfile.js文件：

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']);});

3.修改ionic.project文件：

"gulpStartupTasks": ["sass","templatecache","ng_annotate","watch"]

4.重新定位index.html里js的文件：

5.在ng-app標(biāo)簽下加入directive:ng-strict-di：

6.測(cè)試

$ ionic serve

或

$ gulp ng_annotate

上面的執(zhí)行過(guò)程將會(huì)生成$PROJECT_DIR/www/dist/dist_js/app文件夾，并且其中包含了嚴(yán)格符合注入標(biāo)準(zhǔn)的工程js文件。

合并js文件以及css文件

1.通過(guò)npm安裝gulp-useref：

$ npm install gulp-useref --save-dev

2.其次，修改gulpfile.js文件：

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']);? });

3.修改ionic.project文件：

"gulpStartupTasks": ["sass","templatecache","ng_annotate","useref","watch"]

4.修改index.html文件，對(duì)需要合并的js文件和css文件進(jìn)行處理：

注意：可能有些外部的css文件或js文件不想被處理，那么就保持原狀即可。

5.測(cè)試

$ 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

最后一步

1.使用npm安裝cordova-uglify以及mv：

$ npm install cordova-uglify --save-dev

$ npm instal mv --save-dev

2.復(fù)制cordova hooks文件：

將這些文件添加至$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