Grunt初心者が2時間くらいでChrome ExtensionをGrunt対応してみた

rubyのgemだと

rake release

で

1. gemを作成
2. gemのバージョンで git tag -a 〜
3. git push origin master
4. git push origin --tags
5. RubyGems.org にgemをリリース

まで全部やってくれるのですが、Chrome Extensionでも同じことをやりたくてGruntタスクにしてみました。

ただし、5. の部分はChrome Extensionはコマンドラインからファイルを（たぶん）アップできないためDeveloper Consoleにzipをアップするためのzipを作るだけです。

rubyでRaketaskにしてもよかったのですが「郷に入りては郷に従え」ってことでJavaScriptの標準(?)タスクランナーを使ってみました。

参考にしたサイト

• Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) - ï¼ IT

自分がやった手順

Homebrewでnodejsを入れる

brew update

brew install nodejs
brew upgrade nodejs # 既にインストール済ならこっち

npm init

対話形式で質問に答えていくと package.json *1が作られる https://github.com/sue445/chrome-chatter-share/commit/75a2ac5e11a2c7be834f1b85c2f96c63b335ecc8

参考サイトを元にGruntfile.jsのスケルトンを作って動作確認

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
    grunt.registerTask('default', 'Log some stuff.', function() {
        grunt.log.write('Logging some stuff...').ok();
    });
};

grunt コマンドでログが出てくることを確認

https://github.com/sue445/chrome-chatter-share/commit/7cbbae3c6f2f85abecbf3a58907dea594e01e9c0

grunt-chrome-compileを入れる

やっぱりというか、先人がモジュールにしてくれてるのでそれを有難く利用

npm install grunt-chrome-compile --save-dev

すると package.json にモジュールが追加される

Gruntfile.jsに

grunt.loadNpmTasks('grunt-chrome-compile');

を追加。

あとはgithubみながら Gruntfile.jsを調整

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        'chrome-extension': {
            options: {
                name: "chrome-chatter-share",
                version: "1.0.3",
                id: "aehgkgapfagaljikampcebpacdcpkbfc",
                chrome: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
                clean: true,
                buildDir: 'build',
                resources: [
                    "css/**",
                    "fonts/**",
                    "img/**",
                    "lib/**",
                    "src/**",
                    "*.html",
                    "LICENSE",
                    "manifest.json",
                    "README.md"
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-chrome-compile');

    grunt.registerTask('default', ["chrome-extension"]);
};

一応 .gitignore に下記を追加しておく

echo "node_modules/" >> .gitignore  # 依存モジュールがインストール先
echo "build/" >> .gitignore  # zipの作成先

https://github.com/sue445/chrome-chatter-share/commit/bc88948c45a138c9eaa3d326875ecd4a2c97d8a7

これで

grunt chrome-extension

で build/chrome-chatter-share.zip が作られるので、それをDeveloper ConsoleでアップすればOK

grunt-git をセットアップ

さっきと同じく

npm install grunt-git --save-dev

して

Gruntfile.jsに

grunt.loadNpmTasks('grunt-git');

を追加

あとはgithubみながら必要なのを Gruntfile.js に追加

今回自分が必要だったのは

git tag -a "〜"
git push origin --tags
git push origin maser

だったのでその3つを追加

module.exports = function(grunt) {
    var manifest = grunt.file.readJSON("manifest.json");

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        'chrome-extension': {
            options: {
                name: "chrome-chatter-share",
                version: manifest.version,
                id: "aehgkgapfagaljikampcebpacdcpkbfc",
                chrome: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
                clean: true,
                buildDir: 'build',
                resources: [
                    "css/**",
                    "fonts/**",
                    "img/**",
                    "lib/**",
                    "src/**",
                    "*.html",
                    "LICENSE",
                    "manifest.json",
                    "README.md"
                ]
            }
        },
        gittag: {
            append: {
                options: {
                    tag: manifest.version,
                    message: "release v" + manifest.version
                }
            }
        },
        gitpush: {
            tag: {
                options: {
                    tags: true
                }
            },
            master: {
                options: {
                    branch: "master"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-chrome-compile');
    grunt.loadNpmTasks('grunt-git');

    grunt.registerTask('default', ["chrome-extension"]);
};

バージョン番号をいくつも定義するのが面倒だったので manifest.json から読み込むようにしました。 *2

https://github.com/sue445/chrome-chatter-share/commit/a870abe7dfccfae354ca8a102e34ebea6fa230e0

最後の仕上げ

grunt.registerTask('default', ["chrome-extension", "gittag:new_version", "gitpush:tag", "gitpush:master"]);

defaultにタスクを登録しておくことで、grunt コマンドだけでタスクが順番に実行される。

https://github.com/sue445/chrome-chatter-share/commit/bce5cb367d68d59cb45853bd7a663d86b3d45940

出来たやつ

• 作業ログ https://github.com/sue445/chrome-chatter-share/pull/13
• 完成形
  • package.json: https://github.com/sue445/chrome-chatter-share/blob/6201c935b989c48e129a36e4e26a7601e6eb99d8/package.json
  • Gruntfile.js: https://github.com/sue445/chrome-chatter-share/blob/6201c935b989c48e129a36e4e26a7601e6eb99d8/Gruntfile.js

メモ

• Gruntfileã‚’JavaScriptで書くかcoffeescriptで書くか迷ったけど、プラグインのセットアップがJavaScriptの方が多かったのでそっちで書いた
  • jsを見ただけでcoffeeに脳内変換できるだけのスキルはまだないので、、、
• zipのファイル名は manifest.json の short_name を使えばよかったかもしれない
• プログラム書くのは楽だけどオレオレ実装は汎用性がないので、標準の仕組みがあるならそれに乗っかってしまうのが楽だし他の人と会話しやすい
  • デファクトスタンダードで作っておけば他の人も見ればだいたい分かるはず
  • オレオレスクリプトは積極的に捨てるべき

*1:RubyのgemspecやGradleのbuild.gradle的なやつ

*2:package.json と manifest.json でバージョン番号が複数定義されてるのがつらいけど、この重複排除ってできるんでしょうか？＞詳しい人