• WEB

Gruntの使い方。作業効率を上げる便利な自動タスクツール。

  • さむ
    さむ デザインちーむ
  • このエントリーをはてなブックマークに追加
Gruntの使い方。作業効率を上げる便利な自動タスクツール。

どーも、デザインちーむのさむです。
Huluにはまって早2年、まだまだ抜け出せそうにない今日この頃です。

さてさて、本日はフロントエンド周りの作業を効率化するべく、Gruntというものを取り上げてみたいと思います。

Gruntを利用すると、設定したことを自動で行ってくれるので作業効率化になります。
想像以上に便利で驚き。
毎度のことながら自分メモをかねてブログを書きます。（Windows7での説明になります）

Gruntとは

Gruntとは、JavaScriptで書いたタスクを実行してくれるタスク自動化ツールです。
作業内容を記述しておくことで自動で実行してくれます。
cssやjsを自動でminify化してくれたり、ベンダープレフィックスを自動で追加してくれたり、画像を自動で圧縮してくれたり、などなど。
フロントエンド周りのファイルの圧縮、結合、最適化をスクリプト化できます。
導入することにより作業工数が確実に軽減されるのではないでしょうか。

公式サイトは以下になります。
http://gruntjs.com/

では、さっそく環境を構築していきましょう！

Node.jsのインストール

Gruntはnode.jsをベースに作られているので、まずはnode.jsをインストールします。
下記アドレスより自身の環境に合ったものを選びインストールしてください。

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

インストールが終了したらコマンドプロンプトにて、下記のコマンドを実行しインストールができているかを確認します。


node -v

バージョン情報が表示されたらOKです。


C:\Users\???>node -v
v0.10.32

Grunt-cliのインストール

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


npm install -g grunt-cli

インストール確認を行います。


grunt -version

バージョン情報が表示されたらOKです。


C:\Users\???>grunt -version
grunt-cli v0.1.13

package.json作成

次に作業をするディレクトリ（フォルダ）を作成します。
今回は「Gruntフォルダ」をデスクトップに作成します。
コマンドプロンプトにて作業ディレクトリに移動します。

その後、以下のコマンドを実行します。


npm init

コマンドプロンプトから色々と聞かれますが全てenterを押してください。
そうすると作業ディレクトリにpackage.jsonが作成されています。
このファイルでプラグイン情報を管理していきます。

不要な記述もされていますが、ひとまずこの内容で進めていきます。

npmインストール

次に様々なプラグインをインストールしていきます。
以下のコマンドでインストールします。


npm install プラグイン名 –-save-dev

後半にある--save-devを追加することによってpackage.jsonにプラグイン情報が自動で記載されますので忘れずに追加しましょう。

試しにgrunt本体をインストールしてみましょう。


npm install grunt --save-dev

先ほど作成した作業ディレクトリ（Gruntフォルダ）にnode_modulesフォルダが作成され、その中にgruntが入っているのが確認できます。
そしてpackage.jsonファイルにもプラグイン情報が記載されました。

現在のフォルダ構成は以下のようになります。


Grunt
    node_modules
        grunt
    package.json

続いてCSSをminifyしてくれるプラグインをインストールします。


npm install grunt-contrib-cssmin --save-dev

node_modulesフォルダ以下にインストールされましたでしょうか？


Grunt
    node_modules
        grunt
        grunt-contrib-cssmin
    package.json

今回は簡単な説明なので以上のプラグインのみを利用してみたいと思います。

Gruntfile.js作成

次に上記のプラグインを実行させるためにGruntfile.jsというファイルを作業ディレクトリに作成します。
以下がひな形になるのでコピペで貼り付けて作成してみてください。


module.exports = function(grunt) {
    grunt.initConfig({  
        // この中に各タスクの設定を記述していきます。
        cssmin: {
            target: {
                expand: true,
                files: {
                    'dist/test.min.css':'css/*.css'
                }
            }
        }
    });
 
    // grunt.loadNpmTasks('プラグイン名');でプラグインを読み込む記述をします。
    grunt.loadNpmTasks('grunt-contrib-cssmin');
 
    // gruntコマンドの設定
    grunt.registerTask('default', ['cssmin']);
};

作業ディレクトリのcssフォルダ内のtest.cssを、distフォルダ内にminifyして書き出すように記述してあります。
よって作業ディレクトリにcssフォルダを作成し、その中に適当なcssを記述します。


Grunt
    css
        test.css
    dist
    node_modules
        grunt
        grunt-contrib-cssmin
    Gruntfile.js
    package.json

cssのファイル名はtest.cssで内容は以下のように記述してます。


#header{
    margin-top: 10px;
    background: #fff;
}

#header a{
    text-decoration: none;
    font-size: 1em;
}

test.cssファイルを配置したら以下のコマンドを実行してみましょう。


grunt

いかがでしょうか？
自動的にminifyされたtest.min.cssが作成されたかと思います。


#header{margin-top:10px;background:#fff}#header a{text-decoration:none;font-size:1em}#header{margin-top:10px;background:#fff}#header a{text-decoration:none;font-size:1em}

このようにコマンドを実行するだけで自動で作業を行ってくれる賢いヤツです。

プラグイン紹介

一般的によく使うであろうプラグインをご紹介します。

他にもまだまだ便利なプラグインがあるので是非、探してみてください。

おまけ

先ほどまでの内容ですと、作業をさせるときにいちいちコマンドを実行しなければいけません。
ちょっと手間ですよね。

そこで、監視フォルダを指定しておき、そこに何らかの変更が加えられた時に自動で処理を行ってくれるwatchプラグインを利用します。

手順は、watchプラグインをインストールして、Gruntfile.jsに処理内容を追加する。
今までの手順と同じですね。

まずはインストール


npm install grunt-contrib-watch --save-dev

先ほどのGruntfile.jsに追加


module.exports = function(grunt) {
    grunt.initConfig({  
        // この中に各タスクの設定を記述していきます。
        cssmin: {
            target: {
                expand: true,
                files: {
                    'dist/test.min.css':'css/*.css'
                }
            }
        },
        watch: {
            // cssの変更監視
            css: {
                files: ['css/*.css'], //監視対象のファイル
                tasks: ['cssmin']  //実行するタスク
            },
        }
    });
 
    // grunt.loadNpmTasks('プラグイン名');でプラグインを読み込む記述をします。
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');  //watchプラグイン読み込み
 
    // gruntコマンドの設定
    grunt.registerTask('default', ['watch']);
};

実行させるには、


grunt

すると以下の表示が出てきて監視が始まります。


D:\Users\???\Desktop\grunt>grunt
Running "watch" task
Waiting...

この状態でcssファイルを修正すると自動的にminifyされたfileが作成されます。
自動で行ってくれるのでとても便利です！
ちなみに停止させるときはctrl+cです。

まとめ

簡単な説明でしたが、タスクを色々登録すればかなりの作業効率化になります！
無駄な作業を省くためにも是非トライしてみてください。

今回はGruntをまとめてみましたが、他にもGulpという同じようなビルドツールがあります。
こちらは去年登場した新参者ですが、シンプルな設定ファイルと実行速度に定評があり、人気急上昇中です。
機会があればGulpもまとめてみたいです。

便利なものはどんどん取り入れていきたいですね！

このエントリーをはてなブックマークに追加

さむが最近書いた記事

WRITERS POSTS もっと見る

すべてのカテゴリー

シリーズ

ちーむ別の記事をみる

Go-Next人気の記事

RANKING

他にもこんな記事が読まれています！

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