Alloyでjade+CoffeeScriptしてみた

こんにちは絶賛jadeブームがやってきている僕です。
今回はAlloyでjadeとCoffeeScriptを使ってやろうという意気込みでやってみました。

まずはalloyのプロジェクトの作成

1
2
3


titanium create -d . -n AlloyJC
cd AlloyJC
alloy new

必要なjadeとCoffeeScriptを入れる

1

$ npm install -g jade coffee-script

jmk(Alloy JavaScript Makefile)を作成

1

$ alloy generate jmk

jmkファイルを記述する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


task("pre:compile", function(event,logger) {
  var wrench = require("wrench"),
      fs = require("fs"),
      jade = require("jade"),
      view_root = event.dir.views,
      path = require("path"),
      coffee = require("coffee-script");

  event.alloyConfig.xml = [];
  event.alloyConfig.coffee = [];

  wrench.readdirSyncRecursive(view_root).forEach(function(view) {
    if (view.match(/.jade$/)) {
      event.alloyConfig.xml.push(view.replace(/\.jade$/, ".xml"));
      fs.writeFileSync(
        path.join(view_root,view.replace(/\.jade$/, ".xml")),
        jade.compile(fs.readFileSync(path.join(view_root,view)).toString())(event));
    }
  });

  wrench.readdirSyncRecursive(event.dir.home).forEach(function(target){
    if (target.match(/\.coffee$/)) {
      event.alloyConfig.coffee.push(target.replace(/\.coffee$/, ".js"));
      fs.writeFileSync(
        path.join(event.dir.home,target.replace(/\.coffee$/, ".js")),
        coffee.compile(fs.readFileSync(path.join(event.dir.home + "/" + target)).toString(), { bare: true }));
    }
  });
});

task("post:compile",function(event,logger){
  var fs = require("fs"),
      view_root = event.dir.views,
      path = require("path");

  event.alloyConfig.xml.forEach(function(view){
    if (!view.match(/index.xml/g)) {
      fs.unlinkSync(path.join(view_root, view));
    }
  });
  event.alloyConfig.coffee.forEach(function(target){
    fs.unlinkSync(event.dir.home + "/" + target);
  });  
});

とりあえずviewファイルをjadeで書いてみる

基本的に階層はxmlがある位置と同じでいいです。

1
2
3
4


// ./app/views/index.jade
Alloy
  Window.container
    Label#label(onClick="doClick") Hello, World

※index.xmlは消してしまうと動かなくなるっぽいので消さない方がいいかもです。

CoffeeScriptを記述してみる

1
2
3
4
5
6


// ./app/contollers/index.jade

number = 42;
doClick = -&gt; alert "yes高須 coffee script!!!"

$.index.open()

あとは実行するだけ

1

$ alloy run

以下のような感じで動作するかと思います。

@k0sukey大先生のサイトだと.coffeeファイルを「ProjectDir/app/coffees の下に、controllers / models / migrations などのディレクトリを掘って、***.coffee すれば OK」と書いてあったんですが・・・うまくいかなかったです(´；ω；｀)
僕はなにか間違っていたのかと思いつつ、まあjmkファイルを修正すればいいんじゃね？的な感に思っています。はい。
今度お会いしたときにでも聞いてみようと密かに思っていますw

で、まあすごく簡単にjade+Coffee使えるので個人的には大満足です！！！
ってかこのノリならSassとかも使えるんじゃないとか若干わくわくしていますw

参考サイト
Alloy with Jade
Alloy with CoffeeScript のお誘い
 Introduction of HERE (Titanium Moku-Moku Meeting Tokyo #5)