node.js - Ember.js、Express.js 和 Node.js 的 Assets 管道？

Question

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

• 将 CoffeeScript 转换为 JavaScript。
• 使用 Ember.js 扩展预编译 Handlebars 模板。
• 连接和缩小 JavaScript 和 CSS(仅限生产)。

我已经简要了解了 Require.js，connect-assets和车队。前两个似乎没有提供任何简单的方法来预编译 Handlebars 模板，而 Ember convoy integration基于旧版本的 Ember。

ember-runner有一段时间没有更新了。 grunt-ember-templates看起来像是将 Ember 模板编译为单个 *.js 文件的合理方法，因此这可能是更大解决方案的构建 block 。

是否有任何 Node.js Assets 编译系统仅适用于 Ember.js？我很想拥有一个相当于 ember-rails 的 Node.js .

Answer 1

只使用 connect-assets 就可以构建一个非常方便的系统。 , grunt-ember-templates和一个 Gruntfile。首先，我们需要在 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'])

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

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

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

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

然后我们需要创建 assets/css/application.styl(可以使用 @import 指令)和 assets/js/application.coffee(可以使用“#= require foo”注释)。

要使用这个系统，首先运行:

grunt

要使 template.js 文件永久保持最新，请运行:

grunt watch

有关其他内容，请参阅 connect-assets documentation .请注意，我使用 Stylus 比使用 Less 更幸运，这在撰写本文时似乎存在连接 Assets 问题。

其他正在迅速成熟的工具

自从我写下这个答案后，我遇到了其他几个以各种方式处理 Assets 编译的好选择:

• ember-tools不支持 CoffeeScript 或样式表(据我所知)，但它处理其他 Assets 编译，而且看起来很流行。
• brunch.io处理范围广泛的 Assets 编译任务，包括 CoffeeScript 和各种 CSS 预处理器。最有前途的插件似乎是 brunch-with-ember-reloaded目前。