jadeとstylusを自動でコンパイルしてくれる環境作り

node.js

HTMLとCSS書きたいなーとたまに思うのですが、Vimでの手書きもなかなか辛いものです。
2013年にもなって小さいくもないページのタグを手書きは避けたいと考えていたところ、jadeとstylusとかあったことを思い出したので（HamlとSassじゃないところが我ながらNoder的というか）その環境の作り方を考えてみたのでした。

やりたいこと

やったこと

最初にnpm initでpackage.jsonを作ります。値は何でも良いので全部Enterで。

$ npm init


jadeとstylusをインストールします。

$ npm install jade stylus


package.jsonに以下のscriptsを追加します。

"scripts": {
  "jade": "./node_modules/.bin/jade -w ./jade/*.jade -o ./out &",
  "stylus": "./node_modules/.bin/stylus -w ./stylus/*.stylus -o ./out &",
  "start": "npm run-script jade && npm run-script stylus"
}

もうこの辺で大分無理があるのでは……と思ってきてましたが、まあ……


ディレクトリやファイルを作ります。

$ mkdir jade stylus out
$ touch jade/index.jade stylus/index.stylus


後は監視をします。

$ npm start


これでindex.jadeやindex.stylusを編集・保存すると./outにファイルが出力されます。
……が、どう考えてもGrunt使った方が良いと思う。プロセスもkillしないといけないし。

まとめ

Grunt嫌ってないで使いましょう。