StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It's possible to build a very convenient system using nothing but <a href="https://github.com/adunkman/connect-assets" rel="noreferrer">connect-assets</a>, <a href="https://github.com/dgeb/grunt-ember-templates" rel="noreferrer">grunt-ember-templates</a> and a Gruntfile. First, we need to add the following configuration to Gruntfile.coffee:</p> <pre><code>grunt.initConfig watch: ember_templates: files: 'assets/templates/**/*.hbr' tasks: 'ember_templates' ember_templates: compile: options: templateName: (sourceFile) -> sourceFile.replace(/assets\/templates\//, '').replace(/\.hbr$/, '') files: 'assets/js/templates.js': 'assets/templates/**/*.hbr' # Plugins. grunt.loadNpmTasks('grunt-contrib-watch') grunt.loadNpmTasks('grunt-ember-templates') # Default task. grunt.registerTask('default', ['ember_templates']) </code></pre> <p>Then, in our Express.js server configuration:</p> <pre><code>app.use require("connect-assets")() </code></pre> <p>In our index.html file, we need to add two lines in the appropriate places. These need be to processed through the Node.js template engine of our choice:</p> <pre><code><%- css("application") %> <%- js("application") %> </code></pre> <p>We then need to create assets/css/application.styl (which can use @import directives) and assets/js/application.coffee (which can use "#= require foo" comments). </p> <p>To use this system, first run:</p> <pre><code>grunt </code></pre> <p>To keep the template.js file permanently up to date, run:</p> <pre><code>grunt watch </code></pre> <p>For everything else, see the <a href="https://github.com/adunkman/connect-assets" rel="noreferrer">connect-assets documentation</a>. Note that I had more luck with Stylus than with Less, which appears to have issues with connect-assets at the time of writing.</p> <h2>Other tools which are maturing rapidly</h2> <p>Since I wrote this answer, I've come across several other good options that handle asset compilation in various ways:</p> <ul> <li><a href="https://github.com/rpflorence/ember-tools" rel="noreferrer">ember-tools</a> doesn't support CoffeeScript or stylesheets (as far as I can tell), but it handles other asset compilation, and it seems quite popular.</li> <li><a href="http://brunch.io/" rel="noreferrer">brunch.io</a> handles a wide range of asset compilation tasks, including CoffeeScript and various CSS preprocesors. The most promising plugin appears to be <a href="https://github.com/gcollazo/brunch-with-ember-reloaded" rel="noreferrer">brunch-with-ember-reloaded</a> at the moment.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload