GruntでCoffeeScriptを自動コンパイルするコピペ

さいしょに

「astronaughts/grunt-tishadow · GitHub」を触りたいのですが、
「Grunt」をほぼ触ったこと無かったので練習です。

詳しくみたいと言う人は「@masapla」さんの
Grunt v0.4.0 インストール方法 | masaplabs を見た方が良いです。

Gruntをインストールする

※ 古いGruntをインストールしている
（「/usr/local/lib/node_modules/grunt」フォルダがある）場合は削除する

$ sudo npm uninstall -g grunt

　
# Gruntをインストール

$ sudo npm install -g grunt-cli

サンプルプロジェクトを作成する

# フォルダを作成

$ mkdir ~/Desktop/grunt-test
$ cd ~/Desktop/grunt-test

必要なファイル

「package.json」
「Gruntfile.js」または「Gruntfile.coffee」

package.json を作成

$ npm init

　
または「package.json」内容サンプル

{
  "name": "grunt-test",
  "version": "0.0.0"
}

必要なモジュールをインストールする

$ sudo npm install grunt --save-dev
$ sudo npm install grunt-contrib-watch --save-dev
$ sudo npm install grunt-contrib-coffee --save-dev

# 「--save-dev」を付けておくと「package.json」に追記される。

{
  "name": "grunt-test",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.4.4",
    "grunt-contrib-coffee": "~0.7.0"
  }
}

Gruntfile.coffee を作成

例１）
「coffee」フォルダ内の「.coffee」ファイルが変更されたら「Resources」に出力される

module.exports = (grunt)->
  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'
    watch:
      files: ['coffee/**/*.coffee']
      tasks: 'coffee'
    coffee:
      compile:
        files: [
          expand: true
          cwd: 'coffee/'
          src: ['**/*.coffee']
          dest: 'Resources/'
          ext: '.js'
        ]

  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.registerTask 'default', ['watch']
  return

例２）
「coffee」フォルダ内の「.coffee」ファイルが変更されたら「Resources」に出力される
「spec」フォルダ内の「.coffee」ファイルが変更されたら「Resources/spec」に出力される

書いたけど、「例１）」の奴でフツーに「coffee」フォルダ内に「spec」フォルダ作れば良いだけでした。

module.exports = (grunt)->
  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'
    watch:
      coffee:
        files: ['coffee/**/*.coffee']
        tasks: 'coffee:app'
      coffee_spec:
        files: ['spec/**/*.coffee']
        tasks: 'coffee:spec'
    coffee:
      app:
        files: [
          expand: true
          cwd: 'coffee/'
          src: ['**/*.coffee']
          dest: 'Resources/'
          ext: '.js'
        ]
      spec:
        files: [
          expand: true
          cwd: 'spec/'
          src: ['**/*.coffee']
          dest: 'Resources/spec/'
          ext: '.js'
        ]

  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.registerTask 'default', ['watch']
  return

タスクを起動する

$ grunt
Running "watch" task
Waiting...

サンプルファイルを作成

「coffee」フォルダ内に「.coffee」ファイルを作成・もしくは更新する。

$ mkdir coffee
$ touch coffee/xxx.coffee

なんかできたよー。

Web系Tipsを適当につづるBlog.