add build-templates task to optimize ngTemplates that registers AngularJS templates in the

Author: ipluser

gulp/desktop/build-templates.js

@@ -0,0 +1,45 @@
+var gulp = require('gulp-help')(require('gulp')),
+    gutil = require('gulp-util'),
+    templateCache = require('gulp-angular-templatecache'),
+    size = require('gulp-size'),
+    uglify = require('gulp-uglify'),
+    replace = require('gulp-replace'),
+    gulpif = require('gulp-if'),
+    vp = require('vinyl-paths'),
+    del = require('del');
+
+var envUtil = require('../common/env-util');
+
+var paths = {
+  origin: 'views/desktop/templates',
+  compiled: 'public/compiled/desktop/scripts'
+};
+
+gulp.task('desktop-build-templates-no-clean', function () {
+  return gulp.src([
+    paths.origin + '/**/*.html'
+  ]).pipe(gulpif(!envUtil.isProduction(), size({title: 'desktop - template html - size'})))
+      .pipe(templateCache('templates.min.js', {
+        root: '/desktop/templates',
+        module: 'angularApp',
+        standalone: false,
+        moduleSystem: 'RequireJS'
+      }).on('error', gutil.log))
+      .pipe(replace(/^define\(/, 'define(\'desktop/templates\'\,').on('error', gutil.log))
+      .pipe(gulpif(!envUtil.isProduction(), size({title: 'desktop - template html - size - ng-html2js'})))
+      .pipe(uglify().on('error', gutil.log))
+      .pipe(gulpif(!envUtil.isProduction(), size({title: 'desktop - template html - size - uglify js'})))
+      .pipe(gulp.dest(paths.compiled));
+});
+
+gulp.task('desktop-clean-templates', function () {
+  return gulp.src([
+    paths.compiled + '/templates.min.js'
+  ], {
+    read: false
+  }).pipe(vp(del).on('error', gutil.log));
+});
+
+gulp.task('desktop-build-templates', ['desktop-clean-templates'], function () {
+  gulp.start('desktop-build-templates-no-clean');
+});

gulp/desktop/build.js

@@ -1,16 +1,20 @@
 var gulp = require('gulp-help')(require('gulp'));
 
-require('./build-scripts.js');
-require('./build-styles.js');
+require('./build-scripts');
+require('./build-styles');
+require('./build-templates');
 
 gulp.task('desktop-clean', function () {
-  gulp.start('desktop-clean-scripts', 'desktop-clean-styles');
+  gulp.start('desktop-clean-scripts', 'desktop-clean-styles',
+      'desktop-clean-templates');
 });
 
 gulp.task('desktop-build-no-clean', function () {
-  gulp.start('desktop-build-scripts-no-clean', 'desktop-build-styles-no-clean');
+  gulp.start('desktop-build-scripts-no-clean', 'desktop-build-styles-no-clean',
+      'desktop-build-templates-no-clean');
 });
 
 gulp.task('desktop-build', function () {
-  gulp.start('desktop-build-scripts', 'desktop-build-styles');
+  gulp.start('desktop-build-scripts', 'desktop-build-styles',
+      'desktop-build-templates');
 });

gulp/gulp-docker.js

@@ -17,6 +17,10 @@ gulp.task('clean-styles', function () {
   gulp.start('desktop-clean-styles', 'mobile-clean-styles');
 });
 
+gulp.task('clean-templates', function () {
+  gulp.start('desktop-clean-templates', 'mobile-clean-templates');
+});
+
 gulp.task('clean', function () {
   gulp.start('desktop-clean', 'mobile-clean');
 });
@@ -37,6 +41,14 @@ gulp.task('build-styles', function () {
   gulp.start('desktop-build-styles', 'mobile-build-styles');
 });
 
+gulp.task('build-templates-no-clean', function () {
+  gulp.start('desktop-build-templates-no-clean', 'mobile-build-templates-no-clean');
+});
+
+gulp.task('build-templates', function () {
+  gulp.start('desktop-templates-styles', 'mobile-templates-styles');
+});
+
 gulp.task('build-no-clean', function () {
   gulp.start('desktop-build-no-clean', 'mobile-build-no-clean');
 });

gulp/mobile/build-templates.js

@@ -0,0 +1,46 @@
+var gulp = require('gulp-help')(require('gulp')),
+    gutil = require('gulp-util'),
+    templateCache = require('gulp-angular-templatecache'),
+    size = require('gulp-size'),
+    uglify = require('gulp-uglify'),
+    concat = require('gulp-concat'),
+    replace = require('gulp-replace'),
+    gulpif = require('gulp-if'),
+    vp = require('vinyl-paths'),
+    del = require('del');
+
+var envUtil = require('../common/env-util');
+
+var paths = {
+  origin: 'views/mobile/templates',
+  compiled: 'public/compiled/mobile/scripts'
+};
+
+gulp.task('mobile-build-templates-no-clean', function () {
+  return gulp.src([
+    paths.origin + '/**/*.html'
+  ]).pipe(gulpif(!envUtil.isProduction(), size({title: 'mobile - template html - size'})))
+      .pipe(templateCache('templates.min.js', {
+        root: '/mobile/templates',
+        module: 'angularApp',
+        standalone: false,
+        moduleSystem: 'RequireJS'
+      }).on('error', gutil.log))
+      .pipe(replace(/^define\(/, 'define(\'mobile/templates\'\,').on('error', gutil.log))
+      .pipe(gulpif(!envUtil.isProduction(), size({title: 'mobile - template html - size - ng-html2js'})))
+      .pipe(uglify().on('error', gutil.log))
+      .pipe(gulpif(!envUtil.isProduction(), size({title: 'mobile - template html - size - uglify js'})))
+      .pipe(gulp.dest(paths.compiled));
+});
+
+gulp.task('mobile-clean-templates', function () {
+  return gulp.src([
+    paths.compiled + '/templates.min.js'
+  ], {
+    read: false
+  }).pipe(vp(del).on('error', gutil.log));
+});
+
+gulp.task('mobile-build-templates', ['mobile-clean-templates'], function () {
+  gulp.start('mobile-build-templates-no-clean');
+});

gulp/mobile/build.js

@@ -1,16 +1,20 @@
 var gulp = require('gulp-help')(require('gulp'));
 
-require('./build-scripts.js');
-require('./build-styles.js');
+require('./build-scripts');
+require('./build-styles');
+require('./build-templates');
 
 gulp.task('mobile-clean', function () {
-  gulp.start('mobile-clean-scripts', 'mobile-clean-styles');
+  gulp.start('mobile-clean-scripts', 'mobile-clean-styles',
+      'mobile-clean-templates');
 });
 
 gulp.task('mobile-build-no-clean', function () {
-  gulp.start('mobile-build-scripts-no-clean', 'mobile-build-styles-no-clean');
+  gulp.start('mobile-build-scripts-no-clean', 'mobile-build-styles-no-clean',
+      'mobile-build-templates-no-clean');
 });
 
 gulp.task('mobile-build', function () {
-  gulp.start('mobile-build-scripts', 'mobile-build-styles');
+  gulp.start('mobile-build-scripts', 'mobile-build-styles',
+      'mobile-build-templates');
 });

middleware/middleware-config.js

@@ -55,21 +55,21 @@ function staticMiddleware(app, options) {
     app.use('/static/scripts/mobile', express.static(process.cwd() + '/public/compiled/mobile/scripts', options));
   } else {
     app.use('/static', express.static(process.cwd() + '/public', options));
+    app.use('/*/templates', function (req, res, next) {
+      res.render(req.originalUrl.substr(1), function (err, html) {
+        if (err) {
+          next();
+        } else {
+          res.send(html);
+        }
+      });
+    });
   }
 
   app.use('/static/styles/desktop', express.static(process.cwd() + '/public/compiled/desktop/styles', options));
   app.use('/static/styles/mobile', express.static(process.cwd() + '/public/compiled/mobile/styles', options));
   app.use('/static/libs', express.static(process.cwd() + '/public/libs', options));
   app.use('/static/images', express.static(process.cwd() + '/public/images', options));
-  app.use('/*/templates', function (req, res, next) {
-    res.render(req.originalUrl.substr(1), function (err, html) {
-      if (err) {
-        next();
-      } else {
-        res.send(html);
-      }
-    });
-  });
 }
 
 module.exports = middlewareConfig;

package.json

@@ -28,6 +28,7 @@
     "express": "^4.13.3",
     "fs-extra": "^0.24.0",
     "gulp": "^3.9.0",
+    "gulp-angular-templatecache": "^1.8.0",
     "gulp-concat": "^2.6.0",
     "gulp-help": "^1.6.1",
     "gulp-if": "^2.0.0",
@@ -36,6 +37,7 @@
     "gulp-markdown": "^1.2.0",
     "gulp-minify-css": "^1.2.1",
     "gulp-plumber": "^1.0.1",
+    "gulp-replace": "^0.5.4",
     "gulp-size": "^2.0.0",
     "gulp-uglify": "^1.4.1",
     "gulp-util": "^3.0.6",

views/desktop/render/layout.html

@@ -43,6 +43,9 @@
       };
     }
 
