GruntをMac OS Xに導入する方法 – インストールからタスクを実行するまで

自分のPCでもJSファイルの自動圧縮や自動デプロイなどやる必要が出てきたので、今更ですがフロントエンド開発の必須アイテムでもあるビルドツール「Grunt」を自分のMacBook Proにインストールしました。若干ハマった部分もあったので、参考のためにインストール方法を書いておきます。

Gruntを使う前提として

GruntはNode.js上で動作します。まずGruntをMac OSにインストールするには、以下がインストールされている必要があります。

Node.js: Gruntが動作する場所
npm: Gruntを管理するツール
Homebrew: Node.js、npmを管理するツール

インストールされているかは以下のコマンドで確認できます。

Node.jsの確認

$ node -v

npmの確認

$ npm -v

Homebrewの確認

$ brew -v

こちらのインストール方法などについては過去に投稿しています。そちらを参照してください。自分の場合はすでにインストール済みの状態でした。

Mac OS X Mountain LionにNode.jsとnpmをHomebrewを使ってインストールする – maesblog

Gruntを使う準備 – Grunt-cliのインストール

Gruntはnpmを使ってインストールします。とりあえず、npmを最新の状態にします。

$ npm update

npmを最新の状態にしたら、Grunt-cliをインストールします。

$ npm install -g grunt-cli

バージョンを確認します。ちゃんと表示されれば、インストール成功です。

$ /usr/local/share/npm/bin/grunt -version

grunt-cli v0.1.13

Grunt-cliは、「Gruntfile.js」と同じ階層にあるgruntを実行するためのコマンドです。Grunt-cliの働きにより複数のバージョンのGruntをプロジェクトごとに設定できるようにしてくれます。

これでGruntを使う準備が整いました。Gruntは、直接使用するプロジェクトのディレクトリ内にインストールします。

プロジェクトでGruntを使う準備

Gruntはプロジェクトごとにインストールして使います。

まず、Gruntを使用したいプロジェクトのディレクトリに移動します

$ cd ディレクトリ名

移動したディレクトリの中にnpmでパッケージのバージョンを管理するためのpackage.jsonファイルを作成します。[npm init]コマンドを実行すると、質問形式でpackage.jsonファイルを生成してくれます。

$ npm init

package.jsonファイルの中身は以下のようになっています。普通のjsonファイルなので後から編集も可能です。

{
  "name": "project名",
  "version": "0.1.0",
  "description": "projectの内容",
  "main": "メインファイル",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "gitのリモートリポジトリのURL"
  },
  "author": "最初に読み込まれるファイル名",
  "license": "ライセンス",
  "readmeFilename": "README.md",
  "gitHead": ""
}

package.jsonを作成したら、いよいよGruntをプロジェクト用のディレクトリにインストールします。

$ npm install grunt --save-dev

インストールしたディレクトリ内でGruntのバージョンを確認します。ちゃんと表示されれば、インストール成功です。

$ grunt -version

grunt-cli v0.1.13
grunt v0.4.5

※Gruntコマンドの「使い方」、「オプション」、「利用可能なタスク」は以下のコマンドで確認できます。

$ grunt --help

Gruntをインストールしたら、次にGruntfile.jsを作成します。Gruntfile.jsはGruntで実行するためのタスクを書き込むためのファイルとなります。

$ touch Gruntfile.js

とりあえず、Gruntfile.jsに以下のように記述してみます。

module.exports = function (grunt) {
 
  grunt.registerTask('hello', 'description here', function () {
    grunt.log.writeln('Hello Grunt !!');
  });
 
  grunt.registerTask('default', [ 'hello' ]);
 
};

これで準備完了となります。さっそくgruntコマンドを実行してみます。

$ grunt

成功すると、以下のように表示されます。

Running "hello" task
Hello Grunt !!
 
Done, without errors.

場合によっては、パスが通っていないために「-bash: grunt: command not found」と怒られて、gruntが実行できないこともあります。その場合はパスを通してあげます。

$ export PATH="/usr/local/share/npm/bin:$PATH"

exportだと、exitしたり、ログアウトしたりすると設定がリセットされるので、ホームディレクトリにある「.bash_profile」ファイルに直接書き込んでおきます。

$ vim ~/.bash_profile

export PATH="/usr/local/share/npm/bin:$PATH"

Gruntプラグインを使う

Gruntを使うと主に以下のようなことができます。

JavaScript、HTML、CSSの構文チェック（バリデーション）
JavaScript、CSSファイルの連結
JavaScript、CSSファイルの圧縮（ミニファイ化、難読化）
CSSスプライトの生成
CoffeeScriptやTypeScriptのコンパイル
SCSS（Sass）やLESSのコンパイル
ファイル状態監視
単体テストの実行
自動デプロイ

