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

node.js

jadeとstylusを自動でコンパイルしてくれる環境作り - 四角革命前夜をGruntでやったものです。やっとわかってきたかも。

やりたいこと

やったこと

$ npm init # Enter連打
$ npm install grunt --save-dev
$ npm install grunt-contrib-jade grunt-contrib-stylus grunt-contrib-watch --save-dev
$ npm install grunt-cli --save-dev

とりあえず、package.jsonを作ったり関連モジュールをインストールしたり。
grunt-cliは本来グローバルにインストールするんだけど、ローカルに入れても動作するのか試したくてインストールしたものなので本来は必要ないです。


続いてGruntfile.coffeeの作成。

module.exports = (grunt) ->
  grunt.initConfig
    jade:
      compile:
        files:
          'index.html': ['jade/*.jade']
    stylus:
      compile:
        files:
          'default.css': ['stylus/*.stylus']
    watch:
      files: ['jade/*.jade', 'stylus/*.stylus']
      tasks: ['jade', 'stylus']

  grunt.loadNpmTasks 'grunt-contrib-jade'
  grunt.loadNpmTasks 'grunt-contrib-stylus'
  grunt.loadNpmTasks 'grunt-contrib-watch'

  grunt.registerTask 'default', ['watch']

  return

こんな感じ。よくわからないままとりあえず
GitHub - gruntjs/grunt-contrib-pug: Compile Pug templates.
GitHub - gruntjs/grunt-contrib-stylus: Compile Stylus files to CSS.
のサンプルを見て書いてみたら合ってたっぽい。
こういう短いスクリプト書くときにはCoffeeScriptいいなーって思う。


あとはディレクトリとファイルを作って、gruntを走らせれば大丈夫。

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


ついでに、ローカルにインストールしたgrunt-cliでも実行できるのか試してみたのだけど、普通にできたみたい。まあインストール先が違うだけなのでそりゃそうだろって感じなんだけど。


package.jsonに

"scripts": {
  "start": "./node_modules/.bin/grunt"
}

を書いて、

$ npm start

で同じ事が出来たので、グローバルにgrunt-cliをインストールする事がはばかられる場合はこっちでも良いのかも。


もうちょっと頑張るとGruntを使いこなせるようになるのかなあー。


ついでに、保存したらブラウザの読み込みも自動化してくれないかなーと思って探してみたらありました。livereloadってやつみたい。
http://livereload.com/
http://met.hanatoweb.jp/archives/440/
まあそこまでしなくていいかなーと。でもリロードを沢山する場合は入れた方が良いのだと思う。


参考：Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17