ionic实用功能(二)——制作一个发布版的ionic应用(混淆、打包)
首先，需要下载的文件有:
（1）(cordova hook)JS代码的Lint，检查js文件（非必须，可跳过）
混淆JS代码的前提要保准JS代码没有错误,所以首先要检查代码的错误。安装jshint可以做到检测的效果。
安装jshint
C:\myApp&npm install jshint –save-dev
C:\myApp&npm install async –save-dev
hook文件中添加01_jshint.js文件(务必仅添加01_jshint.js文件)
C:\myApp\hooks\after_prepare\01_jshint.js
编译，测试下代码是否有报错，有错误则修改代码
C:\myApp&ionic build android
Linting www/js/controllers.js
Errors in file www/js/controllers.js
9:4 -& Missing semicolon. -&
修改错误提示，直到build成功。
（2）(gulp task)把html模板转换为angularjs模板
1、安装gulp-angular-templatecache
C:\myApp&npm install gulp-angular-templatecache –save-dev
2、修改gulpfile.js
var templateCache = require(‘gulp-angular-templatecache’);(添加)
var paths = {
sass: [‘./scss/**/*.scss’],
templatecache: [‘./www/templates/**/*.html’]
gulp.task(‘default’, [‘sass’, ‘templatecache’]);(修改)
gulp.task(‘watch’, function() {
gulp.watch(paths.sass, [‘sass’]);
gulp.watch(paths.templatecache, [‘templatecache’]);
gulp.task(‘templatecache’, function (done) {
gulp.src(‘./www/templates/**/*.html’)
.pipe(templateCache({standalone:true}))
.pipe(gulp.dest(‘./www/js’))
.on(‘end’, done);
}); (添加)
3、修改ionic.project(定义了ionic启动的时候执行的任务)
“name”: “myApp”,
“app_id”: “”,
“gulpStartupTasks”: [
“sass”,
“templatecache”,
“watch”
4、修改app.js
angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.services’, ‘templates’])
5、修改index.html
src=“js/templates.js”
6、执行ionic serve
系统会生成C:\myApp\www\js\templates.js文件，打开templates.js文件，将里面的templateUrl改成和app.js的templateUrl一致
C:\myApp\www\js\templates.js
$templateCache.put(“tabs.html”, …
$templateCache.put(“templates/tabs.html”, …
以上工作是为了将所有html文件转换成一个angularjs识别的js文件方式这样就不需要html文件了。
如果执行错误，大半是没有安装gulp需要的工具，打开gulpfile.js文件发现需要安装以下工具，可使用npm install gulp 将所需要的工具安装。注：gulp需要全局安装 即 npm install gulp -g
var gulp = require(‘gulp’);
var gutil = require(‘gulp-util’);
var bower = require(‘bower’);
var concat = require(‘gulp-concat’);
var sass = require(‘gulp-sass’);
var minifyCss = require(‘gulp-minify-css’);
var rename = require(‘gulp-rename’);
var sh = require(‘shelljs’);
（3）(gulp task)开启ng-strict-di，将所有js、css生成到dist目录中
1、安装gulp-ng-annotate
C:\myApp&npm install gulp-ng-annotate –save-dev
2、修改gulpfile.js
var ngAnnotate = require(‘gulp-ng-annotate’);
var paths = {
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
“name”: “myApp”,
“app_id”: “”,
“gulpStartupTasks”: [
“sass”,
“templatecache”,
“ng_annotate”,
“watch”
4、修改index.html (修改引用，前面生成的js文件)
&script src=“dist/dist_js/app/app.js”&&/script&
&script src=“dist/dist_js/controllers.js”&&/script&
&script src=“dist/dist_js/services.js”&&/script&
&script src=“dist/dist_js/templates.js”&&/script&
5、执行ionic serve
js会被重新生成到以下，并且严格符合注入标准
C:\myApp\www\dist\dist_js\app
（4）(gulp task)合并JS、CSS文件
1、安装gulp-useref
C:\myApp&npm install gulp-useref –save-dev
2、修改gulpfile.js
var useref = require(‘gulp-useref’);
var paths = {
sass: [‘./scss/**/*.scss’],
templatecache: [‘./www/templates/**/*.html’],
ng_annotate: [‘./www/js/*.js’],
useref: [‘./www/*.html’]
gulp.task(‘useref’, function (done) {
//var assets = 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
“name”: “myApp”,
“app_id”: “”,
“gulpStartupTasks”: [
“sass”,
“templatecache”,
“ng_annotate”,
“useref”,
“watch”
4、修改index.html
&!– build:css dist_css/styles.css –&
&link href=“css/style.css” rel=“stylesheet”&
&link href=“css/ionic.app.css” rel=“stylesheet”&
&!– endbuild –&
&!– build:js dist_js/app.js –&
&script src=“dist/dist_js/app/app.js”&&/script&
&script src=“dist/dist_js/app/controllers.js”&&/script&
&script src=“dist/dist_js/app/services.js”&&/script&
&script src=“dist/dist_js/app/templates.js”&&/script&
&!– endbuild –&
注意：以上的注释一定要表面，它说明了将哪些文件合并成哪个文件。
5、执行ionic serve
生成以下文件：
C:\myApp\www\dist\index.html
C:\myApp\www\dist\dist_css\styles.css
C:\myApp\www\dist\dist_js\app.js
至此整个工程目录就合并生成三个文件了。
（5）(cordova hook)混淆代码
1、安装cordova-uglify
C:\myApp&npm install cordova-uglify –save-dev
C:\myApp&npm instal mv –save-dev
2、拷贝下载的文件到C:\myApp\hooks\after_prepare 目录
01_jshint.js
020_remove_sass_from_platforms.js
030_clean_dev_files_from_platforms.js
040_move_dist_files_to_platforms.js
050_clean_obfuscation.js
060_uglify.js
文件夹里已经有的uglify.js可以删掉。
3、执行ionic build android
至此完成！
完成后可用压缩软件打开前后两个apk比较
assert文件夹对比，经过处理后只剩下了styles.css、app.js、index.html而且代码也已经混淆了。
This entry was posted in . Bookmark the .