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

ほげほげ(仮)

仮死状態

Grunt v0.4をTravis CIに対応させる

JavaScript

以前、jQueryプラグインでTravis CI - ほげほげ(仮) ってのを書いたんですが、内容が古くなってるので書き直します。

今回もjQuery Pluginでのサンプルです。

かなりざっくりとした説明ですが、細かい部分はGrunt公式ドキュメント見たほうが手っ取り早いのそっちを見てください。

Grunt v0.4 インストール

$ npm install -g grunt-cli

v0.3をインストールしている人はアンインストールが必要です

grunt-init インストール

http://gruntjs.com/project-scaffolding

様々なテンプレート作成してくれるやつです

$ npm install -g grunt-init

jQuery Plugin テンプレート インストール

jQuery Pluginの雛形を作成するためにgit cloneしてきます。

$ git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

jQuery Plugin テンプレート作成

$ grunt-init jquery

色々聞かれるので入力していきます。完了すると次ようなディレクトリ構成ができると思います。

├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE-MIT
├── README.md
├── libs
│   ├── jquery
│   │   └── jquery.js
│   ├── jquery-loader.js
│   └── qunit
│       ├── qunit.css
│       └── qunit.js
├── package.json
├── src
│   └── <プロジェクト名>.js
├── test
│   ├── <プロジェクト名>.html
│   └── <プロジェクト名>_test.js
└── <プロジェクト名>.jquery.json

package.jsonには必要となるモジュールがすでに入っています。

Gruntfile.jsには様々タスクが生成されてます。また各モジュールを読み込む処理も入ってます。

<プロジェクト名>.jquery.jsonjQuery Plugin Registryに登録する用です。

Gruntモジュールをインストール

package.jsonに記述されてる必要なモジュールをインストールします。

$ npm install

タスクを実行してみる

$ grunt

package.jsonに記述されてるデフォルトのタスクが実行されます。

テンプレートの状態だと下記のようになっていると思います。

grunt.registerTask('default', ['jshint', 'qunit', 'clean', 'concat', 'uglify']);

個別でタスクを実行するには次のように引数にタスクを入れます

$ grunt qunit

あとはがんばって開発してね…

Travis CIに対応する

ここからがようやく本題です。

package.json

Travisでは実行されるのがnpm testなのでそれに対応します。

テンプレートから作った場合package.jsonに次のようになっているので、qunitのタスクだけが実行されます

  "scripts": {
    "test": "grunt qunit"
  },

jshintも動かしたいので追加します。

  "scripts": {
    "test": "grunt jshint qunit"
  },

.tarvis.ymlを追加する

.travis.ymlを追加して次のように記述します。

language: node_js
node_js:
  - "0.8"
before_script:
  - npm install -g grunt-cli

前回と変わってるのはbefore_scriptの箇所が追加になってます。

ここまで出来たらGitHubにpushしてTravis CIの設定をします。

サンプル

ここ にサンプルを上げてあります。

中身はTravis CIに対応しただけでテンプレートのままになってます。

公開してるjQuery Pluginの対応しなきゃ…