CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧：Gruntで始めるWeb開発爆速自動化入門（2）（1/3 ページ）
JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）やエディター、IDE、実行環境などを紹介していく連載。今回は、Gruntプラグインの概要と便利なものをまとめたgrunt-contrib、ファイルが監視できるgrunt-contrib-watch、livereload（自動更新）を実現するgrunt-contrib-connectなどの使い方を解説する。
前回の記事「ブラックなWeb開発現場の救世主、Gruntのインストールと使い方」では、Gruntについての概要とセットアップ、基本的な動作を確認してみました。
今回は、Gruntで使用できるいろいろな「プラグインモジュール」（以下、プラグイン）をインストールし、実際に動かして動作を確認してみましょう。
Gruntのプラグインとは、何ができるのか
前回の繰り返しになりますが、プラグインを使用すると、Gruntでいろいろなタスクを実行できるようになります。実行できるタスクの内容はプラグインによってさまざまですが、幾つか例を挙げると、下記のような作業が自動化できます。
- CoffeeScript／TypeScriptをJavaScriptへコンパイル（変換）
- SCSS（Sass）／LESSをCSSへコンパイル（変換）
- ファイルの圧縮／結合／最適化
- JSHintでJavaScriptの構文チェック
こういったタスクはGruntの公式プラグインとして用意されており、Gruntの公式サイトの「Plugins」ページ（英語）からも探すことができます。
ここからは、幾つかのプラグインを使ってGruntタスクを実行してみましょう。なお、Node.jsおよびGrunt本体がまだインストールできていない場合、前回の「Gruntの環境構築」を参考にインストールしておいてください。
便利なプラグインを1度にインストールできる「grunt-contrib」プラグイン
プラグインを実際に使用する前に、Gruntでよく使用される機能を集めた「grunt-contrib」について説明します。
以前のGrunt（バージョン0.4より前）では、ファイル削除や結合などの基本的なタスクはビルトインタスクとして定義されていましたが、0.4からはgrunt-contribプラグインとして提供されています。
grunt-contribのGitHubを見ると分かりますが、これは複数のプラグインをまとめたものです。CoffeeScriptやSassのコンパイル、ファイルの圧縮など、さまざまなプラグインが含まれているのが分かりますね。grunt-contribに含まれる各プラグインは、慣習的に「grunt-contrib-***」という名前になっています。
grunt-contribに含まれる代表的なプラグインには、次のようなものがあります。
- grunt-contrib-clean
ファイル／ディレクトリをクリーンするためのプラグイン - grunt-contrib-coffee
CoffeeScriptファイルをコンパイルし、JavaScriptファイルへ変換するプラグイン - grunt-contrib-compass
「Compass」を使用してSassファイルをコンパイルし、CSSファイルへ変換するためのプラグイン - grunt-contrib-connect
node.jsのモジュールである「Connect」（HTTPサーバー）を使用したサーバー機能を提供するプラグイン - grunt-contrib-watch
任意のファイルに対して変更を検知し、指定した処理を実行プラグイン - grunt-contrib-uglify
UglifyJSを使用してJavaScriptファイルの圧縮／最適化を行うためのプラグイン
なお、これらgrunt-contribに含まれるプラグインは個別にインストールすることも可能です。各プラグインの最新版がgrunt-contribに含まれているとは限らないので、そういった場合には各プラグインを単体でインストールしてください。
【1】grunt-contrib-coffeeでCoffeeScriptをコンパイル
実際にプラグインをインストールしてGruntで使ってみましょう。
まずは、grunt-contrib-coffeeプラグインを使ってみます。このプラグインはcoffee-scriptモジュールを使用し、CoffeeScriptで記述されたファイルを.jsファイルへコンパイルするためのタスクを実行できます。
個別のファイルや任意のディレクトリ以下全てのCoffeeScriptファイルをコンパイル対象にできる他、sourceMapなどのオプションも指定可能です。
確認用ファイル／ディレクトリ作成
まずは、次のようにディレクトリを作成します。
% mkdir grunt-plugin-sample % cd grunt-plugin-sample % mkdir src % mkdir dest
「src」がCoffeeScriptファイル用のディレクトリで、「dest」がコンパイルしたjsファイル用のディレクトリです。
次は「src」ディレクトリにCoffeeScriptファイルを用意します。
add = (x,y) ->
x + y
res = add 3,4
console.log res
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。