今回、私は以下のタスクを設定してみました。

JSファイルのミニファイ化
ファイル状態監視によるタスク実行自動化

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

Gruntにはさまざまなタスクを実行するための便利なプラグインが用意されています。Node.jsのパッケージ管理ソフトnpmを使ってGruntプラグインをインストールします。

JavaScriptファイルを圧縮してくれるプラグイン「grunt-contrib-uglify」をインストール。

$ npm install grunt-contrib-uglify --save-dev

ファイル状態を監視してくれるプラグイン「grunt-contrib-watch」をインストール。

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

ちなみに、インストール時につける「–save-dev」というオプションは、以下のブログ記事によると、それぞれpackage.jsonに保存（–save）、package.jsonのdevDependenciesにプラグインの依存関係を書き込む(-dev）という意味になるようです。

Gruntによる継続的なビルド環境を求めて〜 package.jsonと0.4.0のこと ::ハブろぐ

Gruntfile.jsファイルの設定

Gruntfile.jsファイルは以下のように記述します。

module.exports = function (grunt) {

    // package.jsonを読み込み、pkg変数にキャッシュ
    var pkg = grunt.file.readJSON('package.json');

    // Gruntの設定
    grunt.initConfig({

        uglify: { // タスク名
            dist: { // ターゲット名
                // ファイルの出力/入力設定
                files: {
                    // 圧縮後のファイル: 圧縮前のファイル
                    'jquery.higher.min.js': 'jquery.higher.js'
                }
            }
        },

        watch: { // タスク名
            js: { // ターゲット名
                // 監視したいファイル
                files: ['jquery.higher.js'],
                // 変更を感知した時に実行するタスク
                tasks: ['uglify']
            }
        }
    });

    // 実行するタスクのGruntプラグインの読み込み
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // デフォルトタスクの登録（Gruntコマンドをそのまま叩いたときに実行される）
    grunt.registerTask('default', ['uglify']);

};

Gruntfile.jsの書き方は以下のページが参考になります。

Gruntでの監視実行

自動監視させる場合は、作業前に以下を実行しておきます。そうするとJSファイルに変更があれば自動的に圧縮を行ってくれるようになります。

$ grunt watch

Gruntプラグインの削除

Gruntプラグインの削除は以下のコマンドで行います。「–save-dev」のオプションをつけると、package.jsonに記載の情報も一緒に削除されます。

$ npm remove [プラグイン名] --save-dev

YosemiteにおけるHomebrew問題

最後に補足です。今回Gruntのインストール作業中にHomebrewもアップグレードさせたのですが、最初うまくいきませんでした。

[brew upgrade]コマンドを実行すると、以下のようなエラーが出てうんともすんともいきませんでした。

$ brew upgrade

-bash: /usr/local/bin/brew: /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby: bad interpreter: No such file or directory

なんともMac OS X Yosemiteになり、Rubyのバージョンが2.0となりRuby 1.8がなくなったためと言うことらしいです。以下の記事にある解決方法を試してみました。

Git のローカルリポジトリを更新して Homebrew を最新に – CHROMA

/usr/loca/binに移動します。

$ cd /usr/loca/bin

git pullします。

$ git pull origin master

これでOKのようです。さっそくHomebrewをアップグレードします。

$ brew upgrade

Homebrewのバージョンを確認します。

$ brew -v

Homebrew 0.9.5

参照サイト

今回参考にしたサイトを紹介しておきます。

Gruntを一から勉強するならドットインストールがお勧めです。

Grunt入門 (全12回) – プログラミングならドットインストール

Gruntのプラグインなどの開発を行うのであれば以下のサイトが参考になります。

API | Grunt 日本語リファレンス | js STUDIO

それからGruntに関する書籍はまだまだ少ないので、以下のムック本は現時点においてはかなり貴重な情報源となります。Gruntの対抗馬として最近人気急上昇中のタスクランナー「gulp」の詳しい情報なども載っていておすすめです。

**『JavaScriptエンジニア養成読本 [Webアプリ開発の定番構成Backbone.js+CoffeeScript+Gruntを1冊で習得! ] 』**
著者: 吾郷協, 山田順久, 竹馬光太郎, 和智大二郎
出版社: 技術評論社
発売日: 2014年10月18日
ISBN: 4774167975
⇒Amazon.co.jpで詳細を見る

カテゴリー: Web技術
Grunt JavaScript Mac npm 開発環境

maesblog