21 Feb 2013

Gruntをv0.3からv0.4にアップデートした

2月18日に待望のGruntのv0.4が正式リリースされたので、公式ページに従ってアップデートしてみた。ちなみにWindows（Vista）とMac（OS X Mountain Lion）環境でアップデートしたけどNode.jsのインストール以外は全く同じだった。

まずは既存のv0.3をアンインストールする

$ npm uninstall -g grunt

さよなら0.3。お世話になりました。

grunt-cliをインストール

$ npm install -g grunt-cli

すんなりいくかと思ってたらWindows環境だと下記みたいなエラーが。

npm ERR! Error: No compatible version found: grunt-cli
npm ERR! No valid targets found.
npm ERR! Perhaps not compatible with your version of node?

nodeのバージョンがダメなんじゃね？との事。改めて公式のアップグレードの解説ページを見てみると、Node.jsのバージョンは0.8以上となっているのでマシンにインストールされているNode.jsのバージョンを調べてみる。

$ node --version
v0.6.16

随分と古かったのでまずはNode.jsをアップデート。Node.jsの公式ダウンロードページから、Windows用のインストーラー（2013年2月20日現在ではnode-v0.8.20-x86.msi）をダウンロードして実行、念のためインストール後にバージョンを確認してみる。

ちなみにMacでNode.jsをアップデートする場合は環境にもよるので一概に言えないけど、

Windowsと同様にインストーラーを落として実行する。
Homebrewでインストールしている場合はbrew update後にbrew upgrade node、npmもアップデートするならnpm update npm -g。

のどちらかで大丈夫かと。で、念のためバージョンを再確認。

$ node --version
v0.8.20

無事Node.jsをアップデート出来たので、改めてgrunt-cliをインストール。

$ npm install -g grunt-cli

無事インストール出来たっぽいのでGruntの設定をしていく。

v0.3からの変更点

バージョンが0.3から0.4になったことによって、grunt.jsからGruntfile.jsへのファイル名のリネームが必要。CoffeeScriptもサポートされているっぽいのでGruntfile.coffeeでもよい。さらにpackage.jsonも必須なので新しいプロジェクトを開始する際には、

Gruntfile.js
package.json

の2つが必要になる。

package.jsonを作成

まずはpackage.jsonを作成する前に下記のような構成のテストディレクトリを用意した。

.
├── common
│   ├── css
│   │   └── _src
│   │       └── styles.scss
│   ├── img
│   └── js
│       └── _src
│           ├── script1.js
│           └── script2.js
└── index.html

そして最小限の構成でpackage.jsonを作成してみる。ちなみにnpm initで対話式でも作れる。

{
    "name": "プロジェクト名",
    "description": "プロジェクトの説明",
    "version": "1.0.0",
    "author": "作成者名",
    "dependencies": {},
    "devDependencies": {}
}

Gruntコアモジュールのインストール

ローカルにGruntのコアモジュールをインストールする。これってv0.3と違ってプロジェクトごとにインストールって解釈でいいのだろうか？

$ npm install grunt --save-dev

上記の--save-devオプションはdevDependenciesにgruntを開発向けの依存モジュールとして追加してくれるオプション。インストールが完了するとnode_modulesディレクトリが作成され、gruntがインストールされているのが確認できる。

ここでpackage.jsonを見てみると、

{
    "name": "プロジェクト名",
    "description": "プロジェクトの説明",
    "version": "1.0.0",
    "author": "作成者名",
    "dependencies": {},
    "devDependencies": {
        "grunt": "~0.4.0"
    }
}

と自動でdevDependenciesにインストールしたgruntが追加、更新されているのが確認できる。

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

これまでのバージョンではビルドインタスクでgrunt watchやらgrunt concatが使えたけど、v0.4からは必要に応じてプロジェクト毎にインストールする感じっぽいので、コアモジュールと同じく--save-devオプションでプラグインをインストール。自分は色々試してみたいのでgrunt-contribをインストールした。 ※結構な数があって重いので必要なプラグインを個別にインストールした方が良さげ。

$ npm install grunt-contrib --save-dev

無事インストール出来たっぽいので改めてpackage.jsonを見てみる。

{
    "name": "プロジェクト名",
    "description": "プロジェクトの説明",
    "version": "1.0.0",
    "author": "作成者名",
    "dependencies": {},
    "devDependencies": {
        "grunt": "~0.4.0"
        "grunt-contrib": "~0.4.0"
    }
}

ちゃんと更新されてる。

ちなみに予め設定済みのpackage.jsonを用意している場合、npm installするだけで諸々インストールしてくれる。

Gruntfile.jsを作成する

v0.3から微妙に書式が変わってる。色々あるけど自分的にはgrunt.registerTaskのエイリアス記法を変更する（第2引数を配列に）くらい。一応公式のサンプルファイルと各プラグインページを見ながら主要なタスクを登録してみる。

module.exports = function(grunt){

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        connect: {
            server: {
                options: {
                    port: 8000,
                    hostname: 'localhost'
                }
            }
        },
        watch: {
            scripts: {
                files: 'common/js/_src/*.js',
                tasks: ['concat', 'uglify']
            },
            sass: {
                files: 'common/css/_src/*.scss',
                tasks: ['sass', 'cssmin']
            }
        },
        concat: {
            common: {
                files: {
                    'common/js/all.js': [
                        'common/js/_src/script1.js',
                        'common/js/_src/script2.js'
                    ]
                }
            }
        },
        uglify: {
            common: {
                files: {
                    'common/js/all.min.js': 'common/js/all.js'
                }
            }
        },
        sass: {
            common: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'common/css/all.css': 'common/css/_src/styles.scss'
                }
            }
        },
        cssmin: {
            compress: {
                files: {
                    'common/css/all.min.css': 'common/css/all.css'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib');

    grunt.registerTask('default', ['concat', 'uglify', 'sass', 'cssmin', 'connect', 'watch']);

};

gruntを実行する

$ grunt

無事Gruntfile.jsに登録したタスク（defaultタスク）が一斉に実行された。ちなみにlocalhost:8000で確認出来る。

まとめ

下記ブログのまとめが移行に際して分かりやすかった。

以前まではgruntをインストールするだけで、ビルドインタスクとして concatやらminifyやらがデフォルトで使える状態でしたが、今後はgrunt-cliをコマンドラインのインターフェースとして（名前のままだけど）タスクをgrunt-contrib-xxxとして配布し、必要に応じてインストールしてもらうといったスタンスのようです。

Gruntの概要と導入手順とメリット | 1000ch.net

移行は出来たんで徐々にタスクを細かく分けたり下記プラグインも試していきたい。

下記参考にさせて頂いたリンク。

jekylog

All doggs wanna be a Geek