tokuhirom's Blog

JS とかの管理を grunt+bower でやるようにしてみた

bower 的なものを使わないと､｢これどこから拾ってきたんや……｣という感じになりがちなので､一応やったほうがいいでしょうと｡

bower は直接使っていると､git のレポジトリをぶちまけるばかりで､あきらかに不要なファイルを配信することになり気持ち悪いなーと思っていたのですが､grunt なり gulp なりを使うと､いらないファイルは展開されないようです(ちゃんと main というプロパティを bower.json に記述している場合)｡

Perl なりなんなりで書いていると､node.js のツールを一部だけ使うのとかだるくてアレですが､Java の案件だとみんな何かしら LL を併用しながらやるので､まあいいかな､と｡

package.json に以下のように記述します｡そうすれば grunt の依存とかもなんとなく入る｡

    {
        "name": "jmx-dashboard",
        "version": "0.0.0",
        "description": "",
        "main": "",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "tokuhirom",
        "license": "MIT",
        "devDependencies": {
            "grunt": "~0.4.1",
            "grunt-bower-task": "~0.2.3"
        }
    }

で､Gruntfile.js に grunt のルールを以下のような感じでかく｡

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                targetDir: './src/main/webapp/components/',
                layout: 'byComponent',
                install: true,
                verbose: false,
                cleanTargetDir: true,
                cleanBowerDir: true
                }
            }
        },
    });
    grunt.loadNpmTasks('grunt-bower-task');
    grunt.registerTask('default', ['bower:install']);
};

あとは bower.json に依存管理を実際､以下のように記述すればよろしい｡

{
    "name": "jolokia dashboard",
    "version": "0.0.1",
    "dependencies": {
        "bootstrap": "~3.3.2",
        "underscore" : "~1.7.0",
        "dispatch": "~1.3.0"
    }
}

最後に README.md に以下のように記述すればよい｡

## 静的リソースの管理

    > npm install -g grunt
    > grunt

JS を1ファイルにまとめるとかもやってもいいのだが､実際にはデバッグしづらくなったりして時間のロスになりがちでもあろうし､だいたい僕が書くJSとか､社内の人か半径5kmぐらいの人しかつかわないので､頑張る必要がない｡ ということで､そういう感じにしている｡なんかうまいことやる方法あれば script タグなどが簡潔になるならそれはそれで嬉しいので､やりたいかもしれない｡

glup でもよかったのだが､なんかうまく動かなかったのでとりあえず grunt で｡得にこれ以上のことは得にする予定がないのでいいかな的な｡

てかこの程度のこと bower コマンド単体でもできてよさそうなんだけど､なんかできないっぽくて辛い｡

> bower -L src/main/webapp/components/ --main

とかでできるようにするのが普通なのでは…… 俺が知らないだけでなんか方法があるのでは??という思いがあります｡

(bower は仕様がそれなりに固まってきてるようなので､Pure Perl でクライアント書いてどやこや､とかもできなくはないと思う)

P.S. http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537 ↑このエントリを参考にしました｡