[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)