gulp-ionic-webbuild

Add-on Gulp tasks to optimise an Ionic project for mobile web deployment.

Installation

From your Ionic project directory, run:

npm i --save-dev gulp-ionic-webbuild

Next, at the bottom of your gulpfile.js, add the following:

require('gulp-ionic-webbuild')(gulp, {
  templatesModule: 'templates'
});

Note: the templatesModule value is the name of the Angular module to which the compiled templates will be added (this defaults to "templates"). It's very important that this matches the name of an Angular module included in your app, otherwise things will break in spectacular fashion!

Finally, add special "marker" comments to the <head> section of your www/index.html file. These comments will inject your compiled AngularJS templates/partials (using gulp-angular-templatecache) and generate a single optimised JS build file (using gulp-useref and gulp-uglify).

...
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <!-- compiled css output -->
  <link href="css/ionic.app.min.css" rel="stylesheet">

  <!-- build:js({www,www-dist/partials}) js/app.build.js -->
  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- bower deps -->
  <script src="lib/lodash/lodash.js"></script>
  <script src="lib/moment/moment.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>

  <!-- inject:partials -->
  <!-- endinject -->
  <!-- endbuild -->
</head>
...

The important bits to notice here are:

<!-- build:js({www,www-dist/partials}) js/app.build.js -->

This marks the starting point from which files will be included in the JS build.

<!-- inject:partials -->
<!-- endinject -->

This is where your compiled templates will be injected into the file. Since this will be a JS file, it will also be included in the final build.

<!-- endbuild -->

This denotes the end point for files to be included in the JS build.

Usage

Simply run your new Gulp task from your Ionic project directory:

gulp build-web

Your compiled web build can now be found in the www-dist folder. You can test it out using a web server of your choice, e.g.:

npm i -g http-server
http-server www-dist

alg-direct / gulp-ionic-webbuild Goto Github PK