Add HTML Preprocessors (Jade, Haml and Handlebars)

Toilal · Toilal · commit 4459f3a43bc1 · 2014-12-12T16:19:53.000+01:00
diff --git a/README.md b/README.md
@@ -119,7 +119,7 @@ The root directory generated for a app with name `gulpAngular` :
 * *CSS pre-processor*: Less, Sass with Ruby and Node, Stylus, none
 * *Bootstrap directives* : UI Bootstrap, Angular Strap, official Bootstrap JavaScript, none (only if you chose Bootstrap)
 * **TODO** JS preprocessor: CoffeeScript, TypeScript, ECMAScript6 (Traceur and 6to5)
-* **TODO** HTML preprocessor: Jade ?
+* *HTML pre-processor*: Jade, Handlebars, Haml
 * **TODO** Script loader: Require, Browserify, ES6 with Require?, none
 * **TODO** Test framework: Jasmine, Mocha, Qunit
 
diff --git a/app/files.json b/app/files.json
@@ -24,6 +24,7 @@
     "bower.json",
 
     "gulp/build.js",
+    "gulp/consolidate.js",
     "gulp/watch.js",
     "gulp/wiredep.js",
 
diff --git a/app/prompts.json b/app/prompts.json
@@ -288,5 +288,48 @@
         "name": "None, only the good old CSS"
       }
     ]
+  },
+  {
+    "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": false
+      },
+      {
+        "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
+      }
+    ]
   }
 ]
diff --git a/app/src/format.js b/app/src/format.js
@@ -44,6 +44,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];
   });
@@ -131,4 +135,24 @@ module.exports = function () {
     var styleVendorSource = 'src/app/__' + this.props.ui.key + '-vendor.' + this.props.cssPreprocessor.extension;
     this.styleCopies[styleVendorSource] = 'src/app/vendor.' + this.props.cssPreprocessor.extension;
   }
+
+  function dependencyString(dep, version) {
+    return '"' + dep + '": ' + '"' + version + '"';
+  }
+
+  this.consolidateExtensions = [];
+
+  this.npmDevDependencies = [];
+  this.consolidateParameters = [];
+  _.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));
+
+
 };
diff --git a/app/techs.json b/app/techs.json
@@ -102,6 +102,27 @@
         "url": "http://learnboost.github.io/stylus/",
         "description": "Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.",
         "logo": "stylus.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"
     }
 }
 
diff --git a/app/templates/_package.json b/app/templates/_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",
@@ -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"
diff --git a/app/templates/gulp/_build.js b/app/templates/gulp/_build.js
@@ -79,7 +79,7 @@ gulp.task('jshint', function () {
 });
 
 gulp.task('injector:js', ['jshint', 'injector:css'], function () {
-  return gulp.src('src/index.html')
+  return gulp.src(['src/index.html', '.tmp/index.html'])
     .pipe($.inject(gulp.src([
         'src/{app,components}/**/*.js',
         '!src/{app,components}/**/*.spec.js',
@@ -91,8 +91,8 @@ gulp.task('injector:js', ['jshint', '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,
@@ -110,7 +110,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',
diff --git a/app/templates/gulp/_consolidate.js b/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);
diff --git a/app/templates/gulp/_watch.js b/app/templates/gulp/_watch.js
@@ -2,12 +2,14 @@
 
 var gulp = require('gulp');
 
-gulp.task('watch', ['wiredep', 'injector:css', 'injector:js'] ,function () {<% if (props.cssPreprocessor.key === 'less') { %>
+gulp.task('watch', [<% if (!_.isEmpty(props.htmlPreprocessors)) { %>'consolidate', <% } %>'wiredep', 'injector:css', 'injector:js'] ,function () {<% if (props.cssPreprocessor.key === 'less') { %>
   gulp.watch('src/{app,components}/**/*.less', ['injector:css']);<% } else if (props.cssPreprocessor.key === 'node-sass' || props.cssPreprocessor.key === 'ruby-sass') { %>
   gulp.watch('src/{app,components}/**/*.scss', ['injector:css']);<% } else if (props.cssPreprocessor.key === 'stylus') { %>
   gulp.watch('src/{app,components}/**/*.styl', ['injector:css']);<% } else { %>
   gulp.watch('src/{app,components}/**/*.css', ['injector:css']);<% } %>
   gulp.watch('src/{app,components}/**/*.js', ['injector:js']);
+  gulp.watch('src/{app,components}/**/*.js', ['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 %>']);<% }); %>
 });
diff --git a/app/templates/gulp/server.js b/app/templates/gulp/server.js
@@ -39,6 +39,8 @@ gulp.task('serve', ['watch'], function () {
   ], [
     '.tmp/{app,components}/**/*.css',
     'src/assets/images/**/*',
+    '.tmp/*.html',
+    '.tmp/{app,components}/**/*.html',
     'src/*.html',
     'src/{app,components}/**/*.html',
     'src/{app,components}/**/*.js'
diff --git a/app/templates/src/assets/images/haml.png b/app/templates/src/assets/images/haml.png
diff --git a/app/templates/src/assets/images/handlebars.png b/app/templates/src/assets/images/handlebars.png
diff --git a/app/templates/src/assets/images/jade.png b/app/templates/src/assets/images/jade.png
diff --git a/test/deps/package.json b/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",
@@ -36,11 +38,13 @@
     "chalk": "~0.5.1",
     "protractor": "~1.4.0",
     "uglify-save-license": "~0.4.1",
-
     "gulp-less": "~1.3.6",
     "gulp-ruby-sass": "~0.7.1",
     "gulp-sass": "~1.1.0",
-    "gulp-stylus": "~1.3.4"
+    "gulp-stylus": "~1.3.4",
+    "jade": "~1.8.1",
+    "hamljs": "~0.6.2",
+    "handlebars": "~2.0.0"
   },
   "engines": {
     "node": ">=0.10.0"
diff --git a/test/mock-prompts.js b/test/mock-prompts.js
@@ -21,7 +21,8 @@ var questions = [
   'router',
   'ui',
   'bootstrapComponents',
-  'cssPreprocessor'
+  'cssPreprocessor',
+  'htmlPreprocessors'
 ];
 
 var model = {};
@@ -89,7 +90,10 @@ module.exports = {
     router: model.router.values['angular-route'],
     ui: model.ui.values.bootstrap,
     bootstrapComponents: model.bootstrapComponents.values['ui-bootstrap'],
-    cssPreprocessor: model.cssPreprocessor.values['node-sass']
+    cssPreprocessor: model.cssPreprocessor.values['node-sass'],
+    htmlPreprocessors: _.filter(_.pluck(model.htmlPreprocessors.choices, 'value'), function(v) {
+      return v.key === 'jade';
+    })
   },
   libRegexp: function(name, version) {
     return new RegExp('"' + name + '": "' + version + '"');
diff --git a/test/test-files-generate.mocha.js b/test/test-files-generate.mocha.js
