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

Question

我正在构建一个使用Ember.js作为后端的Express.js应用程序。现在，我单独加载所有的*.js文件，并将我的把手模板存储在我的HTML中。我喜欢用一个功能齐全的“资产线”来代替，类似于Rails中的那种。在一个完美的世界里，这将支持：

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

我简要地看了一下Require.js、连接资产和护航车队。前两者似乎没有提供任何简单的方式来预编译车把模板，而且Ember车队整合是基于过时版本的Ember。

余烬流道已经有一段时间没有更新了。格朗特-成员-模板看起来是将Ember模板编译成单个*.js文件的合理方法，因此这可能是一个更大的解决方案的构建块。

是否有任何Node.js资产编译系统只与Ember.js一起工作？我想要一个相当于Node.js的余烬-钢轨。

Answer 1

只使用连接资产、格朗特-成员-模板和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") %>

然后，我们需要创建资产/css/application.styl(它可以使用@import指令)和资产/js/application.咖啡(它可以使用"#= require foo“注释)。

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

grunt

要使template.js文件永久更新，请运行：

grunt watch

有关其他内容，请参见连接-资产文档。请注意，我在Stylus上的运气比小得多，在撰写本报告时，这似乎与连接资产有关。

其他正在迅速成熟的工具

自从我写了这个答案以来，我遇到了几个其他好的选项，它们以各种方式处理资产编译：

• ember工具不支持CoffeeScript或样式表(据我所知)，但它处理其他资产编译，而且它似乎相当流行。
• brunch.io处理广泛的资产编译任务，包括CoffeeScript和各种CSS预处理程序。目前最有希望的插件似乎是早午餐-有余烬-重新装载。

Answer 2

使用Grunt的一个很好的起点示例项目：

https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

Answer 3

我开始为在ember项目中使用资产文件进行设置，这是基于peepcode教程并添加了构建工具，请参阅：https://github.com/pixelhandler/peepcode-ordr

至于编译咖啡脚本，这就是一个例子.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

并预编译车把模板.

# 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