Ember.js、Express.js和Node.js的资产管道？

Question

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

- 将CoffeeScript转换为JavaScript。 - 使用Ember.js扩展预编译Handlebars模板。 - 连接和压缩JavaScript和CSS（仅限生产环境）。

我简要地查看了Require.js、connect-assets和convoy。前两者似乎没有提供任何简单的方法来预编译Handlebars模板，而Ember convoy integration则基于过时的Ember版本。

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

是否有任何Node.js资产编译系统可以与Ember.js正常工作？我很想拥有ember-rails的Node.js等效物。

- emk

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文档。请注意，与Less相比，在编写时，我在Stylus方面更加成功，后者似乎存在与connect-assets的问题。

其他迅速成熟的工具

自从我写这篇答案以来，我已经发现了几个其他良好的选项，可以以各种方式处理资产编译：

• ember-tools 不支持CoffeeScript或样式表（就我所知），但它处理其他资产编译，并且似乎非常受欢迎。
• brunch.io 处理各种资产编译任务，包括CoffeeScript和各种CSS预处理器。目前最有希望的插件似乎是brunch-with-ember-reloaded。

- emk

---

// Updated以下是有关编程的内容，请将其翻译为中文。只需返回翻译后的文本即可： - Simon B.

Answer 2

一个使用Grunt的好的起点示例项目： https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

- CraigTeegarden

---

谢谢！这里有一些非常好的想法，可以与grunt-ember-templates和上面提到的其他工具结合使用。但我仍然希望有一个更接近Rails使用Sprockets和ember-rails的范围的东西。 - emk

Answer 3

我开始研究如何在Ember项目中使用Assetfile的设置，这是基于peepcode教程并添加了构建工具，参见：https://github.com/pixelhandler/peepcode-ordr 至于编译coffee script，以下是一个示例... https://github.com/OC-Emberjs/peepcode-ordr-test/blob/assetmanager/Assetfile

# Assetfile
require 'rake-pipeline-web-filters'

output "public"

input "js/tests" do

  match "**/*.coffee" do
    coffee_script
    concat "tests.js"
  end

end

# vim:ft=ruby

预编译Handlebars模板，如下所示...

# Assetfile

# See Getting Started readme
# - https://github.com/livingsocial/rake-pipeline/blob/master/GETTING_STARTED.md

# See Assetfile examples:
# - https://gist.github.com/dudleyf/1557811
# - https://github.com/ryanto/ryanto.github.com/blob/master/Assetfile

require "rake-pipeline-web-filters"

output "public"

class HandlebarsFilter < Rake::Pipeline::Filter
  def generate_output(inputs, output)
    inputs.each do |input|
      # for sub-templates we can't really use '/' in a filename so using '__' instead, then replacing
      name = File.basename(input.fullpath, ".handlebars").sub(/__/, "/") 
      output.write "return Ember.TEMPLATES['#{name}'] = Ember.Handlebars.compile(#{input.read.to_json})"
    end
  end
end

input "app/templates" do
  match "**/*.handlebars" do
    filter HandlebarsFilter
    name = proc { |input| File.basename(input.fullpath, ".handlebars").sub(/__/, "/") + "_template" }
    minispade :module_id_generator => name
    concat "js/templates.js"
  end
end

# vim:ft=ruby

这是我用来开始的一个示例文件：https://github.com/hjr3/dasfd/blob/master/Assetfile

- pixelhandler

---

这是一个相当不错的方法！它需要使用 Rake，而我希望在其他全是 Node.js 的环境中避免使用它，但它确实很优雅。 - emk