12

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

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

我简要介绍了 Require.js、connect-assets和 convoy。前两个似乎没有提供任何简单的方法来预编译 Handlebars 模板，并且Ember convoy 集成基于 Ember 的过时版本。

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

是否有任何与 Ember.js 一起工作的 Node.js 资产编译系统？我很想拥有一个相当于ember-rails的Node.js。

4

3 回答 3

8

只使用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 文档。请注意，我使用 Stylus 比使用 Less 更幸运，这在撰写本文时似乎存在连接资产的问题。

其他快速成熟的工具

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

  • ember-tools不支持 CoffeeScript 或样式表（据我所知），但它处理其他资产编译，而且它似乎很受欢迎。
  • brunch.io处理范围广泛的资产编译任务，包括 CoffeeScript 和各种 CSS 预处理器。目前最有前途的插件似乎是brunch-with-ember-reloaded。
于 2013-03-11T18:28:07.893 回答
6

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

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

于 2013-03-08T20:34:57.343 回答
1

我开始着手在 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

于 2013-03-09T17:05:50.127 回答