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

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

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

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

また、grunt-contrib以外で利用しているその他のGruntプラグインは、[別記事](http://qiita.com/megurock/items/4b0988374df0caa822fd)としていくつか紹介しています。

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

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

【開発時】

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

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

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

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

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

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

【リリース時】

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

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

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


##Grunt-contrib?

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

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

+ [grunt-contrib-clean*](https://github.com/gruntjs/grunt-contrib-clean)	ファイルやフォルダを削除します。

+ [grunt-contrib-coffee](https://github.com/gruntjs/grunt-contrib-coffee)	CoffeeScriptファイルをJavaScriptにコンパイルします。

+ [grunt-contrib-compass*](https://github.com/gruntjs/grunt-contrib-compass)	Compassを利用しSassをCSSにコンパイルします。

+ [grunt-contrib-compress](https://github.com/gruntjs/grunt-contrib-compress)	ファイルやフォルダを圧縮します。

+ [grunt-contrib-concat*](https://github.com/gruntjs/grunt-contrib-concat)	複数のファイルを1つに結合します。

+ [grunt-contrib-connect*](https://github.com/gruntjs/grunt-contrib-connect)	Webサーバへの接続を開始します。

+ [grunt-contrib-copy*](https://github.com/gruntjs/grunt-contrib-copy)	ファイルやフォルダをコピーします。

+ [grunt-contrib-cssmin*](https://github.com/gruntjs/grunt-contrib-cssmin)	CSSファイルを連結、圧縮します。

+ [grunt-contrib-csslint](https://github.com/gruntjs/grunt-contrib-csslint)	CSSファイルのリントを実行します。

+ [grunt-contrib-handlebars](https://github.com/gruntjs/grunt-contrib-handlebars)	Handlebars形式のテンプレートをJavaScriptテンプレート(JST)にプリコンパイルします。

+ [grunt-contrib-htmlmin](https://github.com/gruntjs/grunt-contrib-htmlmin)	HTMLをミニファイします。

+ [grunt-contrib-imagemin](https://github.com/gruntjs/grunt-contrib-imagemin)	PNG、JPEG、GIF画像を圧縮します。

+ [grunt-contrib-jade](https://github.com/gruntjs/grunt-contrib-jade)	JadeテンプレートをHTMLファイルにプリコンパイルします。

+ [grunt-contrib-jasmine](https://github.com/gruntjs/grunt-contrib-jasmine)	JasmineのspecをPhantomJS経由でヘッドレスに実行します。

+ [grunt-contrib-jshint*](https://github.com/gruntjs/grunt-contrib-jshint)	JavaScriptをJSHintで検証します。

+ [grunt-contrib-jst](https://github.com/gruntjs/grunt-contrib-jst)	Underscore形式のテンプレートをJavaScriptテンプレート(JST)にプリコンパイルします。

+ [grunt-contrib-less](https://github.com/gruntjs/grunt-contrib-less)	LESSファイルをCSSにコンパイルします。

+ [grunt-contrib-nodeunit](https://github.com/gruntjs/grunt-contrib-nodeunit)	Nodeunitによるユニットテストを実行します。

+ [grunt-contrib-qunit](https://github.com/gruntjs/grunt-contrib-qunit)	QUnitによるユニットテストをヘッドレスのPhantomJSインスタンス内で実行します。

+ [grunt-contrib-requirejs](https://github.com/gruntjs/grunt-contrib-requirejs)	RequireJSプロジェクトをr.jsにより最適化します。

+ [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass)	SassをCSSにコンパイルします。

+ [grunt-contrib-stylus](https://github.com/gruntjs/grunt-contrib-stylus)	StylusファイルをCSSにコンパイルします。

+ [grunt-contrib-uglify*](https://github.com/gruntjs/grunt-contrib-uglify)	JavaScriptをUgilifyJSにより難読化します。

+ [grunt-contrib-watch*](https://github.com/gruntjs/grunt-contrib-watch)	ファイルを監視し、追加/変更/削除があった場合に、指定されたタスクを実行します。

+ [grunt-contrib-yuidoc](https://github.com/gruntjs/grunt-contrib-yuidoc)	YUIDocドキュメントをコンパイルします。


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

## grunt-contrib-clean
[grunt-contrib-clean*](https://github.com/gruntjs/grunt-contrib-clean)

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

```js:package.json
clean: [ 'release' ]
```


## grunt-contrib-compass、grunt-contrib-sass
[grunt-contrib-compass](https://github.com/gruntjs/grunt-contrib-compass)
[grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass)


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

```js:package.json
sass: {
  dist: {
    options: {
      compass: true
    },
    files: {
      'main.css': 'main.scss'
    } 
  }
}
```

## grunt-contrib-concat
[grunt-contrib-concat](https://github.com/gruntjs/grunt-contrib-concat)

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

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


## grunt-contrib-connect
[grunt-contrib-connect](https://github.com/gruntjs/grunt-contrib-connect)

【 設定例 】
ライブリロードサーバに接続します。デフォルトでは、ブラウザのlocalhost:3000でアクセスできると思います。環境によっては、ライブリロードを利用するブラウザ毎に、別途[こちらのプラグイン](http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-)をインストールしてあげる必要があるかもしれません。

```js:package.json
connect: {
  server: {
    options: {
      livereload: true
    }
  }
}
```


## grunt-contrib-copy
[grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy)

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

```js: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](https://github.com/gruntjs/grunt-contrib-cssmin)

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

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


## grunt-contrib-jshint
[grunt-contrib-jshint](https://github.com/gruntjs/grunt-contrib-jshint)

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

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

検証に関する細かい設定は、`jshintrc`オプションにて指定したファイルで可能なようです。詳細は[JSHintのページ](http://www.jshint.com/docs/)に説明があります。

```js:.jshintrc
{
"curly": true,
  "eqnull": true,
  "eqeqeq": true,
  "undef": true,
  "globals": {
    "window": true,
    "document": true
  },
  "jquery": true
}
```

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

```js:src/js/main.js
/*global window, document, jQuery*/

```


## grunt-contrib-uglify
[grunt-contrib-uglify](https://github.com/gruntjs/grunt-contrib-uglify)

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

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



## grunt-contrib-watch
[grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch)

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

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