Add HTML Preprocessors (Jade, Haml and Handlebars)

.gitignore

@@ -3,3 +3,5 @@ tempGulpAngular/
 coverage/
 .DS_Store
 npm-debug.log
+.idea
+*.iml

README.md

@@ -126,7 +126,7 @@ The root directory generated for a app with name `gulpAngular` :
 * *UI directives* : UI Bootstrap, Angular Strap, official Bootstrap JavaScript, Angular Foundation, official Foundation JavaScript, none (depends on the UI framework)
 * *CSS pre-processor*: Less, Sass with Ruby and Node, Stylus, none
 * *JS preprocessor*: CoffeeScript, TypeScript, ECMAScript 6 (Traceur and 6to5), none
-* **TODO** HTML preprocessor: Jade, Haml, Handlebars, none
+* *HTML preprocessor*: Jade, Haml, Handlebars, none
 * **TODO** Script loader: Require, Browserify, none
 * **TODO** Test framework: Jasmine, Mocha, Qunit
 

app/files.json

@@ -23,6 +23,7 @@
     "e2e/main.po.js",
 
     "gulp/build.js",
+    "gulp/consolidate.js",
     "gulp/watch.js",
     "gulp/wiredep.js",
     "gulp/server.js",

app/prompts.json

@@ -376,5 +376,48 @@
         "name": "TypeScript, a typed superset of JavaScript that compiles to plain JavaScript."
       }
     ]
+  },
+  {
+    "type": "checkbox",
+    "name": "htmlPreprocessors",
+    "message": "Which html template engine would you want to have?",
+    "choices": [
+      {
+        "value": {
+          "key": "jade",
+          "consolidate": ["jade", {"pretty": "  "}],
+          "extension": "jade",
+          "npm": {
+            "jade": "~1.8.1"
+          }
+        },
+        "name": "Jade (*.jade)",
+        "checked": true
+      },
+      {
+        "value": {
+          "key": "haml",
+          "consolidate": ["hamljs"],
+          "extension": "haml",
+          "npm": {
+            "hamljs": "~0.6.2"
+          }
+        },
+        "name": "Haml (*.haml)",
+        "checked": false
+      },
+      {
+        "value": {
+          "key": "handlebars",
+          "consolidate": ["handlebars"],
+          "extension": "hbs",
+          "npm": {
+            "handlebars": "~2.0.0"
+          }
+        },
+        "name": "Handlebars (*.hbs)",
+        "checked": false
+      }
+    ]
   }
 ]

app/src/format.js

@@ -49,6 +49,10 @@ module.exports = function () {
       return tech !== 'default' && tech !== 'css' && tech !== 'official' && tech !== 'none';
     });
 
+  _.forEach(this.props.htmlPreprocessors, function(preprocessor) {
+    usedTechs.push(preprocessor.key);
+  });
+
   var techsContent = _.map(usedTechs, function(value) {
     return listTechs[value];
   });
