Minify & Obfuscation ionic project

本文主要参考了:Production ready apps with Ionic Framework

1、安装相关module

npm install jshint --dev-save
npm install async --dev-save
npm install cordova-uglify --dev-save
npm install gulp --dev-save
npm install gulp-util --dev-save
npm install gulp-concat --dev-save
npm install gulp-sass --dev-save
npm install gulp-minify-css --dev-save
npm install gulp-rename --dev-save
npm install gulp-angular-templatecache --dev-save
npm install gulp-ng-annotate --dev-save
npm install gulp-useref --dev-save

2、下载相关文件到before_prepare目录下，并赋予可执行权限

3、下载相关文件到after_prepare目录下，并赋予可执行权限

4、删除after_prepare目录下的uglify.js文件

5、编辑根目录下的gulpfile.js文件，加入如下相关代码：
如下步骤主要借助于gulp(根据需要实际需要，自行添加以及修改)

var templateCache = require('gulp-angular-templatecache');
var ngAnnotate = require('gulp-ng-annotate');
var useref = require('gulp-useref');
var paths = {
  sass: ['./scss/**/*.scss'],
  templatecache: ['./www/templates/**/*.html'],
  ng_annotate: ['./www/js/*.js'],
  useref: ['./www/*.html']
};

gulp.task('default', ['sass', 'templatecache', 'ng_annotate', 'useref']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .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']);
});

gulp.task('templatecache', function (done) {
    gulp.src('./www/templates/**/*.html')
      .pipe(templateCache({standalone:true}))
      .pipe(gulp.dest('./www/js'))
      .on('end', done);
});

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('useref', function (done) {
    gulp.src('./www/*.html')
      .pipe(useref())
      .pipe(gulp.dest('./www/dist'))
      .on('end', done);
  });

6、编辑ionic.project文件(如果没有，请执行ionic serve):

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

7、修改app.js文件：

• 添加templates

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

• 更新 templateUrl
  打开 dist/dist_js/app/templates.js文件，形如：
  $templateCache.put('tab-account.html'
  而你的app.js文件与之对应的是:

.state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })

则，你要修改成:

.state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })

以此类推
8、编辑index.html文件
两个地方需要修改，css & js
主要借助于gulp-useref
替换掉css文件：

替换掉相关的js文件:
原js引用:

替换之后的：

添加 ng-strict-di 到 ng-app,修改之后的index.html形如(ionic start XXX 创建的一个demo工程文件):

9、Over