+    {% if !isDevMode %}
+      GlobalConfig.requireScripts.push('desktop/templates');
+      {% endif %}
     {% if scripts %}
       {% for script in scripts %}
         GlobalConfig.requireScripts.push('{= script =}');
@@ -56,6 +59,7 @@
   <script src="/static/scripts/desktop/bootstrap.js"></script>
   {% else %}
   <script src="{= '/static/scripts/desktop/libs.min.js' | buildNumber =}"></script>
+  <script src="{= '/static/scripts/desktop/templates.min.js' | buildNumber =}"></script>
   <script src="{= '/static/scripts/desktop/apps.min.js' | buildNumber =}"></script>
   {% endif %}
 </body>

views/desktop/templates/markdown/README.html

@@ -40,12 +40,18 @@ <h3 id="production">Production</h3>
 <h3 id="configuration">Configuration</h3>
 <p>System configuration are stored in the <strong>locals.js</strong> file.</p>
 <h3 id="samples-page">Samples Page</h3>
-<p>Start the server and input <code>URL/samples</code> with browsers.</p>
+<p>Start the server and input <code>http://localhost:port/samples</code> with browsers.</p>
 <h2 id="gulp">Gulp</h2>
 <p>Show task list with <code>gulp help</code>.</p>
 <h2 id="test">Test</h2>
 <p>Test using karma and jasmine, run the test with <code>npm test</code> or <code>karma start</code>. Unit and coverage test report are stored in report directory.</p>
 <h2 id="changelog">Changelog</h2>
