Expressの既存アプリをStylusに移行してみる

Stylusはスタイルシートのテンプレートエンジンです。変数や繰り返し、インポートなどをスタイルシートに組み込むことができます。便利！
Nodeでは、Expressでひな形を生成するとき、オプションを指定すると一緒についてきます。

$ express stylus_example -c stylus
$ cd stylus_example && npm install

Stylusのファイルは、public/stylesheet/style.styl にあります。

body  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serifa
  color: #00B7FF

Nodeを起動してStylusの出力結果を確認します。

$ node app.js
Express server listening on port 3000 in development mode

http://localhost:3000/stylesheets/style.css にアクセスしてスタイルシートを確認します。
出力結果

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00b7ff;
}

Node起動時にStylusがstyle.stylファイルを解析し、style.cssに出力するという仕組みです。

既存アプリをStylusへ移行する

すでにExpressで作成済みのウェブアプリケーションでStylusを使えるようにするには、以下のように設定することで使用できます。

$ npm install stylus
$ vim app.js

app.configure(function(){
    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    // 以下の一行を追加
    app.use(require('stylus').middleware({ src: __dirname + '/public' }));
    app.use(app.router);
    app.use(express.static(__dirname + '/public')); 
});

$ vim public/stylesheets/styles.styl

body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
  color: #00B7FF

連絡帳アプリをStylusに移行する

前回のエントリーで作成した連絡帳アプリにStylusを適用してみます。
Stylusをグローバルインストールします。

$ npm install -g stylus
/usr/local/bin/stylus -> /usr/local/lib/node_modules/stylus/bin/stylus
stylus@0.22.4 /usr/local/lib/node_modules/stylus
├── growl@1.1.0
├── mkdirp@0.0.7
└── cssom@0.2.1

ローカルにもインストールします。

$ npm install stylus
stylus@0.22.4 ./node_modules/stylus 
├── growl@1.1.0
├── mkdirp@0.0.7
└── cssom@0.2.1

app.jsを修正します。

app.configure(function(){
    ...
    app.use(require('stylus').middleware({ src: __dirname + '/public' }));
    ...
});

既存のスタイルシートをStylusに変換します。

$ stylus --css public/stylesheets/style.css public/stylesheets/style.styl
$ vim public/stylesheets/style.styl

style.styl

body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serifa
  color: #00B7FF

既存のCSSファイルを削除します。

$ rm public/stylesheets/style.css

アプリを起動して動作を確認します。

これで移行が完了です。Node起動後、public/stylesheets/style.css ファイルが出力されていると思います。
スタイルシートが複数ある場合、すべてのCSSファイルに対して stylus --css hoge.css hoge.styl を指定します。

スタイルを修正してみます。

style.styl

...
table
    border-collapse collapse
    width 100%
td
    border 1px solid #999
    padding 2px

こんな感じで簡単にかけます。
style.cssの出力はこんな感じです。

...
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #999;
  padding: 2px;
}

かなり綺麗に出力されています。