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护航集成基于Ember的过时版本.

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

是否有任何与Ember.js一起使用的Node.js资产编译系统？我很想有一个Node.js的等效烬护栏.

Answer 1

除了连接资产,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预处理器.最有希望的插件似乎是目前正在重新加载的早午餐.

Answer 2

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

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