From: Gustavo Martin Morcuende <gu.martinm@gmail.com>
Date: Thu, 20 Aug 2015 20:45:43 +0000 (+0200)
Subject: showcase: create $templateCache from html templates
X-Git-Url: https://git.gumartinm.name/?a=commitdiff_plain;h=44dd1f4068e96b32e88e1d2e3540c9f48f42a1d2;p=JavaScriptForFun

showcase: create $templateCache from html templates
---

diff --git a/angularjs/showcase/gulp.config.js b/angularjs/showcase/gulp.config.js
index 0a120a2..356a006 100644
--- a/angularjs/showcase/gulp.config.js
+++ b/angularjs/showcase/gulp.config.js
@@ -6,7 +6,8 @@ module.exports = function() {
     directory: './bower_components/',
     ignorePath: '../..'
   };
-  var config = {
+
+  return {
     main: main,
     jsAllFiles: [
         './src/**/*.js',
@@ -26,15 +27,15 @@ module.exports = function() {
 
     karmaConf: 'karma.conf.js',
 
-    /**
-     * build files
-     */
     build: {
-      app: 'app.js',
-      lib: 'lib.js',
-      directory: './dist/'
+      directory: './build/'
     },
 
+    templates: app + '**/*.html',
+    templateFile: 'templates.js',
+
+    temp: './.tmp/',
+
     /**
      * wiredep options for index.html and karma.conf.js
      */
@@ -59,5 +60,4 @@ module.exports = function() {
     }
   };
 
-  return config;
 };
diff --git a/angularjs/showcase/gulpfile.js b/angularjs/showcase/gulpfile.js
index 823745f..eb1d878 100644
--- a/angularjs/showcase/gulpfile.js
+++ b/angularjs/showcase/gulpfile.js
@@ -1,8 +1,9 @@
 var args = require('yargs').argv;
 var config = require('./gulp.config')();
-var serverConfig = require('./server/server.config')();
+var del = require('del');
 var gulp = require('gulp');
 var plugins = require('gulp-load-plugins')({lazy: true});
+var serverConfig = require('./server/server.config')();
 
 /**
  * Arguments:
@@ -117,47 +118,82 @@ gulp.task('autotest', ['wiredepkarma'], function(done) {
  *
  * @return {stream} The stream.
  */
-gulp.task('build', ['wiredep', 'test'], function() {
+gulp.task('build', ['wiredep', 'test', 'templatecache'], function() {
 
-  log('*** Building application for production - Optimizing assets - HTML,CSS,JS');
+  log('*** Building application for production - Optimizing assets - HTML,CSS,JS ***');
 
   var assets = plugins.useref.assets({searchPath: './'});
   // Filters are named for the gulp-useref path
   var cssFilter = plugins.filter('**/*.css', {restore: true});
-  var jsAppFilter = plugins.filter('**/app.js', {restore: true});
-  var jslibFilter = plugins.filter('**/lib.js', {restore: true});
+  var jsAppFilter = plugins.filter('**/app.min.js', {restore: true});
+  var jslibFilter = plugins.filter('**/lib.min.js', {restore: true});
+  var templateCache = config.temp + config.templateFile;
 
   return gulp.src(config.index)
+
+    // Inject templates
+    .pipe(inject(templateCache, 'templates'))
+
     // Gather all assets from the html with useref
     .pipe(assets)
+
     // Get the css
     .pipe(cssFilter)
+    .pipe(plugins.if(args.verbose, plugins.bytediff.start()))
     .pipe(plugins.minifyCss())
+    .pipe(plugins.if(args.verbose, plugins.bytediff.stop(byteDiffFormat)))
     .pipe(cssFilter.restore)
+
     // Get the custom javascript
     .pipe(jsAppFilter)
-    .pipe(plugins.ngAnnotate({add: true}))
+    .pipe(plugins.if(args.verbose, plugins.bytediff.start()))
+    .pipe(plugins.ngAnnotate({
+      //jscs:disable
+      single_quotes: true, // jshint ignore:line
+      //jscs:enable
+      add: true
+    }))
     .pipe(plugins.uglify({
       compress: {
         //jscs:disable
         drop_console: true, // jshint ignore:line
         drop_debugger: true // jshint ignore:line
         //jscs:enable
+      },
+      output: {
+        //jscs:disable
+        quote_style: 3 // jshint ignore:line
+        //jscs:enable
       }
     }))
+    .pipe(plugins.if(args.verbose, plugins.bytediff.stop(byteDiffFormat)))
     .pipe(getHeader())
     .pipe(jsAppFilter.restore)
+
     // Get the vendor javascript
     .pipe(jslibFilter)
-    .pipe(plugins.uglify())
+    .pipe(plugins.if(args.verbose, plugins.bytediff.start()))
+    .pipe(plugins.uglify({
+      output: {
+        //jscs:disable
+        quote_style: 3 // jshint ignore:line
+        //jscs:enable
+      }
+    }))
+    .pipe(plugins.if(args.verbose, plugins.bytediff.stop(byteDiffFormat)))
     .pipe(jslibFilter.restore)
+
     // Take inventory of the file names for future rev numbers
     .pipe(plugins.rev())
+
     // Apply the concat and file replacement with useref
     .pipe(assets.restore())
     .pipe(plugins.useref())
+
     // Replace the file names in the html with rev numbers
     .pipe(plugins.revReplace())
+
+    // Output to destination
     .pipe(gulp.dest(config.build.directory));
 
   /**
@@ -169,9 +205,9 @@ gulp.task('build', ['wiredep', 'test'], function() {
     var pkg = require('./package.json');
     var banner = ['/**',
       ' * <%= pkg.name %> - <%= pkg.description %>',
-      ' * @author <%= pkg.author.name %>\n' +
-      ' * @email <%= pkg.author.email %>\n' +
-      ' * @url <%= pkg.author.url %>\n' +
+      ' * @author <%= pkg.author.name %>',
+      ' * @email <%= pkg.author.email %>',
+      ' * @url <%= pkg.author.url %>',
       ' * @version <%= pkg.version %>',
       ' * @link <%= pkg.homepage %>',
       ' * @license <%= pkg.license %>',
@@ -184,9 +220,49 @@ gulp.task('build', ['wiredep', 'test'], function() {
 });
 
 /**
+ * Cleans up files in distribution directory.
+ *
+ * @return {undefined}
+ */
+gulp.task('clean', function(done) {
+
+  log('*** Cleans up directories ***');
+
+  del.sync([config.build.directory + '/**/*', config.temp]);
+  done();
+});
+
+/**
+ * Creates $templateCache from html templates
+ *
+ * @return {stream}
+ */
+gulp.task('templatecache', ['clean'], function() {
+
+  log('*** Creating AngularJS $templateCache ***');
+
+  return gulp
+    .src(config.templates)
+    .pipe(plugins.if(args.verbose, plugins.bytediff.start()))
+    .pipe(plugins.minifyHtml({
+      empty: true,
+      spare: true,
+      quotes: true
+    }))
+    .pipe(plugins.if(args.verbose, plugins.bytediff.stop(byteDiffFormat)))
+    .pipe(plugins.angularTemplatecache(config.templateFile, {
+        module: 'app.core',
+        root: 'app/',
+        standalone: false
+      }
+    ))
+    .pipe(gulp.dest(config.temp));
+});
+
+/**
  * Inject files in a sorted sequence at a specified inject label.
  *
- * @param {Array} source Source files (glob patterns)
+ * @param {Array|string} source Source files (glob patterns)
  * @param {string=} label The label name to be used by gulp-inject.
  * @return {stream} The stream.
  */
@@ -198,7 +274,7 @@ function inject(source, label) {
 
   return plugins.inject(
     gulp.src(source)
-      .pipe(plugins.angularFilesort(), options));
+      .pipe(plugins.angularFilesort()), options);
 }
 
 /**
@@ -261,3 +337,8 @@ function startTests(singleRun, done) {
 function log(message) {
   plugins.util.log(plugins.util.colors.blue(message));
 }
+
+function byteDiffFormat(data) {
+  var difference = (data.savings > 0) ? ' smaller.' : ' larger.';
+  return data.fileName + ' is ' + data.percent + '%' + difference;
+}
diff --git a/angularjs/showcase/package.json b/angularjs/showcase/package.json
index 433247d..dda6cba 100644
--- a/angularjs/showcase/package.json
+++ b/angularjs/showcase/package.json
@@ -10,10 +10,13 @@
   "homepage": "http://gumartinm.name",
   "license": "Apache License, Version 2.0",
   "devDependencies": {
+    "del": "~1.2.1",
     "express": "~4.13.3",
     "express-http-proxy": "~0.6.0",
     "gulp": "~3.9.0",
     "gulp-angular-filesort": "~1.1.1",
+    "gulp-angular-templatecache": "~1.7.0",
+    "gulp-bytediff": "~1.0.0",
     "gulp-filter": "~3.0.0",
     "gulp-header": "~1.2.2",
     "gulp-if": "~1.2.5",
@@ -22,6 +25,7 @@
     "gulp-jshint": "~1.11.2",
     "gulp-load-plugins": "~1.0.0-rc.1",
     "gulp-minify-css": "~1.2.0",
+    "gulp-minify-html": "~1.0.4",
     "gulp-ng-annotate": "~1.1.0",
     "gulp-nodemon": "~2.0.3",
     "gulp-order": "~1.1.1",
diff --git a/angularjs/showcase/server/server.js b/angularjs/showcase/server/server.js
index 8322744..917c263 100644
--- a/angularjs/showcase/server/server.js
+++ b/angularjs/showcase/server/server.js
@@ -15,10 +15,10 @@ switch (environment) {
   case 'production':
     console.log('production mode');
 
-    app.use(express.static('./dist/'));
+    app.use(express.static('./build/'));
 
     // Deep linking
-    app.use('/*', express.static('./dist/index.html'));
+    app.use('/*', express.static('./build/index.html'));
     break;
   default:
     console.log('development mode');
diff --git a/angularjs/showcase/src/showcase/app/app.module.js b/angularjs/showcase/src/showcase/app/app.module.js
index 0902681..3f303a5 100644
--- a/angularjs/showcase/src/showcase/app/app.module.js
+++ b/angularjs/showcase/src/showcase/app/app.module.js
@@ -3,9 +3,8 @@
   'use strict';
 
   angular.module('app', [
-    'ui.router',
-    'ui.bootstrap',
-    'ui.bootstrap.modal',
+    /* Shared modules */
+    'app.core',
 
     /* Feature areas */
     'app.welcome'
diff --git a/angularjs/showcase/src/showcase/app/core/core.module.js b/angularjs/showcase/src/showcase/app/core/core.module.js
new file mode 100644
index 0000000..d4e3985
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/core/core.module.js
@@ -0,0 +1,11 @@
+(function() {
+  'use strict';
+
+  angular.module('app.core', [
+    /* 3rd-party modules */
+    'ui.router',
+    'ui.bootstrap',
+    'ui.bootstrap.modal'
+  ]);
+
+})();
diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html
index 61ecf1f..2fca851 100644
--- a/angularjs/showcase/src/showcase/index.html
+++ b/angularjs/showcase/src/showcase/index.html
@@ -19,7 +19,7 @@
     -->
 
     <!-- Vendor styles -->
-    <!-- build:css(.) styles/lib.css -->
+    <!-- build:css(.) styles/lib.min.css -->
     <!-- bower:css -->
     <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
@@ -27,7 +27,7 @@
     <!-- endbuild -->
 
     <!-- Custom styles -->
-    <!-- build:css(.tmp) styles/app.css -->
+    <!-- build:css(.tmp) styles/app.min.css -->
     <!-- inject:css -->
     <!-- endinject -->
     <!-- endbuild -->
@@ -35,7 +35,7 @@
 
 
     <!-- Vendor JavaScript -->
-    <!-- build:js(.) js/lib.js -->
+    <!-- build:js(.) js/lib.min.js -->
     <!-- bower:js -->
     <script src="/bower_components/angular/angular.js"></script>
     <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
@@ -49,14 +49,17 @@
 
 
     <!-- Custom JavaScript -->
-    <!-- build:js(.) js/app.js -->
+    <!-- build:js(.) js/app.min.js -->
     <!-- inject:js -->
     <script src="/src/showcase/app/welcome/welcome.module.js"></script>
     <script src="/src/showcase/app/welcome/welcome.controller.js"></script>
     <script src="/src/showcase/app/app.module.js"></script>
     <script src="/src/showcase/app/app.config.js"></script>
+    <script src="/src/showcase/app/core/core.module.js"></script>
     <!-- endinject -->
 
+
+    <!-- AngularJS templates -->
     <!-- inject:templates:js -->
     <!-- endinject -->
     <!-- endbuild -->