@@ -173,4 +177,25 @@ module.exports = function () {
   if(this.props.jsPreprocessor.key === 'coffee') {
     this.lintConfCopies.push('coffeelint.json');
   }
+
+  function dependencyString(dep, version) {
+    return '"' + dep + '": ' + '"' + version + '"';
+  }
+
+  this.consolidateExtensions = [];
+
+  this.npmDevDependencies = [];
+  this.consolidateParameters = [];
+
+  // Adding npm dev dependencies
+  _.forEach(this.props.htmlPreprocessors, function(preprocessor) {
+    _.forEach(preprocessor.npm, function(version, dep) {
+      this.npmDevDependencies.push(dependencyString(dep, version));
+    }.bind(this));
+    this.consolidateParameters.push(
+      JSON.stringify(preprocessor.consolidate).
+        replace(/"/g,'\'')); // Replace " with ' and assume this won't break anything.
+    this.consolidateExtensions.push(preprocessor.extension);
+  }.bind(this));
+
 };

app/src/mock-prompts.js

@@ -23,7 +23,8 @@ var questions = [
   'bootstrapComponents',
   'foundationComponents',
   'cssPreprocessor',
-  'jsPreprocessor'
+  'jsPreprocessor',
+  'htmlPreprocessors'
 ];
 
 var model = {};
@@ -101,7 +102,10 @@ module.exports = {
     bootstrapComponents: model.bootstrapComponents.values['ui-bootstrap'],
     foundationComponents: model.foundationComponents.values.none,
     cssPreprocessor: model.cssPreprocessor.values['node-sass'],
-    jsPreprocessor: model.jsPreprocessor.values.none
+    jsPreprocessor: model.jsPreprocessor.values.none,
+    htmlPreprocessors: _.filter(_.pluck(model.htmlPreprocessors.choices, 'value'), function(v) {
+      return v.key === 'jade';
+    })
   },
   libRegexp: function(name, version) {
     return new RegExp('"' + name + '": "' + version + '"');

app/techs.json

@@ -130,5 +130,26 @@
         "url": "http://www.typescriptlang.org/",
         "description": "TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.",
         "logo": "typescript.png"
+    },
+    "jade": {
+      "key": "jade",
+      "title": "Jade",
+      "url": "http://jade-lang.com/",
+      "description": "Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.",
+      "logo": "jade.png"
+    },
+    "haml": {
+      "key": "haml",
+      "title": "HAML",
+      "url": "http://haml.info/",
+      "description": "Beautiful, DRY, well-indented, clear markup: templating haiku.",
+      "logo": "haml.png"
+    },
+    "handlebars": {
+      "key": "handlebars",
+      "title": "Handlebars",
+      "url": "http://handlebarsjs.com/",
+      "description": "Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.",
+      "logo": "handlebars.png"
     }
 }

app/templates/_package.json

@@ -7,6 +7,7 @@
     "gulp-autoprefixer": "~2.0.0",
     "gulp-angular-templatecache": "~1.4.2",
     "del": "~0.1.3",
+    "gulp-consolidate": "~0.1.2",
     "gulp-csso": "~0.2.9",
     "gulp-filter": "~1.0.2",
     "gulp-flatten": "~0.0.4",
@@ -18,6 +19,7 @@
     "gulp-useref": "~1.0.2",
     "gulp-ng-annotate": "~0.3.6",
     "gulp-replace": "~0.5.0",
+    "gulp-rename": "~1.2.0",
     "gulp-rev": "~2.0.1",
     "gulp-rev-replace": "~0.3.1",
     "gulp-minify-html": "~0.1.7",
@@ -39,7 +41,8 @@
     "http-proxy": "~1.7.0",
     "chalk": "~0.5.1",
     "protractor": "~1.4.0",
-    "uglify-save-license": "~0.4.1"
+    "uglify-save-license": "~0.4.1"<% if(npmDevDependencies.length > 0) { %>,<% } %>
+    <%= npmDevDependencies.join(',\n    ') %>
   },
   "engines": {
     "node": ">=0.10.0"

app/templates/gulp/_build.js

@@ -106,7 +106,7 @@ gulp.task('browserify', ['scripts'], function () {
 
 gulp.task('injector:js', ['browserify', 'injector:css'], function () {<% } else { %>
 gulp.task('injector:js', ['scripts', 'injector:css'], function () {<% } %>
-  return gulp.src('src/index.html')
+  return gulp.src(['src/index.html', '.tmp/index.html'])
     .pipe($.inject(gulp.src([<% if (props.jsPreprocessor.key === 'none') { %>
       'src/{app,components}/**/*.js',<% } else if (props.jsPreprocessor.extension === 'js') { %>
       '.tmp/{app,components}/**/*.js',<% } else { %>
@@ -124,8 +124,8 @@ gulp.task('injector:js', ['scripts', 'injector:css'], function () {<% } %>
     .pipe(gulp.dest('src/'));
 });
 
-gulp.task('partials', function () {
-  return gulp.src('src/{app,components}/**/*.html')
+gulp.task('partials', <% if (!_.isEmpty(props.htmlPreprocessors)) { %>['consolidate'], <% } %>function () {
+  return gulp.src(['src/{app,components}/**/*.html', '.tmp/{app,components}/**/*.html'])
     .pipe($.minifyHtml({
       empty: true,
       spare: true,
@@ -143,7 +143,7 @@ gulp.task('html', ['wiredep', 'injector:css', 'injector:js', 'partials'], functi
   var cssFilter = $.filter('**/*.css');
   var assets;
 
-  return gulp.src('src/*.html')
+  return gulp.src(['src/*.html', '.tmp/*.html'])
     .pipe($.inject(gulp.src('.tmp/inject/templateCacheHtml.js', {read: false}), {
       starttag: '<!-- inject:partials -->',
       ignorePath: '.tmp',

app/templates/gulp/_consolidate.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var consolidate = require('gulp-consolidate');
+var rename = require('gulp-rename');
+var gulp = require('gulp');
+
+var engines = [
+  <%= consolidateParameters.join(',\n  ') %>
+];
+
+function buildTemplates(engine, src, dest) {
+  return gulp.src(src)
+    .pipe(consolidate.apply(this, engine))
+    .pipe(rename(function (path) {path.extname = '.html';}))
+    .pipe(gulp.dest(dest));
+}
+
+function buildTaskFunction(engine) {
+  return function() {
+    buildTemplates(engine, 'src/app/**/*.jade', '.tmp/app/');
+    buildTemplates(engine, 'src/components/**/*.jade', '.tmp/components/');
+  };
+}
+
+var tasks = [];
+
+for (var i=0, l=engines.length; i < l; i++) {
+  var engine = engines[i];
+
+  gulp.task('consolidate:' + engine[0] + ':app', buildTemplates.bind(this, engine, 'src/app/**/*.jade', '.tmp/app/'));
+  gulp.task('consolidate:' + engine[0] + ':components', buildTemplates.bind(this, engine, 'src/components/**/*.jade', '.tmp/components/'));
+  gulp.task('consolidate:' + engine[0], ['consolidate:' + engine[0] + ':app', 'consolidate:' + engine[0] + ':components' ]);
+
+  tasks.push('consolidate:' + engine[0]);
+}
+
+gulp.task('consolidate', tasks);

app/templates/gulp/_server.js

@@ -38,6 +38,8 @@ gulp.task('serve', ['watch'], function () {
     '<% if(props.cssPreprocessor.key === 'none') { %>src<% } else { %>.tmp<% } %>/{app,components}/**/*.css',
     '<% if(props.jsPreprocessor.key === 'none') { %>src<% } else { %>.tmp<% } %>/{app,components}/**/*.js',
     'src/assets/images/**/*',
+    '.tmp/*.html',
+    '.tmp/{app,components}/**/*.html',
     'src/*.html',
     'src/{app,components}/**/*.html'
   ]);

app/templates/gulp/_watch.js

@@ -2,10 +2,11 @@
 
 var gulp = require('gulp');
 
-gulp.task('watch', ['wiredep', 'injector:css', 'injector:js'] ,function () {
+gulp.task('watch', [<% if (!_.isEmpty(props.htmlPreprocessors)) { %>'consolidate', <% } %>'wiredep', 'injector:css', 'injector:js'] ,function () {
   gulp.watch('src/{app,components}/**/*.<%= props.cssPreprocessor.extension %>', ['injector:css']);<% if (props.jsPreprocessor.extension === 'js') { %>
   gulp.watch('src/{app,components}/**/*.js', ['injector:js']);<% } else { %>
   gulp.watch('src/{app,components}/**/*.{js,<%= props.jsPreprocessor.extension %>}', ['injector:js']);<% } %>
   gulp.watch('src/assets/images/**/*', ['images']);
-  gulp.watch('bower.json', ['wiredep']);
+  gulp.watch('bower.json', ['wiredep']);<% _.forEach(consolidateExtensions, function(extension) {%>
+  gulp.watch('src/{app,components}/**/*.<%= extension %>', ['consolidate:<%= extension %>']);<% }); %>
 });

test/deps/package.json

@@ -8,6 +8,7 @@
     "gulp-angular-filesort": "~1.0.4",
     "gulp-angular-templatecache": "~1.4.2",
     "del": "~0.1.3",
+    "gulp-consolidate": "~0.1.2",
     "gulp-csso": "~0.2.9",
     "gulp-filter": "~1.0.2",
     "gulp-flatten": "~0.0.4",
@@ -19,6 +20,7 @@
     "gulp-useref": "~1.0.2",
     "gulp-ng-annotate": "~0.3.6",
     "gulp-replace": "~0.5.0",
+    "gulp-rename": "~1.2.0",
     "gulp-rev": "~2.0.1",
     "gulp-rev-replace": "~0.3.1",
     "gulp-minify-html": "~0.1.7",
@@ -46,7 +48,10 @@
     "gulp-traceur": "~0.14.1",
     "gulp-6to5": "~1.0.2",
     "gulp-typescript": "~2.3.0",
-    "gulp-browserify": "~0.5.0"
+    "gulp-browserify": "~0.5.0",
+    "jade": "~1.8.1",
+    "hamljs": "~0.6.2",
+    "handlebars": "~2.0.0"
   },
   "engines": {
     "node": ">=0.10.0"

test/test-files-generate.mocha.js

@@ -22,6 +22,7 @@ describe('gulp-angular generator', function () {
   var expectedFile = [
     // gulp/ directory
     'gulp/build.js',
+    'gulp/consolidate.js',
     'gulp/e2e-tests.js',
     'gulp/proxy.js',
     'gulp/server.js',
@@ -101,8 +102,8 @@ describe('gulp-angular generator', function () {
     });
   });
 
-  describe('with default options: [angular 1.3.x, ngAnimate, ngCookies, ngTouch, ngSanitize, jQuery 1.x.x, ngResource, ngRoute, bootstrap, ui-bootstrap, node-sass, Standard JS]', function () {
-    // Default scenario: angular 1.3.x, ngAnimate, ngCookies, ngTouch, ngSanitize, jQuery 1.x.x, ngResource, ngRoute, bootstrap, node-sass, standard js
+  describe('with default options: [angular 1.3.x, ngAnimate, ngCookies, ngTouch, ngSanitize, jQuery 1.x.x, ngResource, ngRoute, bootstrap, ui-bootstrap, node-sass, Standard JS, Jade]', function () {
+    // Default scenario: angular 1.3.x, ngAnimate, ngCookies, ngTouch, ngSanitize, jQuery 1.x.x, ngResource, ngRoute, bootstrap, node-sass, standard js, jade
     it('should generate the expected files and their content', function (done) {
       helpers.mockPrompt(gulpAngular, defaults);
 
@@ -155,6 +156,10 @@ describe('gulp-angular generator', function () {
           ['bower.json', libRegexp('angular-route', prompts.angularVersion.values['1.3'])],
           ['bower.json', libRegexp('bootstrap-sass-official', prompts.ui.values.bootstrap.version)],
 
+          // Check consolidate
+          ['gulp/build.js', /gulp\.task\('partials'.*?'consolidate'/],
+          ['gulp/consolidate.js', /'jade'/],
+
           // Check package.json
           ['package.json', libRegexp('gulp-sass', prompts.cssPreprocessor.values['node-sass'].version)],
 
@@ -933,6 +938,49 @@ describe('gulp-angular generator', function () {
     });
   });
 
+  describe('with option: [No HTML Preprocessor]', function () {
+    it('should not have consolidate gulp task', function (done) {
+      helpers.mockPrompt(gulpAngular, _.assign(defaults, {
+        htmlPreprocessors: []
+      }));
+
+      gulpAngular.run({}, function() {
+        var expectedFileClone = _.clone(expectedFile);
+        assert.file(expectedFileClone);
+
+        assert.noFileContent([
+          ['gulp/build.js', /gulp\.task\('partials'.*?'consolidate'/],
+          ['gulp/consolidate.js', /'jade'/],
+          ['gulp/consolidate.js', /'hamljs'/],
+          ['gulp/consolidate.js', /'handlebars'/]
+        ]);
+
+        done();
+      });
+    });
+  });
+
+  describe('with option: [All HTML Preprocessors]', function () {
+    it('should have consolidate gulp task', function (done) {
+      helpers.mockPrompt(gulpAngular, _.assign(defaults, {
+        htmlPreprocessors: _.map(prompts.htmlPreprocessors.choices, function(c) {return c.value;})
+      }));
+
+      gulpAngular.run({}, function() {
+        assert.file(expectedFile);
+
+        assert.fileContent([
+          ['gulp/build.js', /gulp\.task\('partials'.*?'consolidate'/],
+          ['gulp/consolidate.js', /'jade'/],
+          ['gulp/consolidate.js', /'hamljs'/],
+          ['gulp/consolidate.js', /'handlebars'/]
+        ]);
+
+        done();
+      });
+    });
+  });
+
   // For future case
   /*
   describe('with option: []', function () {