Alloyでjade+CoffeeScript+stylusしてみた

March 14, 2013,
tags: titanium alloy coffeescript jade stylus


このエントリーをはてなブックマークに追加

Alloyでjade+CoffeeScriptしてみた」の続きです。

jade+CoffeeScriptなら自然とstylusにしてみたくなるわけですw

基本的なインストール等は前回の記事を見てください。

続き的なあれ

stylusのインストール

$ npm install stylus

jmkの設定

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

  event.alloyConfig.coffee = [];
  event.alloyConfig.jade = [];
  event.alloyConfig.stylus = [];

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

  // coffee-script
  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 }));
    }
  });

  // stylus
  wrench.readdirSyncRecursive(event.dir.styles).forEach(function(target){
    if (target.match(/\.styl$/)) {
      event.alloyConfig.stylus.push(target.replace(/\.styl$/, ".tss"));
      fs.writeFileSync(path.join(event.dir.styles, target.replace("styl", "tss")), compileTSS(event.dir.styles, target));
    }
  });

  var compileTSS = function(root,target) {
    var data = fs.readFileSync(path.join(root,target), 'utf-8'),
        tss;
    stylus.render(data,function(err,css){
        css = css.replace(/;/gi, ",");
        css = css.replace(/\}/gi, "},");
        css = css.replace(/(.+?).?\{/gi, "\"$1\": {");
        css = css.replace(/,\n\},/gi, "\n\}");
        css = css.replace(/\}\n\"/gi, "\},\n\"");
        css = css.replace(/['"]expr(.+?)['"]/gi, "expr$1");
        css = css.replace(/['"]Ti(.+?)['"]/gi, "Ti$1");
        css = css.replace(/['"]Titanium(.+?)['"]/gi, "Titanium$1");
        tss = css;
    });
    return tss;
  }



});

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

  if (event.alloyConfig.deploytype != 'development') {
    event.alloyConfig.jade.forEach(function(target){
      if (!target.match(/index.xml/g)) fs.unlinkSync(path.join(event.dir.views, target));
    });
    event.alloyConfig.coffee.forEach(function(target){
      fs.unlinkSync(event.dir.home + "/" + target);
    });
    event.alloyConfig.stylus.forEach(function(target){
      fs.unlinkSync(event.dir.styles + "/" + target);
    });
  }
});

適当にstylusで書いてみる

app/style/index.styl

.container
  backgroundColor:"black"

Label
  width:'Ti.UI.SIZE'
  height:'Ti.UI.SIZE'
  color: "#00B7FF"

これであとは気持ちよくstylusを書きまくればいいですね!

参考
Ti.tokyo.GIG Titanium 新年会 2013 に行ってきました

comments powered by Disqus