CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧Gruntで始めるWeb開発爆速自動化入門(2)(1/3 ページ)

JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール(Grunt、Yeoman、Bowerなど)やエディター、IDE、実行環境などを紹介していく連載。今回は、Gruntプラグインの概要と便利なものをまとめたgrunt-contrib、ファイルが監視できるgrunt-contrib-watch、livereload(自動更新)を実現するgrunt-contrib-connectなどの使い方を解説する。

» 2014年04月08日 18時00分 公開
[中村修太クラスメソッド]
「Gruntで始めるWeb開発爆速自動化入門」のインデックス

連載目次

 前回の記事「ブラックなWeb開発現場の救世主、Gruntのインストールと使い方」では、Gruntについての概要とセットアップ、基本的な動作を確認してみました。

 今回は、Gruntで使用できるいろいろな「プラグインモジュール」(以下、プラグイン)をインストールし、実際に動かして動作を確認してみましょう。

Gruntのプラグインとは、何ができるのか

 前回の繰り返しになりますが、プラグインを使用すると、Gruntでいろいろなタスクを実行できるようになります。実行できるタスクの内容はプラグインによってさまざまですが、幾つか例を挙げると、下記のような作業が自動化できます。

 こういったタスクはGruntの公式プラグインとして用意されており、Gruntの公式サイトの「Plugins」ページ(英語)からも探すことができます。

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
grunt-plugin-sample/src/sample.coffee
       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。