Webサイト制作に便利なGruntプラグイン（その1）

#Webサイト制作に便利なGruntプラグイン（その1）

これからGruntを始める同僚の参考になればいいなぁ、と思い書きました。今回は基本のGrunt-contribプラグインにターゲットを絞り、その中で僕がWebサイト制作で特に利用することの多いプラグインを紹介しています。

簡単な設定例も併記しましたが、たいていはそれぞれのプラグインでより多くのオプションが用意されており、また僕自身もそれらの機能を十分把握していない可能性もあるので、実際に使用する際には各々の説明ページを参照してください。

また、grunt-contrib以外で利用しているその他のGruntプラグインは、別記事としていくつか紹介しています。

##Gruntにやってもらうと便利な作業

さまざまな用途に利用できますが、Web制作では以下のような機能が便利に使えるのではないでしょうか。

【開発時】

• 任意のファイルを更新すると、ブラウザを自動で更新（ライブリロード）

• CSSスプライトの生成（スプライト画像の自動生成とCSSの書き換え）

• SassやLess、Stylusを監視し、変更があれば自動的にCSSにコンパイル

• CoffeeScriptやTypeScriptを監視し、変更があれば自動的にJavaScriptにコンパイル

• JadeやHandlebarsやUnderscoreテンプレートを監視し、変更があれば自動的にHTMLにコンパイル

• JavaScriptやHTML、CSSの構文チェック

【リリース時】

• 開発用のソースをリリース用にコピー。またリリース時に不要なファイルを削除。

• ファイルの内容の一部を書き換え

• JavaScriptやCSSの連結、ミニファイ（難読化）

##Grunt-contrib?

grunt-contrib
Gruntの公式プラグインのセットです。汎用的なタスクを実行してくれるさまざまなプラグインが用意されています。これからGruntを使ってみようと思う方は、まずはこれらのプラグインの中から、自分の仕事で利用できそうなものを使ってみるといいかと思います。

Grunt-contribには以下の25個のプラグインが含まれています（2014年3月19日現在）。以下にそれぞれのタスクの概要をリストしています。（テスト開発関連のプラグインは、言い回しが不適切かもしれません。すいません..。）

• grunt-contrib-clean* ファイルやフォルダを削除します。

• grunt-contrib-coffee CoffeeScriptファイルをJavaScriptにコンパイルします。

• grunt-contrib-compass* Compassを利用しSassをCSSにコンパイルします。

• grunt-contrib-compress ファイルやフォルダを圧縮します。

• grunt-contrib-concat* 複数のファイルを1つに結合します。

• grunt-contrib-connect* Webサーバへの接続を開始します。

• grunt-contrib-copy* ファイルやフォルダをコピーします。

• grunt-contrib-cssmin* CSSファイルを連結、圧縮します。

• grunt-contrib-csslint CSSファイルのリントを実行します。

• grunt-contrib-handlebars Handlebars形式のテンプレートをJavaScriptテンプレート(JST)にプリコンパイルします。

• grunt-contrib-htmlmin HTMLをミニファイします。

• grunt-contrib-imagemin PNG、JPEG、GIF画像を圧縮します。

• grunt-contrib-jade JadeテンプレートをHTMLファイルにプリコンパイルします。

• grunt-contrib-jasmine JasmineのspecをPhantomJS経由でヘッドレスに実行します。

• grunt-contrib-jshint* JavaScriptをJSHintで検証します。

• grunt-contrib-jst Underscore形式のテンプレートをJavaScriptテンプレート(JST)にプリコンパイルします。

• grunt-contrib-less LESSファイルをCSSにコンパイルします。

• grunt-contrib-nodeunit Nodeunitによるユニットテストを実行します。

• grunt-contrib-qunit QUnitによるユニットテストをヘッドレスのPhantomJSインスタンス内で実行します。

• grunt-contrib-requirejs RequireJSプロジェクトをr.jsにより最適化します。

• grunt-contrib-sass SassをCSSにコンパイルします。

• grunt-contrib-stylus StylusファイルをCSSにコンパイルします。

• grunt-contrib-uglify* JavaScriptをUgilifyJSにより難読化します。

• grunt-contrib-watch* ファイルを監視し、追加/変更/削除があった場合に、指定されたタスクを実行します。

• grunt-contrib-yuidoc YUIDocドキュメントをコンパイルします。

以下、この記事では上記のリストにて*を付記しているプラグインについて簡単に紹介しようと思います。

