[TOC] --- > [gulp顺序执行任务](http://zhangruojun.com/gulpshun-xu-zhi-xing-ren-wu/) # 混淆ionic App ionic工程发布之前的最后一步，即代码压缩（获取更好的性能）以及代码混淆（以免源码被有心者轻易获取），包括以下步骤： * 首先检查js代码，没有问题，一般像webstorm会自动检查错误，可以即时看到有无提示错误！ * 将html转换为angular的js代码，起到混淆html页面代码的作用。 * 由于angular使用依赖注入的设计，我们需要保证它混淆后没有问题。 * 合并所有的js代码和css，起到混淆js和css代码作用，减少了请求。 * cordova hook，代码丑化、压缩、混淆。 ## 配置gulp和hooks 执行`ionic serve`时，`gulp tasks(任务名)`会被执行。 执行`ionic build android/ios`或`ionic run android/ios`时，`cordova hooks`会被执行。 ## gulp-useref **作用：**它可以把html里零碎的这些引入合并成一个文件，但是**它不负责代码压缩**。 修改index.html文件，对**需要合并的js文件和css文件进行处理**： ```html <!-- build:css dist_css/styles.css --> <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 --> ``` 上面的`build:js、build:css和endbuild`，是该插件必须的。 ## 完整代码 修改**gulpfile.js**文件内容： ```javascript var gulp = require('gulp'); var templateCache = require('gulp-angular-templatecache'); var ngAnnotate =require('gulp-ng-annotate'); var useref = require('gulp-useref'); var gulpif = require('gulp-if'); var minifyCss = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var paths = { sass: ['./scss/**/*.scss'], //暂时我没有用到！ templatecache: ['./www/**/*.html'], ng_annotate: ['./www/**/*.js'], useref: ['./www/*.html'] }; gulp.task('default', ['sass', 'templatecache', 'ng_annotate', 'useref']); //将html页面代码转换为angular的JS代码 gulp.task('templatecache',function(done){ gulp.src('./www/**/*.html') .pipe(templateCache({standalone:true})) .pipe(gulp.dest('./www/js')).on('end', done); }); //ng-strict-di使得工程中依赖注入不会有问题 gulp.task('ng_annotate',function(done){ gulp.src('./www/**/*.js') .pipe(ngAnnotate({single_quotes:true})) .pipe(gulp.dest('./www/dist/')) .on('end', done); }); //合并js文件以及css文件 gulp.task('useref', function (done) { //var assets = useref.assets(); gulp.src('./www/*.html') //.pipe(assets) //.pipe(assets.restore()) /* 新版本的gulp-useref没有assets()方法 可以用gulp-useref的2.1.0版本，即第一步安装时使用： $ npm install gulp-useref@2.1.0 --save-dev */ .pipe(useref()) .pipe(gulp.dest('./www/dist')) .on('end', done); }); 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']); }); ``` 修改**ionic.project**文件： ``` "gulpStartupTasks": [ "sass", "templatecache", "ng_annotate", "useref", "watch" ] ``` ## 最后一步 1. 使用npm安装cordova-uglify以及mv： ~~~ $ npm install cordova-uglify --save-dev $ npm instal mv --save-dev ~~~ 2. 复制cordova hooks文件： 将[这些文件](https://gist.github.com/agustinhaller/426351993c70a0329ad0)添加至`$PROJECT_DIR/hooks/after_prepare`文件夹中。并且要注意这些文件中的有关路径的操作，是对应于前几步中的路径的，如果工程结构不一样，请自行调整这些文件中有关路径的部分。特别注意需要给予此文件“可执行”的权限，即 `$ chmod +x file_name` 现在，我们就可以生成处理完成的文件了： `$ ionic build android/ios` （<font style="color:red">Xee</font >：改hooks的文件可能路径需要和自己的一直比如：gulp-useref合并的文件在dist_js目录下。） # 参考 [使用Gulp打包ionic1项目](https://www.jianshu.com/p/2fd3cdba2ded) [ionic代码压缩与代码混淆](http://liuwenzhuang.github.io/2015/11/ionic-minify-obfuscation) [如何制作一个发布版的ionic应用？](http://rensanning.iteye.com/blog/2205322) [原文：Production ready apps with Ionic Framework](https://www.airpair.com/ionic-framework/posts/production-ready-apps-with-ionic-framework)