CIまでやってみるやってみたかったシリーズです。Node周りの環境をちゃんとしたかったので。長めのエントリになります。́Д`)gruntの自分タスクをちゃんと作ってみる今までは、grunt-contrib-xxxみたいなのをloadNpmTasksして使ってるだけだったんですが、そろそろgrunt内部の動きとか、オリジナルのタスク(これから必要になりそう)の作り方なんかも知っておきたかったので作ってみました。pipelineがすごい便利でした。sprocketsはその根幹になる仕組み?なのかな?下記のようなコード、見たことありますよね。somedirこれをgruntのタスクとして動かせるようにしただけの単純なやつです。「え、そんなんgrunt-contrib-concatでいいやん」はい、その方がラクなんですが、ちょっと用途が違ってまして。メインのソースコードがあって、その途中で任意の外部スクリプトを注入したいケースを想定しています。grunt-contrib-concatの場合は、単純にファイルを結合するだけのものなので、最終的には結合されたファイルをメインファイルとして扱うことが多いですよね。grunt-sprocketsの場合は、すでにメインファイルはあって、その中にファイルをインクルードすることを目的にしています。end.js})(this);みたいなファイルを用意する必要があります。jqueryだと、intro.js/outro.jsというファイルが用意されていますね。これが面倒じゃないかなってことで。b.js})(this);と書くことでビルドができます。どちらがいいかは好みにもよるので一概には言えないと思いますが。慣れてる方でいいんじゃないですかね。gruntの内部構造について今回はここの知識が欲しかったので、ここがメインです。・タスク追加方法あたりです。使ってるgruntのバージョンは0.4.1です。0.3系だと動かないかもしれません。公式のリファレンスとか、翻訳されている方もいらっしゃるので紹介。STUDIO処理対象ファイル/ファイルの中身の取得grunt.file.xxxで操作できるみたいです。}<p>基本、これでできるかと。style="color:red">ファイルパスは、Gruntfile.jsのあるディレクトリからの相対パス</strong>であることです。grunt.file.setBase()で変更もできるようです。</p><h4>ディレクトリ内のファイルリストの取得</h4><p>grunt.file.expand()を使えばOK。‘src/*’);<p>ワイルドカードが使えるので、これで一覧が取得できます。引数はいくつかパラメータがあるので、リファレンス参照です。</p><h4>Gruntfile.jsで書いた設定の情報の取得</h4><p>grunt.config('タスク名');で取得できます。out/assets.js<p>これは必ず使うでしょうね。</p><h4>コンソール出力系</h4><p>grunt.log.xxxで出力。これはリファレンスを見てもらうといいです。grunt.log.okxxxで成功系、grunt.log.errorxxxで失敗系のログが色付きで出ます。</p><h4>タスク追加方法</h4><p>これは勘違いしていました。タスクファイルの中で、必ずgruntを引数に取る関数をエスクポートしないといけないと思っていたのですが、内部でregiterTaskをすれば何もエクスポートしなくてもOKなようです。grunt.loadTaskでロードしたタスクファイル内で、module.exportsの結果に関数オブジェクトを返却すると、その関数を実行するようです。今回のケースだと、タスクが2重に走ってしまうみたいです。(gruntのソースコードを確認)今回はタスクファイルの中でregisterTaskをするので、gruntでロードした場合はmodule.exportsせず、busterでロードした場合は関数を返却するようにする必要があります(テストを実行したいので)。́Д`)もう少しいい方法があると思うので調査。#d20808"><p>ただし、今回はメインコンストラクタであるSprocketsをエクスポートしています(関連のないものをエクスポートしてもOK)。これは後述のように、コンストラクタが戻らないとテストにしくいからです。́∀`)∩ワーイ詳しくはソースを見てもらえれば。</p><h2>テストもやるよ</h2><p>次はタスクのテストですが、私はbuster.jsを使っているので、こちらのテストケースを書きます。他のテスティングフレームーワークでもいいんですが、個人的にRSpecのようなテストの書き方にちょっと慣れなくて、普通にアサーションができるテストが好みです...。あ、ちなみにbuster.jsはアサーションするタイプでもRSpecのような書き方のどちらでもできるようで大変優秀です。(使ってる人増えると嬉しいな...)テストとしては不完全かもですが、とりあえずインストールとテストを書いてみます。};<p>続いて、テストケース。}<p>"scripts":"test"のセクションにbuster-testへの相対パスを指定します。testでbusterのテストケースが走ります。CI側の設定方法は以下のサイトを参考にさせて頂きました。1000ch.net感想などなかなか手を出してなかったんですが、やってみるとサクサクできたので面白いかなー。╹◡╹)あとは、コツコツHaxeを勉強しているので、Haxeで静的にコンパイルチェック+テストでより安全なビルドが作れるようになれば最高ですね。2013node.js。