Gruntで始める簡単便利JS開発

対象者

Gruntを使っていない or 聞いたことがない人
IDEやエディタ経由でCoffeeScriptやSassなどのコンパイルをしている人
ブラウザの更新ボタンを押しながら開発している人
minifyとかを手動でやっている人

ちなみにVimの話じゃないです。

Gruntとは

The JavaScript Task Runner

JSでやる色々なタスクを楽に実行出来るツール

JSまわりのタスク一例

AltJS(CoffeeScript, GorillaScript, roy), Sass(SCSS), Jade(Haml)などのコンパイル
minify, concat
JS構文チェック
ドキュメント生成
テスト実行
サーバ起動
ブラウザの更新
……等々

なぜGruntか？

現時点(2014/01/13)でVer0.4.2だが多くのプロジェクトで使われている。

多岐に渡るGrunt pluginがあり色々なことが簡単に出来る。

更新を検知しての自動実行や、タスクをまとめて実行出来る。

CUIでコマンドを叩くだけで使える → 特定のエディタなどに依存しない

使い方(イメージ)

プロジェクトにGruntやGruntのpluginをnpmでインストール
Gruntfile.js(Gruntfile.coffee)を書く。
開発時にgruntコマンドを叩く
幸せになる
宝くじが当たったり、彼女が出来る

Gruntfile.js?

gruntで何をするかを決める。
JavaScript、もしくはCoffeeScriptで書く
そんなプログラム書かない(pluginの動作をJSのオブジェクトで指定するだけ)

Gruntfileの一例

module.exports = (grunt) ->
  pkg = grunt.file.readJSON("package.json")

  grunt.initConfig
    # CoffeeScriptのコンパイル
    coffee:
      development:
        files:
          'public/js/main.js': ['src/coffee/**/*.coffee']

    # ファイルに変更があればcoffeeタスクを実行
    watch:
      options:
        # ブラウザを自動更新
        livereload: true
      development:
        files: ["src/coffee/**/*.coffee"]
        tasks: ["coffee"]

    # テスト用サーバを立てる
    connect:
      development:
        options:
          port: 8080
          base: "development/"

  # package.jsonを元にgrunt pluginを全読み込み
  taskName = undefined
  for taskName of pkg.devDependencies
    grunt.loadNpmTasks taskName  if taskName.substring(0, 6) is "grunt-"

  # 「grunt」だけで実行した場合、サーバ立ててCoffeeScriptコンパイルしてファイル監視する
  grunt.registerTask "default", ["connect", "coffee", "watch"]

準備が悪かったため、今使っているGruntfileを簡単にしたものを掲載。つい先日作ったツールでのGruntfileは↓

gruntfile.coffee

セットアップ

# gruntコマンドを使えるように
npm install -g grunt-cli

# package.jsonを生成
npm init

# package.jsonに追記しつつ、gruntをインストール
npm install grunt --save-dev

# grunt pluginのインストール
npm install grunt-contrib-coffee --save-dev

プラグインの探し方

例えば、以下のサイトを見る

以下、おまけ

Grunt便利なのはわかるけど、もっと楽に出来ないの的な話

例えばYeomanを使う

grunt bower yoを組み合わせたワークフローを提供するツール
色々なパターンのWebAppの雛形を生成してくれる
つまりGruntfileを勝手に用意してくれる

ちなみに自分がYeomanを使ってない理由

いっぱい生成されてて難しそうだった(小並感)
ドンピシャなものが見つからなかった
自分でgeneratorを作れるが、まだ自分なりのベストなパターンを見つけられてないから

例えばBrunchを使う

YeomanよりのGruntみたいなツール？
Gruntよりシンプルに設定出来るらしい
自分はとりあえずGruntでお腹いっぱいなので、誰か試してください

tekkoc/gist:8416160