先週末から、CSSプリプロセッサやポストプロセッサで出力されたCSSの整形を実現する「grunt-csspretty」の作成を行いました。その過程で気付いたことなどをメモしておこうと思います。
プロセッサを作る部分と整形を実行する部分を分けた方が良かった
最初は、grunt-cssprettyの中でPostCSSを用いてプロセッサを作る作業から、整形したCSSを保存するまでの全てを完結するようにしていました。しかし、これから開発予定のgulp-cssprettyがどのようなコードになるかを想像すると、また同じロジックを書かなければならないことに気付きました。
その時、Autoprefixerとgrunt-autoprefixerの関係を思い出しました。grunt-autoprefixerは、Autoprefixerが作成するプロセッサを受け取って実行し、CSSを保存しています。gulp-autoprefixerもgrunt-autoprefixerと同様の処理をしています。ベンダープリフィックスを付けたり外したりする処理に問題があれば、Autoprefixerのみを修正すれば良いのです。
そこで、2月18日にCSS整形のプロセッサを作成する部分をCSS Prettifierに分離してリリースを行いました。
テストがとても有益なことを実感
JavaScriptのテストについては、以前参加したFrontrend Vol.4 powered by CyberAgent, Inc.等で拝聴しましたが、正直なところなかなかテストを書くことが出来ていませんでした。
しかし、CSS Prettifierについてじっくり考えてテストを作成したところ（まだまだだとは思いますが）、次のようなことを実感しました。
- バグの発見につながった
- コードのリファクタリングが容易になった
コードを編集した後、再度テストを実行するだけでコードが正しいか否かを判断できるのがとても効率的でした。
テストにはNodeunitを利用
テストにはNodeunitを利用しました。また、Travis CIも設定し、githubにpushした際にもテストが行われるようにしました。
Travis CIでテストをするには、まず.travis.ymlを作成し下記を記述します（Node.jsの0.8と0.10でテストを実施）。
language: node_js
node_js:
- '0.10'
- '0.8'
次に、package.jsonに下記を記述します。
{
"scripts": {
"test": "nodeunit test"
},
}
これでTravis CIがnpm testを実行した際に、テストが行われるようになりました。
今後
オプションの指定例を、先日の記事「Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開」に追記したいと思います。
テストに関しては、ブラウザ上で動作するJavaScriptのテストも勉強したいなと思っています。