Webサイト構築にはGruntが便利で盛り上がりを見せています！ Grunt導入までの紹介記事もかなり見かけるようになり他の人はどんなタスクを走らせてるのかとても気になる昨今。 まずは自分が最近使った設定をメモがてらに晒してみようと思います。

ディレクトリ

プロジェクトによって設定は変わりますが、ちょうど触っていた、WordPressテーマを元に紹介していきます。
基本ディレクトリはこんな感じです。

gruntfile.coffee

gruntfileを書くならcooffeeScriptがスッキリしていてかなり見やすいです。 ブラケットを沢山書かなくていいのでとてもオススメ。

module.exports = (grunt) ->
  grunt.initConfig

    csslint:
      src: '*.css'
      options:
        'unqualified-attributes': false
        'outline-none': false
        'compatible-vendor-prefixes': false
        'box-sizing': false
        'box-model': false #whidthを指定したものにpaddingで警告
        'unique-headings': false
        'font-sizes': false #フォントサイズ指定数が多いと警告
        'namespaced':false
        'qualified-headings':false

    jshint:
      src: 'js/main.js'
      option:
        curly: true #ループや条件分岐の{}を省略しない
        eqeqeq: true #厳密比較を行う
        unused: true #使っていない変数の宣言を禁止する
        undef: true #グローバル変数へのアクセスを禁止
        browser: true #ブラウザ用グローバル変数は許可
        devel: true #consoleやalertの使用を許可する
        latedef: true #定義する前に変数を使用することを禁止
        globals:
          jQuery: true

    compass:
      dist:
        options:
          config: 'config.rb'

    watch:
      cssdev:
        files: 'sass/*.scss'
        tasks: [
          'compass'
          'csslint'
        ]

      jsdev:
        files: 'js/*.js'
        tasks: 'jshint'

    # http://localhost:35729/ にアクセスしてlivereload
    livereloadx:
      static: true
      dir: '.'
      filter: [
        {
          type: 'include'
          pattern: '*.{html,php,css,js}'
        }
        {
          type: 'exclude'
          pattern: '*'
        }
      ]

  pkg = grunt.file.readJSON 'package.json'
  for taskName of pkg.devDependencies
    grunt.loadNpmTasks taskName  if taskName.substring(0, 6) is "grunt-"
  grunt.loadNpmTasks 'livereloadx'

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

基本的にwachでcompassとhint系を走らせてるだけです。 livereloadxは拡張機能無しでブラウザをリロードしてくれるのでIEなどでも手軽に使えます。

package.json

{
  "name": "mochilog",
  "version": "0.0.0",
  "description": "mochi Blog",
  "main": "Gruntfile.coffee",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "author": "mochi",
  "license": "MIT",
  "devDependencies": {
    "grunt": "^0.4.3",
    "grunt-contrib-watch": "^0.5.3",
    "grunt-contrib-compass": "^0.7.2",
    "grunt-contrib-csslint": "^0.2.0",
    "grunt-contrib-jshint": "^0.9.2",
    "livereloadx": "^0.3.2"
  }
}

参考サイト

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

快適なライブリロード環境をつくる（Grunt + LiveReloadX）