読者です 読者をやめる 読者になる 読者になる

くりにっき

ドリコムのプリキュアの人です

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

Javascript Chrome 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の標準(?)タスクランナーを使ってみました。

参考にしたサイト

自分がやった手順

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

f:id:sue445:20140723021149p:plain

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

出来たやつ

メモ

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

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