12

バックエンドとして Express.js を使用して Ember.js アプリケーションを構築しています。現在、すべての *.js ファイルを個別に読み込み、Handlebars テンプレートを HTML ファイルに保存しています。私は、Rails のものに似た本格的な「アセット パイプライン」に置き換えるのが好きです。完璧な世界では、これは以下をサポートします。

  • CoffeeScript を JavaScript に変換します。
  • Ember.js 拡張機能を使用して、Handlebars テンプレートをプリコンパイルします。
  • JavaScript と CSS を連結して縮小します (本番のみ)。

Require.js、connect-assets、およびコンボイについて簡単に説明しました。最初の 2 つは、Handlebars テンプレートをプリコンパイルする簡単な方法を提供していないようです。また、Ember コンボイの統合は、古いバージョンの 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 ファイルでは、適切な場所に 2 行を追加する必要があります。これらは、選択した Node.js テンプレート エンジンを介して処理する必要があります。

<%- css("application") %>
<%- js("application") %>

次に、assets/css/application.styl (@import ディレクティブを使用できる) と assets/js/application.coffee ("#= require foo" コメントを使用できる) を作成する必要があります。

このシステムを使用するには、まず次を実行します。

grunt

template.js ファイルを永続的に最新の状態に保つには、次を実行します。

grunt watch

それ以外については、connect-assets のドキュメントを参照してください。執筆時点では connect-assets に問題があるように見える Less よりも Stylus の方が運がよかったことに注意してください。

急速に成熟しているその他のツール

この回答を書いて以来、さまざまな方法でアセットのコンパイルを処理する他のいくつかの優れたオプションに出くわしました。

  • ember-toolsは (私が知る限り) CoffeeScript やスタイルシートをサポートしていませんが、他のアセットのコンパイルを処理しており、非常に人気があるようです。
  • brunch.ioは、CoffeeScript やさまざまな CSS プリプロセッサなど、幅広いアセット コンパイル タスクを処理します。現時点で最も有望なプラグインは、branch-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 に答える