Ember.js，Express.js和Node.js的资产管道？ [英] Asset pipeline for Ember.js, Express.js and Node.js?

问题描述

我正在使用Express.js作为后端构建一个Ember.js应用程序。现在，我单独加载所有的* .js文件，并将我的Handlebars模板存储在我的HTML文件中。我喜欢用类似于Rails中的一个完整的资产管道替换。在完美的世界中，这将支持：

• 将CoffeeScript转换为JavaScript


• 预编译使用Ember.js扩展名的Handlebars模板。


• 连接并缩小JavaScript和CSS（仅限生产）。

$ b $我简要地看了一下Require.js，连接资产和车队。前两个似乎没有提供任何简单的方法来预编译Handlebars模板， Ember车队集成< a>是基于Ember的过期版本。

ember-runner 尚未更新一段时间。 grunt-ember-templates 看起来像是将Ember模板编译为单个*的合理方式。 js文件，所以这可能是一个更大的解决方案的构建块。

是否有任何Node.js资源编译系统，只适用于Ember.js？我希望有一个相当于 ember-rails 的Node.js。

解决方案

有可能构建一个非常方便的系统，除了连接资产， grunt-ember-templates 和Gruntfile。首先，我们需要将以下配置添加到Gruntfile.coffee中：

  grunt.initConfig 
 watch：
 ember_templates：
文件：'assets / templates / ** / *。hbr'
任务：'ember_templates'
 ember_templates：
编译：
选项：
 templateName：（sourceFile） - > 
 sourceFile.replace（/ assets\ / templates\ //，''）.replace（/\.hbr$/，''）
文件：
'assets / js /templates.js'：'assets / templates / ** / *。hbr'
 
＃插件。 
 grunt.loadNpmTasks（'grunt-contrib-watch'）
 grunt.loadNpmTasks（'grunt-ember-templates'）
 
＃默认任务。 
 grunt.registerTask（'default'，['ember_templates']）
  

然后，在我们的Express.js服务器配置：

  app.use require（connect-assets）（）
  

在我们的index.html文件中，我们需要在适当的地方添加两行。这些需要通过我们选择的Node.js模板引擎进行处理：

 <％ -  css（application） ％GT; 
<％ -  js（application）％> 
  

然后我们需要创建资源/ css / application.styl（可以使用@import指令）和assets / js / application.coffee（可以使用＃= require foo注释）。

要使用此系统，请先运行：

  grunt 
  

为了使template.js文件永久保持最新，请运行：

  grunt watch 
  

请参阅连接资产文档。请注意，我在Stylus上的运气比Less更少，在写作时似乎与连接资产有关。

快速成熟的其他工具h2>

自从我写了这个答案之后，我遇到了许多其他很好的选择，可以通过各种方式处理资产编译：

• ember-tools 不支持CoffeeScript或样式表（尽可能远我可以告诉），但它处理其他资产编制，似乎很受欢迎。


• brunch.io 处理各种资源编译任务，包括CoffeeScript和各种CSS preprocesors。最有希望的插件似乎在此刻早午餐 - 重新加载 。

I'm building an Ember.js application using Express.js as the backend. Right now, I load all my *.js files individually and store my Handlebars templates in my HTML file. I like to replace with a full-fledged "asset pipline" similar to the one in Rails. In a perfect world, this would support:

• Convert CoffeeScript to JavaScript.
• Pre-compile Handlebars templates using the Ember.js extensions.
• Concatenate and minify JavaScript and CSS (production only).

I've looked briefly at Require.js, connect-assets and convoy. The first two don't seem to offer any easy way to precompile the Handlebars templates, and the Ember convoy integration is based on an out-of-date version of Ember.

ember-runner hasn't been updated for a while. grunt-ember-templates looks like a reasonable way to compile Ember templates to a single *.js file, so that might be a building block of a larger solution.

Is there any Node.js asset compilation system which Just Works with Ember.js? I'd love to have a Node.js equivalent of ember-rails.

解决方案

It's possible to build a very convenient system using nothing but connect-assets, grunt-ember-templates and a Gruntfile. First, we need to add the following configuration to Gruntfile.coffee:

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'])

Then, in our Express.js server configuration:

app.use require("connect-assets")()

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:

<%- css("application") %>
<%- js("application") %>

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).

To use this system, first run:

grunt

To keep the template.js file permanently up to date, run:

grunt watch

For everything else, see the connect-assets documentation. Note that I had more luck with Stylus than with Less, which appears to have issues with connect-assets at the time of writing.

Other tools which are maturing rapidly

Since I wrote this answer, I've come across several other good options that handle asset compilation in various ways:

• ember-tools doesn't support CoffeeScript or stylesheets (as far as I can tell), but it handles other asset compilation, and it seems quite popular.
• brunch.io handles a wide range of asset compilation tasks, including CoffeeScript and various CSS preprocesors. The most promising plugin appears to be brunch-with-ember-reloaded at the moment.

这篇关于Ember.js，Express.js和Node.js的资产管道？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！