Целевой трубопровод для Ember.js, Express.js и Node.js?

Ответ 1

Возможно построить очень удобную систему, используя только connect-assets, grunt-ember-templates и файл Grunt. Во-первых, нам нужно добавить следующую конфигурацию в 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.coffee(которые могут использовать комментарии "# = require foo" ).

Чтобы использовать эту систему, сначала запустите:

grunt

Чтобы файл template.js постоянно обновлялся, запустите:

grunt watch

Для всего остального, смотрите документацию по подключаемым активам. Обратите внимание, что мне больше повезло с Stylus, чем с Less, у которого, похоже, есть проблемы с connect-assets на момент написания.

Другие инструменты, которые быстро созревают

Поскольку я написал этот ответ, я столкнулся с несколькими другими хорошими вариантами, которые обрабатывают компиляцию активов различными способами:

• ember-tools не поддерживает CoffeeScript или таблицы стилей (насколько я могу судить), но он обрабатывает компиляцию других активов, и это кажется довольно популярным.
• brunch.io обрабатывает широкий спектр задач компиляции активов, включая CoffeeScript и различные препроцессоры CSS. Наиболее перспективным плагином является brunch-with-ember-reloaded на данный момент.

Ответ 2

Хороший исходный пример проекта с использованием Grunt:

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

Ответ 3

Я начал работать над установкой для использования Assetfile с проектом ember, это основано на учебнике peepcode и добавлено инструменты сборки: https://github.com/pixelhandler/peepcode-ordr

Что касается компиляции кофе 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