Add HTML Preprocessors (Jade, Haml and Handlebars)

[Toilal]

This implements HTML preprocessors (template engine).

It supports jade, haml and handlebars through consolidate. Multiple preprocessors can be supported at the same time, it's based on filename extension in src/app or src/components.

Still to be done:

• Make unit tests pass.

[zckrs]

I don't know consolidate but you should use in generator instead app.
Please see http://yeoman.io/blog/release-0.18.html in "File writing filters" section 😀

[Toilal]

@zckrs I'm not sure I understand your comment. consolidate is used in generated projects from gulp. I don't think I can use any yeoman feature from gulp task in generated project.

Actually, yeoman still generates the same raw HTML templates even if a HTML preprocessor is choosen. But later, after user has generated the project, he can add *.jade files and they will be compiled automatically to .tmp directory by gulp.

[zckrs]

Right. I need to read full doc of consolidate.

[Toilal]

to make it short, consolidate is a nodeJS tool (with a gulp wrapper) that acts as an adapter for many template engine. It allows to use any template engine from gulp using the same code.

var consolidate = require("gulp-consolidate");

gulp.src("./src/*.html", { read : false})
    .pipe(consolidate("swig", {
        msg: "Hello Gulp!"
    }))
    .pipe(gulp.dest("./dist"));

the "swig" string can be replaced with any other supported template engine.

• atpl
• dust (website)
• eco
• ect (website)
• ejs
• haml (website)
• haml-coffee (website)
• handlebars (website)
• hogan (website)
• jade (website)
• jazz
• jqtpl (website)
• JUST
• liquor
• lodash (website)
• mustache
• nunjucks
• QEJS
• ractive
• swig (website)
• templayed
• toffee
• underscore (website)
• walrus (website)
• whiskers

To support an additionnal engine, only thing to do is to install the nodeJS related module (for example, npm install jade, or npm install swig).

Using gulp-consolidate avoid to use a different gulp module and script for each template engine (gulp-jade, gulp-swig), those modules having differents API.

[Swiip]

I'm not so sure it's needed to handle multiple html preprocessor at a time. But I like the idea of putting this in a separate files. In fact I intent to split the build into scripts.js, styles.js, html.js files in addition to the build.js file but that will be another PR.

As you said, rewriting the index.html could be really hard and could also be impossible to maintain. People may ask to have a index.jade someday but I think we'll refuse it.

Anyway, great work! 👍

[Toilal]

@Swiip I'll make some manual tests in the morning and tell you when all is OK to merge.

[Toilal]

I've tested and fixed some issues. Also added techs entries for Jade, HAML and Handlebars. I think it's ready for merge.

[wgorder]

Looks cool but it seems to break on gulp serve and gulp serve:dist

I replaced main.html with main.jade

.container
    div(ng-include="'components/navbar/navbar.html'")
      .jumbotron.text-center
        h1 'Allo, 'Allo!
        p.lead
          img(src='assets/images/yeoman.png', alt="I'm Yeoman")
          br
          |       Always a pleasure scaffolding your apps.
        p
          a.btn.btn-lg.btn-success(ng-href='#') Splendid!
      .row
        .col-sm-6.col-md-4(ng-repeat="awesomeThing in awesomeThings | orderBy:'rank'")
          .thumbnail
            img.pull-right(ng-src='assets/images/{{awesomeThing.logo}}', alt='{{awesomeThing.title}}')
            .caption
              h3 {{awesomeThing.title}}
              p {{awesomeThing.description}}
              p
                a(ng-href='{{awesomeThing.url}}') {{awesomeThing.url}}
      hr
      .footer
        p
          | With ♥ from
          a(href='https://twitter.com/Swiip') @Swiip

the gulp serve serves up a blank page. The serve works fine if i leave it as main.html

[wgorder]

Ok.. so main.html is being served I can't see any difference in the page src but the html works and the jade does not. I don't get it.

[wgorder]

Ignore the last 2 comments it was a PEBCAK error. The jade was malfromed and the .jumbotron was indented one tab to far.

It works great cant wait to see this and the coffee branch get merged in.

Thanks for the contribution.

[Swiip]

I wanted to focus on the release of the JS Preprocessor but it breaks the merging of your PR sorry.

If you can merge, I think it will be the next big feature of the generator!

[Toilal]

No problem, I do it now, I have 10 minutes to kill ...

Edit: It's a bit longer than a simple rebase, i need to fix some unit tests now. WIP.

[Toilal]

@Swiip I did rebase this branch on current master, and it's working properly now.

Please note the change in the way npm devDependencies are added to package.json template. It's more code oriented and easier to maintain each feature npm related dependencies, with a npm object in prompts.json.

It would be great to improve and generalize this dependency behavior (it can be refactored and generalized to every choices). And also use the same implementation for bower dependencies.

I'll create another branch for those changes if you are OK.

[Swiip]

I continue the debate here. As you perfectly mentioned it, there is two ways of dealing with options which implies multiple dependencies:

• use a list in the prompts.json
• put some if in the templates

For some times now, we chose to reduce the preparations and add more ifs in the templates. If it's breaking some front end MVC patterns, we thought it's more maintainable to have a quick look at our template files.

In fact, I'm even considering totally removing package / version data in the prompts.

[Toilal]

I see, i didn't know this has already been discussed.

How about adding a small "middleware", called "dependencies.js" to keep both prompts.json and template simples ? This middleware would be responsible to build dependency lists based on prompts choice, and it would be really more readable that templates conditions.

If you are OK with this, i can implement the "middleware" in this branch. If you disagree, i'll simply remove all dependencies from prompts and use yeoman templating engine to register them directly.

[Swiip]

Interesting suggestion. I'm not a fan either of the Underscore/Lodash template syntax. We could even create a sort of json file which ables us to list dependencies with some kind of additional parameter which would be the prompt value which trigger the dependency... And we could use the same mechanism for Bower.

But all of it has to be addressed in another PR.

[Toilal]

Ok, so i can start this new PR tomorrow, and i'll rebase this one to keep dependency management in template.

[Toilal]

@Swiip Hope it's OK now :) I'll wait this one to be merged before starting the other PR.

[Swiip]

That's perfect, thanks :)

[sebastialonso]

Hi. I created a project choosing Jade as the preprocessor.
I created some html views, they work OK. But then I write them into Jade, change the extensions in both the files and the routes in index.coffee, but all get is unparsed Jade text.

Is there something else I need to do to be able to work with Jade?

[0x7061]

Sorry for the dumb question but if I choose to use handlebars with angular, can I use it like server-side handlebars? Like access the variables exported with the angular scope? If so, how?

[Swiip]

Nop, you can't. Its preprocessed by Gulp and served statically to Angular. Handlebars is the less useful as it keep the "XML like" syntax.

[malfborger]

@sebastialonso Got the same issue. Am i missing something? Do you need to configure preprocessing of jade 2 html?

[Swiip]

You need to address them with .html in your code. Angular can't load jade templates. Gulp compile them and angular load standard html.