01 May 2012

gruntをインストールする - Windows Vista

ちなみにMacも下記とほとんど相違ないけどハマったんで一応メモってる

gruntそのものはtakazudoさんのhamalogで知ってたけどなかなかどういう場面で必要になるか分からなかったので手を付けれなかったけど、実現したい事の解決方法としてマッチしたので参考にさせてもらいながらgruntをインストールしてみた。

node.jsとnpmをインストール

ネットの情報ではnpmをWindowsで使うには結構手法が違ってたりしてたけど小粋空間さんによると公式のパッケージをインストールすればデフォで入ってるっぽい。

「npm」という、Node.js用のパッケージマネージャも一緒にインストールされており（ネットで調べると以前は別にインストールする必要があったようですが不要）、同じフォルダにある「npm.cmd」が該当します。

ちなみにコマンドプロンプトで

node --version

としても起動しなかったので環境変数のPathに「C:\Users\ユーザー名\AppData\Roaming\npm;C:\Program Files\nodejs\」を追加すると無事起動できた。

gruntをインストール

コマンドプロンプトで、

npm install -g grunt

とするだけ。楽チン。

gruntを使う。

公式サイトを見ながらやってみた。どうやらプロジェクトとなるディレクトリ直下にgrunt.jsを設置してそこ色々設定を書いていくらしい。grunt init:gruntfileで生成出来るけどイミフな設定が多々あったので自分で作ってみるのがいいかも。ちなみにラッパー関数内に設定を記述していく。

module.exports = function(grunt){
    // ここに設定を記述していく。
};

※ちなみに以後のコードは上記ラッパーを省略して書くが必ず必要なので注意。 ※CSSプログラマーの神様に指摘された箇所を修正

jsを結合してみる

concatなるビルトインタスクがあるので公式見ながらやってみる。

grunt.initConfig({
    concat : {
        dist : {
            // 結合元となるファイル
            src : [
                'js/jquery-ui-1.8.18.custom.min.js',
                'js/jquery.easing.1.3.js',
                'js/jquery.ui.plugin.js',
                'js/app.js'
            ],
            // 結合先のファイル名
            dest : 'js/all.js'
        }
    }
});

早速コマンドラインで下記を叩いてみる。

$ grunt concat
Running "concat:dist" (concat) task
File "js/all.js" created.

Done, without errors.

おお、吐き出されている！今まではmodernizr.load使ってたけどこれからはリソース削減のためにこれでいってみよう。

jsをminifyする

結合出来ればあとはminifyもしたい。これもminなるビルトインタスクがあるので公式見ながらやってみる。

grunt.initConfig({
    min : {
        dist : {
            // 圧縮元のファイル名
            src : ['js/all.js'],
            // 圧縮先のファイル名
            dest : 'js/all.min.js'
        }
    }
});

で、例のごとく下記を叩く。

$ grunt min
Running "min:dist" (min) task
File "js/all.min.js" created.
Uncompressed size: 13348 bytes.
Compressed size: 2357 bytes gzipped (7383 bytes minified).

Done, without errors.

13348bytesから7383bytesまで圧縮出来た。

sassも監視してみる

これなかなか検索しても出て来なかったけどtakazudoさんのgithubを見ながらやってみた。どうやら自分でカスタムタスクを作って登録すればよさそう。

grunt.initConfig({
    sass : {
        dist : {
            src : ['scss/all.scss'],
            dest : 'css/all.css'
        }
    }
});
// タスクが書かれたファイルを格納しているパス（ここではtasks）
grunt.loadTasks('tasks');

で、肝心のタスクはsass.jsとしてtasksディレクトリ以下に格納。ほとんどtakazudoさんのをパク参考にさせてもらいました。下記がtasks/sass.js内の記述。

module.exports = function(grunt){

    // ログ用
    var log = grunt.log;

    // node.jsでコンソールコマンドを実行するためのモジュール
    var proc = require('child_process');

    // タスク（マルチタスクとして）を登録
    grunt.registerMultiTask('sass', 'sass compile', function() {

        // 非同期タスクであることを示す
        var done = this.async();

        // 読み込み元
        var src = this.file.src;

        // 出力先
        var dest = this.file.dest;

        // scssからcssに変換するコマンド
        var command = 'sass ' + src + ':' + dest;

        // コンソールコマンドを実行
        var out = proc.exec(command, function(error, stdout, stderr){

            // エラー時
            if(error || stderr){
                log.writeln('File "' + dest + '" failed.');
                done(false);
            // 成功時
            }else{
                log.writeln('File "' + dest + '" created.');
                done(true);
            }
        });
    });

};

いざコマンドを叩いてみる。

$ grunt sass
Running "sass:dist" (sass) task
File "css/all.css" created.

Done, without errors.

キタコレ。無事変換できてた。

cssを圧縮する

圧縮はsassコマンドに--styleオプションを付けても良かったけどjsのように別途設けた方がよさそうなのでこれまたtakazudoさんのをパク参考にさせてもらいました。ちなみにNodeベースのCSSコンプレッサーであるsqwishなるものが必要なのでインストールしておく。

$ npm install -g sqwish

インストール出来れば早速設定に。sassとほとんど一緒。

grunt.initConfig({
    cssmin : {
        dist : {
            src : ['css/all.css'],
            dest : 'css/all.min.css'
        }
    }
});
// タスクが書かれたファイルを格納しているパス（ここではtasks）
grunt.loadTasks('tasks');

tasks/cssmin.js内は下記。

module.exports = function(grunt){

    // ログ用
    var log = grunt.log;

    // node.jsでコンソールコマンドを実行するためのモジュール
    var proc = require('child_process');

    // タスク（マルチタスクとして）を登録
    grunt.registerMultiTask('cssmin', 'minify css', function(){

        // 非同期タスクであることを示す
        var done = this.async();

        // 読み込み元
        var src = this.file.src;

        // 出力先
        var dest = this.file.dest;

        // cssを圧縮するコマンド
        var command = 'sqwish ' + src + ' -o ' + dest;

        // コンソールコマンドを実行
        var out = proc.exec(command, function(error, stdout, stderr){

            // エラー時
            if(error || stderr){
                log.writeln('File "' + dest + '" failed.');
                done(false);
            // 成功時
            }else{
                log.writeln('File "' + dest + '" created.');
                done(true);
            }
        });

    });

};

いざコマンドを叩いてみる。

$ grunt cssmin
Running "cssmin:dist" (cssmin) task
File "css/all.min.css" created.

Done, without errors.

デフォルトタスクの登録

その他のビルドツールのようにgruntとコマンドするだけで実行されるdefaultタスクを設定しておくには下記のようにする。

grunt.registerTask('default', 'concat min sass cssmin');

全体の変更をwatchで監視

watchなるビルトインタスクがある。あんまり詳しい解説はなかったけどfilesに監視したいファイル、tasksにタスクを指定するっぽい。

grunt.initConfig({
    watch : {
        scripts : {
            files : [
                'js/*.js'
            ],
            tasks : 'concat min'
        },
        sass : {
            files : [
                'scss/*.scss'
            ],
            tasks : 'sass cssmin'
        }
    }
});

下記で実行出来る。

# jsとscssを共に監視する場合
$ grunt watch

# jsのみ監視
$ grunt watch:scripts

# scssのみ監視
$ grunt watch:sass

とりあえず今はまだこれくらいしか分からないけどそれでも十分使えそう。 Windows、Mac共に動作するのがとてもいい。これからは案件ベースで作業する時のディレクトリルールとか決めていきたい。

jekylog

All doggs wanna be a Geek