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

ほげほげ(仮)

仮死状態

jQueryプラグインでTravis CI

JavaScript

jQueryプラグインでTravis CIが使えないか色々試したメモです。

nodeとかGrunt使いますが、まだまだ全然使ったことないので何か間違いがあれば指摘ください。


テストフレームワークQUnitです。QUnit自体の説明は省略します。
QUnit

Gruntインストール

Gruntが必要なのでインストールします。
grunt: a task-based command line build tool for JavaScript projects

Gruntのインストールにはnode.jsが必要です(ここでは割愛)

$ npm install -g grunt


PhantomJSインストール

コマンドラインからテストを実行するためにヘッドレスブラウザのPhantomJSをインストールしておきます。
PhantomJS: Headless WebKit with JavaScript API

簡単なのでHomebrewでインストールします。

$ brew install phantomjs


GruntでjQueryプラグインのテンプレート作成

Gruntを使ってjQueryプラグイン用のテンプレート作成します。

今回は travis-sample.js というサンプルのプラグインを作ります。

適当なディレクトリで

$ grunt init:jquery

を実行すると対話形式で色々聞かれるので入力していきます。

  • Project name: プロジェクト名
  • Project title: タイトル
  • Description: 説明
  • Version: バージョン
  • Project git repository: GitHubのリポジトリ
  • Project homepage: プロジェクトのページ
  • Project issues tracker: Issueの報告場所
  • Licenses: ライセンス
  • Author name: 作者名
  • Author email: 作者のメールアドレス
  • Author url: 作者のページURL
  • Required jQuery version: jQueryのバージョン

これを実行すると下記のようなテンプレートが自動で作成されます。

├── CONTRIBUTING.md
├── LICENSE-MIT
├── README.md
├── grunt.js
├── libs
│   ├── jquery
│   │   └── jquery.js
│   ├── jquery-loader.js
│   └── qunit
│       ├── qunit.css
│       └── qunit.js
├── package.json
├── src
│   └── travis-sample.js
├── test
│   ├── travis-sample.html
│   └── travis-sample_test.js
└── travis-sample.jquery.json

jQuery公式のプラグインレジストリ公開用のマニフェストファイルまで作成されるので便利。
Publishing Your Plugin | jQuery Plugin Registry


テストを実行してみる

何も編集していない状態でテストを実行してみます。

$ grunt qunit

実行結果が次のようになればOKです

Running "qunit:files" (qunit) task
Testing travis-sample.html....OK
>> 4 assertions passed (26ms)

Done, without errors.


次のようにgruntコマンドだけ実行すればlintとファイル結合・圧縮まで行なわれます。

$ grunt

ファイル結合・圧縮されたファイルはdistディレクトリが作られてその中に作成されます。

この辺の設定はgrunt.jsに書かれています。
Antみたいな感じですかね。


Travis CI用にタスク追加

Travis CIでは lint も行いたいので、lintとQUnitが実行されるようにします。

grunt.jsにタスクを追加

ファイル結合・圧縮はやらなくていいので、lintとQunitを実行するだけのタスクを追加します。

  // Default task.
  grunt.registerTask('default', 'lint qunit concat min');

  // Travis CI task.
  grunt.registerTask('travis', 'lint qunit');

npmのタスクを追加

package.json にgrunt.jsに追加したタスクが呼ばれるように修正します。
元々は "grunt qunit" となっている箇所を次のように修正します。
また、verboseオプションで詳細が出力されるようにしています。

  "scripts": {
    "test": "grunt travis --verbose"
  },


npmでテストを実行する

Travis CIではnpm testが実行されるので試しておきます。

$ npm test

色々出力されて、最終的にグリーンになってればOKです。


Travis CIの設定ファイル作成

.travis.yml ファイルを作成します。

language: node_js
node_js:
  - 0.8

nodeのバージョンを指定するのですが、nodeのバージョンによって何が影響されるのかはちょっと分からないです…


コード編集

ここまで来たら、あとはコード修正してプラグインを作成します。
あと、README.mdとかも修正しておきましょう。

コードを修正するときは

$ grunt watch

を実行しておくと、ファイル保存時にテストが自動実行されるので便利です。


今回のサンプルではREADME.md以外は修正せずやります。


GitHubにpush

ここまで来たらあとはGitHubにpushしてTravis CIの設定するだけです。

サンプルで作ったのはここにあげてあります。
STAR-ZERO/jquery-travis-sample · GitHub


すでに作ってあるプロジェクトにこの設定を適用するのは結構大変なので、先にやっておくことオススメします。


Gruntはちゃんと使ったこと無いのですが、今回のやつGrunt便利だなぁと思いました。
今後は積極的に使っていきたいですね。