grunt-contrib-clean

grunt-contrib-clean*

【 設定例 】
releaseディレクトリを削除します。（開発用ファイルからリリース用のファイルを生成する前に、このタスクを使い、現在のリリース用ファイルをまとめて削除しておくと安心です。またリリース用のファイル群に不要なソースが存在している場合は、このプラグインで削除してしまいましょう。）

package.json

clean: [ 'release' ]

grunt-contrib-compass、grunt-contrib-sass

grunt-contrib-compass
grunt-contrib-sass

【 設定例 】
main.scssをmain.cssにコンパイルします。Compassも利用するできるようにoptionsのcompass設定をtrueにします。

package.json

sass: {
  dist: {
    options: {
      compass: true
    },
    files: {
      'main.css': 'main.scss'
    } 
  }
}

grunt-contrib-concat

grunt-contrib-concat

【 設定例 】
src/js配下のplugins.jsとmain.jsを連結し、releaseディレクトリにapp.jsとして生成します。

package.json

concat: {
  dist: {
    src: ['src/js/plugins.js', 'src/js/main.js' ],
    dest: 'release/app.js',
  }
}

grunt-contrib-connect

grunt-contrib-connect

【 設定例 】
ライブリロードサーバに接続します。デフォルトでは、ブラウザのlocalhost:3000でアクセスできると思います。環境によっては、ライブリロードを利用するブラウザ毎に、別途こちらのプラグインをインストールしてあげる必要があるかもしれません。

package.json

connect: {
  server: {
    options: {
      livereload: true
    }
  }
}

grunt-contrib-copy

grunt-contrib-copy

【 設定例 】
srcフォルダ内のjs/app.min.jsと、imgsフォルダ内のすべてのファイル、およびindex.htmlを、releaseディレクトリ配下に生成します。このとき、不可視ファイル(.で始まるファイル)までコピーされないように、dotオプションをfalseにしています。

package.json

copy: {
  main: {
    files: [{   
      expand: true, 
      cwd: 'src', 
      src: [   
        'js/app.min.js',
        'imgs/**',
        'index.html'
      ], 
      dest: 'release',
      dot: false
    }]
  }
}

grunt-contrib-cssmin

grunt-contrib-cssmin

【 設定例 】
src/cssフォルダ内のreset.cssとmain.cssを連結、圧縮し、releaseディレクトリ配下に生成します。

package.json

cssmin: {
  combine: {
    files: {
      'release/css/app.min.css': ['src/css/reset.css', 'src/css/main.css']
    }
  }
}

grunt-contrib-jshint

grunt-contrib-jshint

【 設定例 】
src/js/main.jsをJSHintで検証します。

package.json

jshint: {
  all: [
    'src/js/main.js'
  ],
  options: {
    jshintrc: '.jshintrc',
  }
}

検証に関する細かい設定は、jshintrcオプションにて指定したファイルで可能なようです。詳細はJSHintのページに説明があります。

.jshintrc

{
"curly": true,
  "eqnull": true,
  "eqeqeq": true,
  "undef": true,
  "globals": {
    "window": true,
    "document": true
  },
  "jquery": true
}

また、検証対象のスクリプトファイル内にて定義されていないグローバルオブジェクトについては、上記の設定以外でも、以下のようにスクリプト内に直接記述することにより、検証エラーを回避できるようです。

src/js/main.js

/*global window, document, jQuery*/

grunt-contrib-uglify

grunt-contrib-uglify

【 設定例 】
src/js配下のplugins.jsとmain.jsを連結・難読化し、releaseディレクトリにapp.jsとして生成します。

package.json

uglify: {
  js: {
    files: {
      'release/app.min.js': ['src/plugins.js', 'src/main.js']
    }
  }
}

grunt-contrib-watch

grunt-contrib-watch

【 設定例 】
src配下のhtmlファイルと、sassフォルダ内のsassファイル（.scss）を監視し、変更があった場合にブラウザを自動更新します。また、sassファイルの更新が認められた場合は、sassプラグインのタスクも実行します（上述のgrunt-contrib-sassの項で設定したような、sassからcssへのコンパイルが実行されます）。

package.json

watch: {
  html: {
    files: 'src/*.html',
    tasks: '',
    options: {
      livereload: true
    }
  },
  sass: {
    files: 'src/sass/*.scss',
    tasks: [ 'sass' ],
    options: {
      livereload: true
    }
  }
}