Question

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

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

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

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

是否有任何与Ember.js一起使用的Node.js资产编译系统？我希望Node.js等同于ember-rails。

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更幸运，在撰写本文时，这似乎与连接资产有关。

其他快速成熟的工具

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

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

Answer 2

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

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

Answer 3

我开始使用带有ember项目的Assetfile进行设置，这是基于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

并预处理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

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

3 个答案:

其他快速成熟的工具