buschtoens/gulp-emblem

Emblem.js precompiler plugin for gulp

gulp-emblem

Emblem.js plugin for gulp ...a concise, beautiful, and fully compatible templating alternative for Handlebars.js.

Usage

First, install gulp-emblem and gulp-define-module as development dependencies:

npm install --save-dev gulp-emblem gulp-define-module

Then, add it to your gulpfile.js:

var emblem = require('gulp-emblem');
var defineModule = require('gulp-define-module');

gulp.task('templates', function(){
  gulp.src(['client/templates/*.em'])
    .pipe(emblem())
    .pipe(defineModule('node'))
    .pipe(gulp.dest('build/templates/'));
});

gulp-emblem outputs a raw handlebars function, so it is likely that you will want to use gulp-define-module to make the handlebars template available via a specific namespace or for use with a module system. For additional usage examples, we recommend that you visit gulp-handlebars and gulp-define-module.

Compiling to various module systems

gulp-define-module can be used to prepare the output for use with common module systems such as AMD, Node, and CommonJS. Please see the documentation for more details on how to use that in a gulp chain.

gulp-emblem makes the following available for use in the define-module wrapper:

• handlebars: The handlebars template fully wrapped (Handlebars.template(<%= contents %>)).

API

emblem(options)

options.compilerOptions

Type: Object

Compiler options to pass to Emblem.precompile().

Attributions

This project is a fork of gulp-handlebars by lazd. Emblem.js is a concise, beautiful, and fully compatible templating alternative for Handlebars.js.

gulp-emblem's Issues

Make this its own repository

gulp.js has created a blacklist, and one of the comments was to blacklist gulp-ember-handlebars because it didn't push changes back upstream. Perhaps it would be a good idea to make this its own repository instead of a fork so this plugin doesn't have the same fate.

Compiling templates for ember use

How do you convert emblem handlebar templates for emberjs use? I'm assuming I have to use the ember-template-compiler, but I'm not sure how. Would I pass it in as an option in emblem({}) so it uses it during compilation/precompilation?

I currently have:

gulp.task('templates', function(){
    gulp.src('/templates/*.em')
        .pipe( emblem() )
        .pipe( defineModule('plain', {
                wrapper: 'Ember.Handlebars.template(<%= contents %>)'
        }) )
        .pipe( declare({
            namespace: 'Ember.TEMPLATES',
            noRedeclare: true
        }) )
        .pipe( concat('templates.js'))
        .pipe( gulp.dest('/templates/dist') )
)}

This gives me basic handlebars templates, but incorporating ember features such as == outlet throws errors.

Update the dependency tree

There are multiple dependencies that are running out of date - I tried upgrading it an kept getting merge is undefined - looks like event-stream isn't working quite right on the latest maybe?

I will keep working on a branch and open a PR if you don't have a chance.

Emblem to raw HBS, not a function wrapper

Hi,

How could I receive raw hbs (or event html) instead of getting wrapped js?

gulp.task( 'taskName', function() {
        return gulp.src( 'template.emblem')
                .pipe( emblem())
                .pipe( gulp.dest( '../build/'));
});

Do want:

<div>
 <label></label>
 {{#each}}
           <!-- blah-blah -->
{{/each}}
</div>

Instead of:

this["templates"] = this["templates"] || {};this["templates"]["taskName"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var buffer = "", stack1, self=this; 

// blah-blah-blah... tones of code