Grunt+CoffeeScript+Jadeの開発環境を整えてみる

Gruntのインストール

npm install -g grunt-cli

Gruntプラグインのインストール

適当なディレクトリでnpm initを実行してpackage.jsonを生成

以下をインストール

npm install grunt grunt-contrib-coffee grunt-contrib-jade jit-grunt grunt-este-watch -S

• grunt-contrib-coffee CoffeeScriptに必要
• grunt-contrib-jade　Jadeに必要
• jit-grunt　通常だとGruntfileにgrunt.loadNpmTasksを全プラグイン分書かなきゃいけないけどそれを自動化
• grunt-este-watch .coffeeと.jadeに更新があったら自動でコンパイル

各ディレクトリの作成

そのディレクトリ上に「www」ディレクトリを作成し、更にその中に「src」 「js」 「jade」ディレクトリも作成

Gruntfile.coffee

package.jsonと同じディレクトリにGruntfile.coffeeを作成

module.exports = (grunt) ->
    require('jit-grunt')(grunt)
    grunt.initConfig
        coffee:
            compile:
                files:[
                    expand: true
                    cwd: 'www/src/'
                    src: '**/*.coffee'
                    dest: 'www/js/'
                    ext: '.js'
                ]
        jade:
            compile:
                files:[
                    expand: true
                    cwd: "www/jade/"
                    src: "**/*.jade"
                    dest: "www"
                    ext: ".html"
                ]
                options:
                    pretty: true
        esteWatch:
            options:
                dirs: ['www/jade/**/', 'www/src/**/']
            'coffee': (filepath) ->
                'coffee:compile'
            'jade': (filepath) ->
                'jade:compile'
    
    grunt.registerTask 'default', ['esteWatch']
    grunt.registerTask 'c', ['jade', 'coffee']

階層は以下の通り

|-- Gruntfile.coffee
|-- package.json
`-- www
    |-- *****.html
    |-- jade
    |   `-- *****.jade
    |-- js
    |   `-- *****.js
    `-- src
        `-- *****.coffee