Grunt導入してみた - ただのブログです

普段YUI Compressorを使っていたんだけど、Gruntが良いっぽい噂を聞いたのでGruntを試してみる。
あのjQueryもどうやらコレみたい？GitHub見る限りは。

実行環境は

Windows 7(64-bit)

アンチリンゴですし、Linux使ってると一般ユーザーから変な拡張子のファイルが送りつけられるといういじめを受けるので普段の環境はWindowsです。.netとか使うし。

すんなりと実行できたけど、一応やったことをメモ代わりに。初めてのインストール///なので余分な出順やもっと簡単に出来るかもしれないのでそういうのを知っていたら教えてくださいｗ

まずはnode.jsのインストール

GruntはNode.js上で動くのでここに行き、INSTALLのボタンをぽちっと押す。
入手したのはCurrent Version: v0.10.12

とりあえずNode.jsデフォルトに従うのが無難だと思うので、全てデフォルトでインストール。
インストールが終わったら

npm -v

と実行して

1.2.32

とインストールされているのを確認。

Grunt CLIをインストール

次に、Grunt CLIをインストールする

npm install -g grunt-cli

インストールが終わったら

grunt -version

で確認。

ビルドのための設定を行う

作るファイルは、これを読みながら、書いていく。
まずは、ルートフォルダにpackage.jsonを作成し下記の内容を記入する

{
  "name": "princessjs.extend",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

npm install grunt --save-dev

を実行してインストール。
今回はファイル結合が一つの目的なので書き忘れてたconcatも入れる。

npm install grunt-contrib-concat --save-dev

package.jsonが更新されて

{
  "name": "princessjs.extend",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-uglify": "~0.2.2",
    "grunt-contrib-concat": "~0.3.0"
  }
}

となった。

で、本命のGruntfile.jsを作成し下記の内容で保存

module.exports = function(grunt) {
    'use strict';
 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
 
        concat: {
        core: {
                src: [ 'src/*.js', 'src/util/*.js'],
                dest: 'build/<%= pkg.name %>.js'
            },
            extend: {
                src: [ 'src/extend/*.js'],
                dest: 'build/<%= pkg.nameExtend %>.js'
            }
        },
 
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            core: {
                src: 'build/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js',
            },
            extend: {
                src: 'build/<%= pkg.nameExtend %>.js',
                dest: 'build/<%= pkg.nameExtend %>.min.js',
            }
        },
        jshint: {
            files: ['src/**/*.js'],
            options: {
                jshintrc: '.jshintrc'
            }

        }
    });
 
    // Load grunt tasks from NPM packages
    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
 
    // Default grunt
    grunt.registerTask('build', [ 'jshint', 'concat', 'uglify' ]);
 
};

今回はプロトタイプ拡張を別に分ける形で、結合・圧縮してみた。
で、このビルドを実行するには

grunt build

を実行するだけ。

実行するとbuildディレクトリが出来て、princess.js、princess.extend.jsとそれぞれのminが出来上がった。 minの方のコードを見てみると、変数名がaやらbやらjQueryのminと同じになってる！

一応圧縮で壊れていないか心配になったのでJsTestDriverを実行してみてもALLグリーン。
やったね！たえちゃん

今回実行したプロジェクトはここにあります