いろいろと便利な処理を自動で行ってくれるタスクランナーgruntをようやく使ってみたのでメモ。

手順は下の通り

  • Node.jsをインストール
  • grunt-cliをインストール
  • package.jsonを準備する
  • プラグインを追加する
  • Gruntfile.jsを準備
  • 実行
 

Node.jsをインストール

これがないとgruntが使えないので公式サイトからインストーラーをダウンロードします。 Node.js

インストールするとターミナルでNode.jsが使えるようになる。

grunt-cliをインストール

Node.jsをインストールしたらターミナルからgrunt-cliをインストールする 実はここが一番はまった。

まずはターミナルで下記のコマンドを入力

[bash] npm install -g grunt-cli [/bash]

上のコマンドをいれてEnterを押すとPasswordを聞かれるので Macのアカウントパスワードをいれるとインストールが始まる。

はずだったのですがなぜかErrorが出てしまいました。 Please try running this command again as root/Administrator. というエラーが出た場合は

[bash] sudo npm install -g grunt-cil [/bash]

と記入すればインストールができます。 他の場面でも同じエラーが出る場合は先頭にsudoをつけてインストールをしてください。

package.jsonを準備する

grunt-cliをインストールしたら次はpackage.jsonを準備します。 まずgruntを使用したいディレクトリまで移動します。 ターミナルでの移動方法は

[bash] cd [移動したいフォルダ名] [/bash]

と入力。 現在のディレクトリ内のフォルダを確認するには

[bash] ls [/bash] と入力すれば確認できます。

Macであればもっと簡単な移動方法があります。 移動したいフォルダをターミナルアイコンにドラック&ドロップです。

そうすると左側の文字がフォルダを示すようになるはずです。 今後gruntを使用するならDockにターミナルを入れておいた方が便利。

うまく移動できたら$の左側が移動先のフォルダ名になります。 移動したのが確認できたら

[bash] npm init [/bash]

と入力 いろいろと質問されるのですが、とりあえずそのままEnter。 すべて入力し終わるとpackage.jsonというファイルがディレクトリ内に作成されます。

中身は以下の通り

{
  "name": "grunt_test",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ここまできたらgruntを追加します。 追加するには下記のコマンドを入力。

[bash] npm install grunt –save-dev [/bash]

これを入れるとnode_moduleというフォルダが追加され、中にはgruntが入っているはずです。 package.jsonの中身も以下のように変更されます。

{
  "name": "grunt_test",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

プラグインを追加する

grunt-contribはGruntの公式プラグインパッケージです。 さまざまな処理を自動化してくれるプラグインが含まれています。 今回はそのなかから個別にインストールします。 今回はgrunt-contrib-watchとgrunt-contrib-cssminをインストールします。

grunt-contrib-watch

ファイルの更新を監視して処理を実行するためのプラグインです。

インストールするにはターミナルで以下のコマンドを入力します。

[bash] npm install grunt-contrib-watch –save-dev [/bash]

するとpackage.jsonが以下のように更新されます。

{
  "name": "grunt_test",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1"
  }
}

devDependencies内に追加されたのがわかると思います。 またnode_moduleフォルダ内にも、grunt-contrib-watchというフォルダができているのが確認できるかと思います。

grunt-contrib-cssmin

minifyしたCSSファイルを自動で書き出してくれます。

下記のコマンドをターミナルで入力するとインストールができます。

[bash] npm install grunt-contrib-cssmin –save-dev [/bash]

package.jsonはさらに下記のように書き加えられます。

{
  "name": "grunt_test",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-cssmin": "^0.9.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

これで準備は完了です。 このプラグインを使って、CSSファイルが更新されたら自動的にminifyしたファイルを書き出すようにします。

Gruntfile.jsを準備して実行してみる

処理の内容はGruntfile.jsというファイルに書き込みます。 まずはフォルダにGruntfile.jsというファイルを作って下記の内容を記入します。

module.exports = function (grunt) {

};

上記の記述はGruntを使用しますという宣言のようなものです。 次はこの中に使用するプラグインを記述していきます。

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

grunt.loadNpmTasks()でインストールしたプラグインを呼び出します。

プラグインを呼び出したら、次はプラグインの処理の詳細を設定します。

module.exports = function (grunt) {

    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.initConfig({
        cssmin: {
            style: {
                src: 'css/style.css',
                dest: 'css/style.min.css'
            }
        }
    });
};

処理の内容はgrunt.initConfig()内に記述します。 まずはcssminに関する記述から。 cssmin内のsrcはminifyするファイル名、destはminifyしたファイル名を指しています。 ここまで記述したら、cssフォルダ内にstyle.cssを準備した状態で以下のコマンドを入力するとcssminが実行されます。

[bash] grunt cssmin [/bash]

実行後は下記のような表示が出ます。

[bash] Running “cssmin:styles” (cssmin) task File css/style.min.css created: 95 B → 67 B [/bash]

これでcssフォルダ内にminifyしたファイルができました。 コマンドさえ入力すれば自動的にminifyしてくれるようになりました。

ですがいちいちコマンドを入力するのは面倒、という場合はgrunt-contrib-watchを使います。 Gruntfile.jsにさらに追加します。

module.exports = function (grunt) {

    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.initConfig({
        cssmin: {
            style: {
                src: 'css/style.css',
                dest: 'css/style.min.css'
            }
        },
        watch: {
            css: {
                files: ['css/*.css'],
                tasks: ['cssmin']
            }
        }
    });
};

grunt-contrib-watchはfilesとtasksの2つを設定する必要があります。 filesは監視するファイル、tasksは監視したファイルが更新された際に実行する処理の名前です。 今回watchにはcssフォルダ内のcssファイルが更新されたら、cssminを実行するというように記述しました。

ここまで記述したら以下のコマンドをターミナルで実行。

[bash] grunt watch [/bash]

以下を実行した後にstyle.cssの内容を変更して保存してみると、自動的にcssminが実行されるようになりました。 grunt-contribには他にもいろんなプラグインがあるので、これを組み合わせるだけでもいろいろと便利になりそうです。

今回こちらの記事を参考にさせていただきました。ありがとうございました。 現場で使えるGrunt入門 - Gruntを試そう | CodeGrid Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 | Web Design KOJIKA17 Gruntで始めるWeb制作の自動化 - to-R

glup.jsも気になるので今度はそっちも試してみたいです。