Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ

はじめまして、フロントエンドエンジニアのおじいちゃんと言います。おじいちゃんはあだ名で、本名は後藤です。よろしくお願いします。
本日は、開発を効率化してくれる自動化ツールのGruntの導入から使用方法、おすすめプラグインまでを紹介したいと思います。

Gruntとは

http://gruntjs.com/

GruntはNode.jsを使ったJavaScript製のタスクランナーです。
決まった動作をおこなったときに、あらかじめ決めておいたタスクを実行してくれます。

黒い画面を使うから面倒くさそう…と思っている方もいるかもしれませんが、コマンドはコピペでいけるのでご安心を！
それでは、いってみましょう。

環境構築

Gruntを利用するためには、まずNode.jsが必要です。
さっそくインストールしてみましょう。インストーラーがあるので簡単です。

Node.js

下記URLよりダウンロードしてインストールします。

http://nodejs.jp/nodejs.org_ja/docs/v0.8/download/

きちんとインストールできていれば、コマンドプロンプトまたはターミナル（以下ターミナルと表記）で以下のコマンドを実行したときに、バージョンが表示されます。
node -v

実行結果は下記。
$ 1.4.9

grunt-cli

続いてGruntをインストールしていきます。

• Windowsの場合

コマンドプロンプトを起動し、以下のコマンドを入力します。
npm install -g grunt-cli

• Macの場合

ターミナルを起動し、以下のコマンドを入力します。
sudo npm install -g grunt-cli

インストールの確認は下記。
grunt -version

バージョンが表示されればOKです！
$ grunt-cli v0.1.13

Gruntを使ってみよう

ここまでの工程でインストールが完了しました。
ではGruntを使った環境がどのくらい便利なのか、さっそく試してみましょう。

まずは下記URLからzipをダウンロード、解凍して任意の場所においてください。

http://211.125.65.24/demo/2014/09/grunt.zip

今回は以下の場所に置くことにしました。

Documents
┗grunt

ターミナルを起動して、以下のコマンドを実行します。
cd Documents/grunt

package.jsonに書かれている内容をインストールします。（package.jsonについては後述します。）
npm install

gruntを実行します。
grunt

これでもう準備は完了しました。
ターミナルをそのままにして、テキストエディタでCSSフォルダにstyle.cssを作ってみましょう。

■css/style.css

body {
    transform: rotate(20deg);
}

-webkit-とかつけなくていいの？　と思った方もいるかもしれませんが、気にせず保存しましょう。

保存するとターミナルに上図のように表示され、distフォルダができあがります。
distフォルダを見てみると以下のような階層になっています。

dist
┗css
　┣style.css
　┗style.min.css

それぞれ以下のようなCSSが出力されています。

■dist/css/style.css

body{
	 -webkit-transform: rotate(20deg);
	     -ms-transform: rotate(20deg);
	         transform: rotate(20deg);
}

先ほど無視していた-webkit-がついてますね。これもGruntのタスクのおかげです。
あれ？　これってベンダープレフィックスいるんだっけ？　とか悩まなくても大丈夫です。

■dist/css/style.min.css

body{-webkit-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg)}

ベンダープレフィックスがついたCSSを圧縮したCSSも出力されました。

続いてフォルダにあるscript.jsを修正してみましょう。

(function(){
    alert("Grunt_sample");
})();

distフォルダにJSフォルダができあがって出力されました。

dist
┣css
┃┣style.css
┃┗style.min.css
┗ js
　┣script.js
　┗script.min.js

script.jsは便宜上出力されているだけで、元と同じです。
script.min.jsは圧縮されて出力されました。

同じくimagesフォルダに画像を追加してみましょう。
すると自動的に…

dist
┣ css
┃┣ style.css
┃┗ style.min.css
┣ js
┃┣ script.js
┃┗ script.min.js
┗ images
　┗ sample.jpg

画像に含まれる不要なデータを取り除いて圧縮してくれました。

このような作業をするだけで、自動的に圧縮した形で出力をしてくれます。
リリース前にバタバタと圧縮作業する必要がなくなりますね。
Gruntfile.jsとPackage.jsonの2つがあれば、同じ環境をすぐに作ることができます。

Gruntfile.jsとpackage.jsonを1から作る

それではもう少し掘り下げて、Gruntfile.jsとpackage.jsonを1から作ってみましょう。

まずは任意の場所にフォルダを作成します。
今回はDocuments/my-projectとしました。

そしてターミナルを開きます。前回Gruntを実行していると

watch…

となっているので、Ctrl　＋　c を押してください。これで監視が終了します。

package.jsonを作る

作ったフォルダにcdコマンドを使って移動してください。
cd Documents/my-project

深い階層にフォルダを作ってしまったら、まずターミナルにcdと打ち、その後に作ったフォルダをターミナルにドラッグ＆ドロップします。すると、自動的にフォルダまでのパスが入力されます。楽チンですね。