+<h3 id="2-2-0">2.2.0</h3>
+<ul>
+<li>add build-templates task to optimize ngTemplates that registers AngularJS templates in the $templateCache</li>
+<li>add error and listening event to server<br>
+17.01.2016</li>
+</ul>
 <h3 id="2-1-0">2.1.0</h3>
 <ul>
 <li>replace gulp-livereload with browser-sync</li>

views/mobile/render/layout.html

@@ -10,7 +10,7 @@
 
   <link rel="stylesheet" href="/static/libs/bootstrap/dist/css/bootstrap.min.css">
   <link href="/static/libs/github-markdown-css/github-markdown.css" rel="stylesheet">
-  <link rel="stylesheet" href="{= '/static/styles/desktop/style.css' | buildNumber =}"/>
+  <link rel="stylesheet" href="{= '/static/styles/mobile/style.css' | buildNumber =}"/>
 
   {% if styles %}
   {% for style in styles %}
@@ -43,6 +43,9 @@
       };
     }
 
+    {% if !isDevMode %}
+      GlobalConfig.requireScripts.push('mobile/templates');
+      {% endif %}
     {% if scripts %}
       {% for script in scripts %}
         GlobalConfig.requireScripts.push('{= script =}');
@@ -56,6 +59,7 @@
   <script src="/static/scripts/mobile/bootstrap.js"></script>
   {% else %}
   <script src="{= '/static/scripts/mobile/libs.min.js' | buildNumber =}"></script>
+  <script src="{= '/static/scripts/mobile/templates.min.js' | buildNumber =}"></script>
   <script src="{= '/static/scripts/mobile/apps.min.js' | buildNumber =}"></script>
   {% endif %}
 </body>