Question

I’m building a project with PHP for server side and Ember.js for the client side.

i’ve wrote all scripts in CoffeScript, templates in .hbs files and .scss files for the styles, for now i’m using rake-pipeline for compiling all, but i have a couple of problems:

• How to organize the dependencies
• How to include scripts in other files
• How to determine the order of the scripts

for now i have a hardcode AssetFile for sort the scripts in the final .js file but my app become more complex and some files need grows and split into more files but i have the problems before mention.

AssetFile

output BUILD_DIR
input SRC_DIR do
  match '**/*.handlebars' do
    handlebars :precompile => true
    concat '0.js'
  end

  match '**/lib/*.coffee' do
    coffee_script
    concat '1.js'
  end
  match '**/app.coffee' do
    coffee_script
    concat '2.js'
  end
  match '**/controller/*.coffee' do
    coffee_script
    concat '3.js'
  end
end

my project layout is like

Resources/
   assets/
      js/         # Are like my vendors (jquery, ember, etc...)
      images/     # i copy this without process
      styles/     # Here are .scss and .sass files
   scripts/
      templates/  # It's a directory tree with files .hbs 
      controller/ # Dirs with arbitrary names
      lib/
      ...
      main.coffee # main point, ej: App = Rkmax.App.create();App.initialize();

you can see the main trouble is give a correct order when concat .js files generate by coffee compiler, I’ve seen some projects in rails and using the sentence requireinside .coffe files but do not know how to make rake-pipeline understand this sentence.

Answer 1

After searching for a while. I decided to use instead of rakepipeline, Sprockets has a similar system to compile everything you need

Gemfile

gem 'sprockets'
gem 'sprockets-sass'
gem 'sass'
gem 'coffe-script'

Rakefile

require 'sprockets'
require 'logger'
require 'fileutils'
require 'pathname'

task :compile => :clean do
    sprockets = Sprockets::Environment.new(ROOT)

    sprockets.append_path SOURCE_DIR.to_s

    %w( app.js vendor.s template.js ).each do |bundle|
        assets = sprockets.find_asset(bundle)
        ext = bundle.split(".")[1]
        name = assets.pathname.basename(assets.pathname.extname)
        FileUtils.mkpath BUILD_DIR.join(ext)
        assets.write_to BUILD_DIR.join(ext, "#{name}.#{ext}")    
    end
end

Sprockets has "Directive Processor" like

• require
• include
• require_self

they let me organize dependencies easy. the only thing was that it did not process .handlebars default but i wrote a simple handlebars_template.rb

handlebars_template.rb

require 'tilt'
require 'json'

module Sprockets
  class HandlebarsTemplate < Tilt::Template
    self.default_mime_type = 'application/javascript'    

    def prepare
    end

    # Compile template data
    def evaluate(scope, locals, &block)
      "Ember.TEMPLATES['#{scope.logical_path.split("/")[1..-1].join("/")}']=Ember.Handlebars.compile(#{data.to_json});\n"
    end
  end
end

register in the right place and voila! process my templates

register_engine 'handlebars', ::Sprockets::HandlebarsTemplate
register_engine 'hbs',        ::Sprockets::HandlebarsTemplate