From 44dd1f4068e96b32e88e1d2e3540c9f48f42a1d2 Mon Sep 17 00:00:00 2001 From: Gustavo Martin Morcuende Date: Thu, 20 Aug 2015 22:45:43 +0200 Subject: [PATCH] showcase: create $templateCache from html templates --- angularjs/showcase/gulp.config.js | 16 ++-- angularjs/showcase/gulpfile.js | 105 ++++++++++++++++++--- angularjs/showcase/package.json | 4 + angularjs/showcase/server/server.js | 4 +- angularjs/showcase/src/showcase/app/app.module.js | 5 +- .../showcase/src/showcase/app/core/core.module.js | 11 +++ angularjs/showcase/src/showcase/index.html | 11 ++- 7 files changed, 127 insertions(+), 29 deletions(-) create mode 100644 angularjs/showcase/src/showcase/app/core/core.module.js 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 @@ --> - + @@ -27,7 +27,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -49,14 +49,17 @@ - + + + + -- 2.1.4