Gulp Ionic for Deploy

Ionic CLI use Gulp run few handy tasks, such as gulp-sass and gulp-minify-css. For deploy Ionic APP, it’s need more auto task like compress and minify js and Angular template. Here is my process setting Gulp work with Ionic for deployment.

Ionic Setup SASS

Ionic CLI provide auto task for SASS setting. $ ionic setup sass command simply does the manual setting. This will install gulp.js and a few handy tasks, such as gulp-sass and gulp-minify-css.

$ ionic setup sass

Templates

Install gulp-angular-templatecache

$ npm install gulp-angular-templatecache --save-dev

Then setting in your gulpfile.js

var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function(done){
    gulp.src('./www/templates/**/*.html')
    .pipe(templateCache({
        standalone:true,
        root: 'templates'}))
    .pipe(gulp.dest('./public'))
    .on('end', done);
});

Add ‘templates’ to your angular.module() definition in app.js

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

Run Gulp and you can find template.js generate at ./www/dist

$ gulp template

Scripts

Now you should minify all js files. Install node module:

$ npm install gulp-ng-annotate --save-dev
$ npm install gulp-useref --save-dev
$ npm install gulp-uglify --save-dev

Then setting in your gulpfile.js

var ngAnnotate = require('gulp-ng-annotate');
var useref = require('gulp-useref');
var uglify = require("gulp-uglify");
gulp.task('html', function (done) {
  return gulp.src('./www/*.html')
        .pipe(useref())
        .pipe(gulp.dest('./public'));
});
gulp.task('minjs', function (done) {
  gulp.src('./public/*.js')
  .pipe(ngAnnotate({single_quotes: true}))
  .pipe(uglify())
  .pipe(gulp.dest('./public'))
  .on('end', done);
});

Then setting in your index.html, notice here I put ionic.bundle.js and other Angular js file in build:js that will generate new index.html file with app.js link.

<!-- build:js app.js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<!-- endbuild -->
<!-- build:js templates.js -->
<script src="../public/templates.js"></script>
<!-- endbuild -->

Run Gulp and you can find index.html, app.js generate at ./www/dist

$ gulp html

And run Gulp and you can find app.js, template.js minifyed at ./www/dist

$ gulp minjs

That all.