移動したら以下のコマンドを実行します。
npm init
あとは質問に答えていくだけです。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (grunt) LIG_TEMPLATE
version: (0.0.0) 
description: ブログ記事用サンプル
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: Ojiji
license: (ISC) MIT

とりあえず全部Enterでも大丈夫です。

{
  "name": "LIG_TEMPLATE",
  "version": "0.0.0",
  "description": "ブログ記事用サンプル",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Ojiji",
  "license": "MIT"
}

Is this ok? (yes)

最後に確認がでますので問題なければEnterキーを押します。
これでpackage.jsonができました。

Gruntプラグインのインストール

続いてGruntプラグインをインストールしていきます。
npm install プラグイン名 –save-dev

プラグインは以下のGruntのサイト内にたくさんあります。

http://gruntjs.com/plugins

今回使ったものはこちら。

• grunt
• grunt-contrib-cssmin
• grunt-autoprefixer
• grunt-contrib-ugulify
• grunt-contrib-imagemin
• grunt-contrib-watch

npm install コマンドを使ってインストールしていきます。
今回は一気にやってしまいましょう！
npm install grunt grunt-contrib-cssmin grunt-autoprefixer grunt-contrib-uglify grunt-contrib-imagemin grunt-contrib-watch -save-dev

-save-dev
開発用としてプラグインをインストールすることを表します。これを付与しないとpackage.jsonにプラグイン情報が記載されません。

続いてGruntfile.jsというファイルをpackage.jsonと同じ階層に作成します。

中身を以下のように記述します。

module.exports = function(grunt) {
    // initConfigの中に各タスクの設定を行っていきます。
    grunt.initConfig({  
        // watchタスク: ファイルの変更を監視します。
        watch: {
            // ここにwatchタスクの設定を記述します。
       }
    });

    // grunt.loadNpmTasks('プラグイン名');でプラグインを読み込みます。
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // gruntコマンドのデフォルトタスクにwatchを追加します。
    grunt.registerTask('default', ['watch']);
};

このような形を基本としてタスクを登録していきます。

ではCSSから順番に登録していきましょう。

※9/25 17:30追記　コードについて修正をおこないました。

autoprefixerプラグイン

以下の記述をgrunt.initConfigに追記します。

autoprefixer: {
    target: {
        expand: true,
        src: 'css/**/*.css',
        dest: 'dist'
    }
},

以下のようになります。　}　のあとの　,（カンマ）を忘れないようにしてください。

grunt.initConfig({
    autoprefixer: {
        target: {
            expand: true,
            src: 'css/**/*.css',
            dest: 'dist/css'
        },
        options: {
            // 対象とするブラウザをこのように指定することができます。
            browsers: ['last 2 version', 'ie 8', 'ie 9']
        }
    },
    // watchタスク: ファイルの変更を監視します。
    watch: {
        // ここにwatchタスクの設定を記述します。
   }
});

試しにCSSフォルダに適当なCSSを作って実行してみましょう。

■css/test.css

body {
    transition: 1s ease-out width;
}

そして以下のコマンドをターミナルで実行します。
grunt autoprefixer
distフォルダができあがり、dist/css/test.cssが以下のように生成されます。

body {
    -webkit-transition: 1s ease-out width;
    transition: 1s ease-out width;
}

つけてもいない-webkit-がつくようになりました！
autoprefixerのオプションでブラウザのバージョン指定が可能なので、要件に合わせて使えるのがとても素晴らしいプラグインです。

cssmin

CSSを圧縮してくれるプラグインです。
さっそくinitConfigに追加してみましょう。

cssmin: {
    target: {
        expand: true,
        // dist/css以下のcss。ただしmin.cssで終わっていないものに限る
        src: ['dist/css/**/*.css', '!*.min.css'],
        // 出力先はそのまま
        dest: './',
        // ファイルの拡張子をファイル名.min.cssにする
        ext: '.min.css'
    }
},

今回はautoprefixerしたCSSを*.min.cssとして出力したいので上記のようになりました。
grunt cssmin
と実行すると、先ほどautoprefixerで出力したCSSがmin.cssとして出力されます。以下のように書き出されました。

body{
	-webkit-transition:1s ease-out opacity;transition:1s ease-out opacity
}

不要な改行やスペースが除去されていますね！
でもいちいち2回コマンド打つのは面倒くさいと思う人は、以下の記述をGruntfile.jsに追記してみてください。

grunt.registerTask('css', ['autoprefixer','cssmin']);

registerTaskにCSSというタスク名でautoprefixerとcssminタスクを登録しました。
このようにすると以下のコマンドで2つのタスクが連続して実行されます。
grunt css
これで2つまとめて1コマンドです！

uglify

uglifyはJavaScriptを圧縮するプラグインです。
さぁ、initConfigに追記しましょう！

uglify: {
    target: {
        files: [{
            expand: true,
            // jsフォルダ以下にあるすべてのjs
            src: 'js/**/*.js',
            // 出力先フォルダ
            dest: 'dist'
        }]
    }
},

