gradleでnpmを実行

./gradlew buildを実行した時に、webpackなしでless.jsを実行したいと考えました。ユーザーが色変更ダイアログをクリックした時に、旗アイコンの色を変更することになります。この変更は、cssのstylesheetをプログラムで変更する必要がありました。

@keyframes内の色を変更する処理

"@keyframes" の色を変更する処理を書いてみました。この処理は納得いく処理ではないと思いました。コードを保守する上では、複雑すぎるように思えたのです。結局less.jsをブラウザ側で実行する方法をとることにしました。

ブラウザ上でのless.jsの使用

less.jsはゲーム上の色を変更するのに、効果的でした。データベースから、色設定を取得し、lessファイルに設定して、クライアントに送りたいと考えました。色設定はユーザー毎に異なるからです。最初lessファイルは、サーバー側で処理される必要がありました。lessファイル内の数行は、'e'関数でエスケープされなければならなかったのです。

webpackでのless-loaderの使用

当初、webpackのless-loaderを使用して、ファイルをアプリに組み込もうとしました。。webpackは、完全なcss-loaderを使用しているので、完全なcssファイルを要求しました。サーバ側処理のための'e'関数でエスケープされた行は、cssの構文にならないので、エラーとなってwebpackの処理が進みませんでした。webpackのlessの処理を諦めて、less.jsを単独で実行させたいとの考えに至りました。

gradle-nodejs pluginの開発

webpackなしでless.jsを実行する場合に次にあげる方法が考えられました。

  1. 新しいアプリを作成する場合に、less.jsを直接実行する方法。
  2. less.jsを実行する処理をbuild.gradleに書いて、自動実行する方法。

開発過程は出来る限りシンプルにしたいと考えて、2番目の方法を選択しました。node.jsのgradle pluginを検索して試してみました。どのプラグインもよく開発されてはいるものの、少々物足りない部分がありました。私は、npmのコマンド引数を調整できるものを使いたいと考えていました。そこで、自分の為にpluginを書くことにしました。もちろんgradle.buildにコマンド引数を設定して実行できるようにしました。

プラグイン開発で習得できたもの

gradleのプラグイン開発をとおして、以下の点の知見を広げることができました。

  1. groovy 構文 -- 特にclosure関連
  2. gradle api
  3. テストapi for gradle plugin

gradleのプラグインはこちらから入手可能です。

gradleのプラグインのソースは、こちらでcloneできます。