Giter Club home page Giter Club logo

grunt-ember-handlebars's Introduction

grunt-ember-handlebars

Precompile ember templates in grunt using only ember-template-compiler.js.


No longer maintained - please use grunt-ember-templates

When I wrote this package, there were no grunt plugins that compiled handlebars templates. Grunt has since flourished and now there are other, better maintained alternatives. I don't think there's much value in keeping this around any longer.

If you're starting a new project that uses grunt to compile hbs templates, please look at grunt-ember-templates.

- Mukund


Getting Started

If you haven't used grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile as well as install and use grunt plugins. Once you're familiar with that process, install this plugin with this command:

npm install grunt-ember-handlebars --save-dev

Handlebars task

Run this task with the grunt ember_handlebars command.

This task is a [multi task][] so any targets, files and options should be specified according to the [multi task][] documentation. [multi task]: https://github.com/gruntjs/grunt/wiki/Configuring-tasks

Version 0.3.x of this plugin is compatible with Grunt 0.4.x. Version 0.1.x of this plugin is compatible with Grunt 0.3.x.

Options

separator

Type: String Default: linefeed + linefeed

Concatenated files will be joined on this string.

namespace

Type: String Default: 'Ember.TEMPLATES'

The namespace in which the precompiled templates will be assigned. Use dot notation (e.g. App.Templates) for nested namespaces.

Example:

options: {
  namespace: 'MyApp.Templates'
}

wrapped

Type: Boolean Default: true

Determine if preprocessed template functions will be wrapped in Ember.Handlebars.template function.

processName

Type: function

This option accepts a function which takes one argument (the template filepath) and returns a string which will be used as the key for the precompiled template object. The example below stores all templates on the default Ember.TEMPLATES namespace in capital letters.

options: {
  processName: function(filename) {
    return filename.toUpperCase();
  }
}

processPartialName

Type: function

This option accepts a function which takes one argument (the partial filepath) and returns a string which will be used as the key for the precompiled partial object when it is registered in Handlebars.partials. The example below stores all partials using only the actual filename instead of the full path.

options: {
  processPartialName: function(filePath) { // input:  templates/_header.hbs
    var pieces = filePath.split("/");
    return pieces[pieces.length - 1]; // output: _header.hbs
  }
}

Note: If processPartialName is not provided as an option the default assumes that partials will be stored by stripping trailing underscore characters and filename extensions. For example, the path templates/_header.hbs will become header and can be referenced in other templates as {{> header}}.

partialRegex

Type: Regexp Default: /^_/

This option accepts a regex that defines the prefix character that is used to identify Handlebars partial files.

// assumes partial files would be prefixed with "par_" ie: "par_header.hbs"
options: {
  partialRegex: /^par_/
}

Usage Examples

ember_handlebars: {
  compile: {
    options: {
      namespace: "MyApp.TEMPLATES"
    },
    files: {
      "path/to/result.js": "path/to/source.hbs",
      "path/to/another.js": ["path/to/sources/*.hbs", "path/to/more/*.hbs"]
    }
  }
}

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style.

Release History

  • v0.8.0 - Update Handlebars to v1.3.0.
  • v0.7.0 - Update Handlebars to v1.0.0. Don't strip leading underscores from partial names.
  • v0.6.0 - Use ember-template-precompiler, update Handlebars to 1.0.0-rc.4.
  • v0.5.0 - Drop support for registerPartial in favor of Ember.TEMPLATES.
  • v0.4.0 - Now requires handlebars-1.0-rc.3 and ember-1.0.0-rc.1.
  • v0.3.0 - Copy the grunt-contrib interface, which is much nicer.
  • v0.2.1 - Change utils to util. D'oh!
  • v0.2.0 - Make ember-handlebars use grunt 0.4.x.
  • v0.1.7 - Updated ember.js used for testing, ensure that tests continue working with new view context handling.
  • v0.1.6 - Stopped using helpers, which will get removed in grunt 0.4.
  • v0.1.4 - Updated ember.js library we're using, since it looks like precompilation has been updated.
  • v0.1.0 - Woo!

License

Copyright (c) 2012 Mukund Lakshman

Licensed under the MIT license.

grunt-ember-handlebars's People

Contributors

kencheeto avatar timols avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

grunt-ember-handlebars's Issues

Use handlebars with grunt banner/footer

When I concat like this

banner: ";(function( window, Ember, undefined){ \n 'use strict';",
footer: "}( window, Ember ));"

My template wil brake. Is it a bad practise to concat and wrap ember-handlebars?
It brakes because this is undefined and

this["App"] = this["App"] || {};

Doesn't work inside my function

TypeError: Cannot read property '_' of undefined

The error from running grunt:

Running "ember_handlebars:all" (ember_handlebars) task

