サンプルを gh-pages に上げる時に楽したい

Polymer.dart 使ってみたくて color_palette や pixel_canvas を作ってみた。この時、せっかくなので gh-pages に利用サンプルも上げようとしたら、意外と苦労したのでメモ。

gh-pages に上げようとしたサンプル:

• https://github.com/kui/color_palette/tree/master/example
• https://github.com/kui/pixel_canvas/tree/master/example

実際に gh-pages に上げたページ:

• https://kui.github.io/color_palette/
• http://kui.github.io/pixel_canvas/drawing_with_drag.html

前提

Pub Package Layout に基づいて、サンプルは プロジェクトルート/example に置き、さらに pub build example すると、プロジェクトルート/build/example にビルドしたものができる状態を前提とします。

便利パッケージを追加

便利パッケージ ghpages_generator を yamspec.yaml の dev_dependencies に追加:

...
dev_dependencies:
  ghpages_generator: '>=0.2.0 <0.3.0'
  path: '>=1.2.0 <1.3.0'
...

スクリプト作る

pub Package Layout によると、プロジェクトのための便利スクリプトは プロジェクトルート/tool に置けとのことなので、gh-pages サイト作るスクリプトも プロジェクトルート/tool に置く。

$ mkdir tool
$ touch tool/gh-pages.dart
$ chmod 755 tool/gh-pages.dart

肝心のスクリプト本体はこんな感じ:

gh-pages.dart

#!/usr/bin/env dart

import 'dart:io';

import 'package:ghpages_generator/ghpages_generator.dart' as gh;
import 'package:path/path.dart';

main() {
  var gen = new gh.Generator(rootDir: projectDir)
    ..withExamples = true;
  gen.generate(doCustomTask: (workDir) {
    gh.moveExampleAtRoot(workDir);
  });
}

String get projectDir =>
    absolute(
        dirname(
            dirname(Platform.script.toFilePath())));

アップロード

実行すると gh-pages 作ってコミットしてくれるので、git push するだけ。

$ tool/gh-pages.dart
$ git push origin gh-pages

おわり。