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

のらねこの気まま暮らし

Perlについてとか、創作についてとか、発展途上の自分と向き合う記録。

grunt-init で jquery-plugin を作って travisCIに上げるまでのメモ

準備

以下をインストール

$ npm install -g grunt-init
$ git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

プロジェクトの作成

grunt-init jqueryをプロジェクトディレクトリで走らせるとplugin用のアセットを生成してくれる。 なお、既にルートディレクトリにpackage.jsonが存在するとエラーになる模。様l

$ mkdir eg-grunt-init
$ cd eg-grunt-init
$ grunt-init jquery

生成されたコード

.
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE-MIT
├── README.md
├── eg-grunt-init.jquery.json
├── libs
│   ├── jquery
│   │   └── jquery.js
│   ├── jquery-loader.js
│   └── qunit
│       ├── qunit.css
│       └── qunit.js
├── package.json
├── src
│   └── eg-grunt-init.js
└── test
    ├── eg-grunt-init.html
    └── eg-grunt-init_test.js

とりあえず動かす

なにもオリジナルなコードは書かずに、そのまま動かす。

$ npm install
$ npm test

すでにもうテストが動くという親切っぷり。 テストはqunitを使っている。そのまま使うか、mochaでも入れるか、は各自の自由なのかな。 また、jshintも設定されてるので、これに従えばjqueryの規約に沿ったコードになる様子。

サンプルコードは2indentで書かれているが、jshint的には特に規定はなく、そのまま4indentで書いてしまったが、好きに設定して良いのかもしれない。 まあ、minifyするか

pluginを実装する

かく。 テスト通らせる

travisCIに上げる

ここでちょっとあれこれしたのでメモ。

  • grunt-cliをinstallする
    • デフォルトではgrunt-cliが無いので、npm install --save-dev grunt-cliした
  • vesionかえる
    • package.jsonに定義されているversionが0.0.0-ignoredだったので、npmとれなかった気配
    • versionやnpmの流儀についてはちゃんと調べずここまで来ているので、なんか勘違いしてるきもするけど、とりあえず動いたので。

おしまい

grunt-initはべんりだなーって思った。 でもqunitは使いにくい。

あ、あと。jquery-formize on Githubというpluginを書きました。form要素にデータ入れたりデータ取ったりエラーのスタイル当てるのにいい感じにしてくれる子がほしかった。 この子を書くときにgrunt-initに入門したので、色々勉強になった。まる。