ionic工程发布之前的最后一步，即代码压缩（获取更好的性能）以及代码混淆（以免源码被有心者轻易获取）。包括以下步骤：
（cordova hook）检查javascript：这一步需要在代码压缩和代码混淆之前进行以保证javascript代码无错误
（gulp task）将html页面代码转换为angular的JS代码：这一步起到了混淆html页面代码的作用
（gulp task）启用angular严格依赖注入：这一步需要在代码混淆之前进行以保证angular的依赖注入没有问题
（gulp task）组合js代码以及组合css代码：这一步起到了混淆js代码以及css代码的作用
（cordova hook）代码丑化、压缩、混淆：最后一步 -
首先注意，本文说明的工程目录结构如下，读者需要根据不同的工程进行路径修改
检查javascript
$ npm install jshint --save-dev
$ npm install async --save-dev
2.复制cordova hooks文件：
$ chmod +x file_name
注意：此文件负责检测目录下的js文件是否有误，请根据自己工程的实际情况对此文件进行修改:
如我的工程中有2个存放js文件的路径：目录和目录，则我需要对上述文件进行如下修改：
varfoldersToProcess = ['js'];
替换为：
varfoldersToProcess = ['js','patchjs'];
终端执行：
$ ionic build android/ios
若成功，则可在终端输出中看到工程中js文件是否有错误，并指出错误/警告的行、列数以及错误/警告的原因:
检查无误
将html页面代码转换为angular的JS代码
这一步对html页面代码的混淆是将html页面代码处理成angular的js代码（保存到一个js文件中）。
npm install gulp-angular-templatecache --save-dev
vartemplateCache =require('gulp-angular-templatecache');
varpaths = { sass: ['./scss/**/*.scss'], templatecache:
.pipe(templateCache({standalone:true})) .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'])
注意：这里的templates.js文件是下一步生成的。
$ ionic serve
或者
$ gulp templatecache
执行完毕，在目录下将生成templates.js文件，此文件中将包含对html页面代码的转换结果。
打开文件，我们可以看到类似于下面的代码：
$templateCache.put("login.html", ...
大家可以看到，此时的login.html前面没有templates路径前缀，其他的html文件也是类似的，所以我们之前在js中使用templateUrl指定的html文件路径便需要作出相应变化—-去除templates路径前缀:
首先，我们要知道哪里会使用到templateUrl属性，可能有如下几种情况：
1.app.js中使用$stateProvider.state()定义路由时;
2.类似于$ionicPopover的控件或自定义的directives中到;
我们以情况1为例说明修改的过程：
app.js之前可能的情况：
.state('login', { url:"/", templateUrl:"templates/login.html", controller:'LoginCtrl'});
修改之后则为：
.state('login', { url:"/", templateUrl:"login.html", controller:'LoginCtrl'});
其他的也类似地进行修改。
启用angular ng-strict-di
$ npm install gulp-ng-annotate --save-dev
varngAnnotate =require('gulp-ng-annotate');
varpaths = { sass: ['./scss/**/*.scss'], templatecache: ng_annotate:
.pipe(ngAnnotate({single_quotes:true})) .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"]
$ ionic serve
或
$ gulp ng_annotate
上面的执行过程将会生成文件夹，并且其中包含了严格符合注入标准的工程js文件。
合并js文件以及css文件
$ npm install gulp-useref --save-dev
varuseref =require('gulp-useref');
varpaths = { sass: ['./scss/**/*.scss'], templatecache: ng_annotate: useref:
gulp.task('useref',function(done){varassets = useref.assets(); .pipe(assets) .pipe(assets.restore()) .pipe(useref()) .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"]
注意：可能有些外部的css文件或js文件不想被处理，那么就保持原状即可。
$ ionic serve
或
$ gulp useref
上面的执行过程会生成以下文件：
其中后面2个文件，即是被合并过后的文件。
注意：新版本的gulp-useref没有assets()方法，所以可能会出现错误，大家可以用gulp-useref的2.1.0版本，即第一步安装时使用：
$ npm install gulp-useref@2.1.0--save-dev
最后一步
$ npm install cordova-uglify --save-dev
$ npm instal mv --save-dev
$ chmod +x file_name
1
1
现在，我们就可以生成处理完成的文件了：
$ ionic build android/ios
更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。