TypeError: Cannot read property '_' of undefined
    at Object.module.exports (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt-ember-handlebars/tasks/ember-handlebars.js:29:15)
    at Object.task.registerMultiTask.thisTask (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/lib/grunt/task.js:109:15)
    at Object.task.registerTask.thisTask.fn (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/lib/grunt/task.js:58:16)
    at Task.<anonymous> (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/lib/util/task.js:343:36)
    at Task.<anonymous> (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/lib/util/task.js:319:9)
    at Task.<anonymous> (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/lib/util/task.js:346:11)
    at Task.<anonymous> (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/lib/util/task.js:319:9)
    at module.exports.grunt.registerHelper.grunt.utils.spawn.cmd (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/tasks/qunit.js:223:7)
    at Object.async.forEachSeries (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/node_modules/async/lib/async.js:104:20)
    at Object.module.exports.grunt.registerHelper.grunt.utils.spawn.cmd (/Users/krainboltgreene/Code/ruby/absolvte/public/node_modules/grunt/tasks/qunit.js:130:23)

Investigate: Issue with yeoman?

I need to test this with Yeoman to make sure it works. I've heard a report that it doesn't. Not too familiar with Yeoman, though, so I'll need to set that up first.

Seems to fail with latest Ember

Hi,

It seems the task now fails with Ember-1.0.0-rc.1 and Handlebars-1.0.0-rc.3. Those 2 work together. I tried to update the task myself but NodeJS 'runInContext' is causing me grief and my limited Node experience doesn't allow me to track the problem for the moment.

Cheers,

Richard

Which version of Handlebars is used?

In ember-template-compiler.js, there are the lines

Ember.assert("Ember Handlebars requires Handlebars version 1.0 or 1.1. Include " +
             "a SCRIPT tag in the HTML HEAD linking to the Handlebars file " +
             "before you link to Ember.", Handlebars);

but recent commits have clearly updated Handlebars to 1.3.0.

I'm confused because when I tried to update grunt-ember-handlebars to 0.8.0, I got the error

Uncaught Error: Could not find module handlebars

thrown by the require('handlebars') line in ember-template-compiler.js:

var Handlebars = (Ember.imports && Ember.imports.Handlebars) || (this && this.Handlebars);
if (!Handlebars && typeof require === 'function') {
  Handlebars = require('handlebars');
}

For all I know it could be something else causing this problem, but I think the docs should at least be consistent with the code!

Grunt 0.4 Release

I'm posting this issue to let you know that we will be publishing Grunt 0.4 on Monday, February 18th.

If your plugin is not already Grunt 0.4 compatible, would you please consider updating it? For an overview of what's changed, please see our migration guide.

If you'd like to develop against the final version of Grunt before Monday, please specify "grunt": "0.4.0rc8" as a devDependency in your project. After Monday's release, you'll be able to use "grunt": "~0.4.0" to actually publish your plugin. If you depend on any plugins from the grunt-contrib series, please see our list of release candidates for compatible versions. All of these will be updated to final status when Grunt 0.4 is published.

Also, in an effort to reduce duplication of effort and fragmentation in the developer community, could you review the grunt-contrib series of plugins to see if any of your functionality overlaps significantly with them? Grunt-contrib is community maintained with 40+ contributors—we'd love to discuss any additions you'd like to make.

Finally, we're working on a new task format that doesn't depend on Grunt: it's called node-task. Once this is complete, there will be one more conversion, and then we'll never ask you to upgrade your plugins to support our changes again. Until that happens, thanks for bearing with us!

If you have any questions about how to proceed, please respond here, or join us in #grunt on irc.freenode.net.

Thanks, we really appreciate your work!

Am i doing something wrong?

This is the code it generates:

this["Ember"] = this["Ember"] || {};
this["Ember"]["TEMPLATES"] = this["Ember"]["TEMPLATES"] || {};

this["Ember"]["TEMPLATES"]["assets/js/views/application.hbs"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '';


  data.buffer.push("/* /templates/application.hbs\n*/\n<div class=\"main\">\n  <h1>Hello World - Precompiled</h1>\n  \n</div>");
  return buffer;

});

this["Ember"]["TEMPLATES"]["assets/js/views/test.hbs"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};



  data.buffer.push("<div>\n <label>Name:</label>\n</div>\n<div class=\"text\">\n<h1>My name is and I want to learn Ember!</h1>\n</div>");

});

But the code fails because it lists the paths as the keys instead of the templatenames... am I doing something wrong or are there an option I need to enable within the build script?

Using filesSrc in task for for files

Like Grunt tasks that use the standard files options.

ember_handlebars: {
      compile: {
        options: {
          namespace: "Ember.TEMPLATES"
        },
          files: [{
            src:[
              'frontend_src/templates/*.html',
              '!frontend_src/templates/scripts.html',
              '!frontend_src/js/templates/base.html',
              '!frontend_src/js/templates/config.html'
            ],
            dest: 'frontend_src/js/template/built/templates.js'
         }],
      }
    },

Default processPartialName should not strip `_`

The default processPartialName method strips the _ from the beginning of the filename (e.g. _user.hbs => 'user' template). Ember's partial helper expects the partial to be prepended with _

You can override it, but the default is wrong.

Use handlebars with grunt banner/footer

When I concat like this
,,,
banner: ";(function( window, Ember, undefined){ \n 'use strict';",
footer: "}( window, Ember ));"
,,,

My template wil brake. Is it a bad practise to concat and wrap ember-handlebars?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.