これまでのものとは少し書き方が異なります。
プラグインによって記述の仕方が異なりますので、各プラグインのドキュメントと記述例を参考にしてカスタマイズしていってください。

さっそくこちらも確認してみましょう。
まずはJSフォルダにJSファイルを作成して記述していきます。

js/script.js

(function(window) {
    window.addEventListener('load', function() {
        var gruntTest = 'Gruntのテストだよ！';
        showAlert(gruntTest);
    });
    function showAlert(message) {
        alert(message);
    }
})(window);

圧縮効果がわかりやすいように冗長に書いてみました。
grunt uglify
dist/js/script.jsというファイルが書き出されました。

!function(a){function b(a){alert(a)}a.addEventListener("load",function(){var a="Gruntのテストだよ！";b(a)})}(window);

変数名も省略され、スペースと改行も除去されました！

imagemin

最後に画像圧縮の処理をしていきましょう。
同じくinitConfigに追記します。

imagemin: {
    target: {
        files: [{
            expand: true,
            src: ['images/**/*.{png,jpg,gif}'],
            dest: 'dist'
        }]
    }
},

imagesフォルダに画像を入れてみましょう。

そして実行です。
grunt imagemin
すると以下のように表示されdist/images/sample.jpgが出力されました。

✔ images/sample.jpg (saved 11.16 kB - 5%)
Minified 1 image (saved 11.16 kB)

11.16KB節約できたようです！チリも積もれば山となります。

watch

以上で、それぞれのタスクが完了しました。
しかし毎回修正ごとにコマンドを打つのはとっても面倒です。
ですので、編集したらタスクを実行するwatchプラグインを設定していきたいと思います。

こちらも同じくinitConfigに追記していきます。

watch: {
    // cssの変更監視
    css: {
        files: ['css/**/*.css'],    //監視対象のファイル
        tasks: ['autoprefixer','cssmin']  //実行するタスク
    },
    script: {
        files: ['js/**/*.js'],
        tasks: ['uglify']
    },
    images: {
        files: ['images/**/*.{png,jpg,gif}'],
        tasks: ['imagemin']
    }
}

最初にgrunt.registerTask(‘default’, ‘watch’);とデフォルトタスクにwatchタスクを入れておきました。
なので、タスクの実行については以下を実行するだけです。
grunt
実行すると監視が始まり、以下のように表示されます。

Running "watch" task
Waiting...

この状態で監視はできているので、CSSを修正したり、JSを修正したり、画像を追加したりすれば、それぞれのタスクが自動で実行されるようになります。

まとめ

いかがでしたでしょうか。
今回紹介した内容以上にGruntは、さまざまなことを自動化できます。
いろいろなプラグインを試し、自分なりの自動化タスクを作り上げてみてください。

おまけ

最後に、LIGのフロントエンドで実際に使ったことのあるオススメプラグインをします。

• grunt-contrib-cssmin – npm

  https://www.npmjs.org/package/grunt-contrib-cssmin

• grunt-autoprefixer – npm

  https://www.npmjs.org/package/grunt-autoprefixer

• grunt-contrib-ugulify – npm

  https://www.npmjs.org/package/grunt-contrib-uglify

• grunt-contrib-imagemin – npm

  https://npmjs.org/package/grunt-contrib-imagemin

• grunt-contrib-watch – npm

  https://npmjs.org/package/grunt-contrib-watch

• grunt-contrib-connect – npm

  https://npmjs.org/package/grunt-contrib-connect

• grunt-contrib-compass – npm

  https://npmjs.org/package/grunt-contrib-compass

• load-grunt-tasks – GitHub

  https://github.com/sindresorhus/load-grunt-tasks

• grunt-contrib-concat – npm

  https://npmjs.org/package/grunt-contrib-concat

• grunt-contrib-clean – npm

  https://www.npmjs.org/package/grunt-contrib-clean

• grunt-contrib-copy – npm

  https://npmjs.org/package/grunt-contrib-copy

• grunt-usemin – npm

  https://npmjs.org/package/grunt-usemin

• grunt-bower-install – npm

  https://npmjs.org/package/grunt-bower-install

• grunt-ngmin – GitHub

  https://github.com/btford/grunt-ngmin

• grunt-karma – npm

  https://npmjs.org/package/grunt-karma

• grunt-contrib-jasmine – npm

  https://npmjs.org/package/grunt-contrib-jasmine

• grunt-contrib-requirejs – npm

  https://npmjs.org/package/grunt-contrib-requirejs

• grunt-notify – npm

  https://npmjs.org/package/grunt-notify

• grunt-newer – npm

  https://npmjs.org/package/grunt-newer

• grunt-concurrent – npm

  https://npmjs.org/package/grunt-concurrent

これ以外にも、便利なプラグインはたくさんあります！
ぜひGruntを使いこなし、業務を効率化してください。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る