AltJS として人気のある(?) Haxe ですが、Javascript を開発をするならビルド環境には Grunt を使うと便利です。Grunt を使うことでファイルが変更され次第コンパイルしたり、生成された Javascript ファイルを minify したりといった Javascript 開発では定番の処理が簡単にできるようになります。
この文章では Grunt で Haxe のビルド環境を整えるまでの手順を説明します。
Haxe ユーザ諸氏は既に Haxe がインストール済みだと思いますので haxe コマンドがインストールには触れません。あ、あと git コマンドがもし入っていなければあらかじめインストールしてください。
Node.js のインストール
現時点の Grunt (version 0.4.x) を動かすには Node.js の 0.8.0 以上が必要です。
コマンドラインから node --version を実行すると、Node.js がインストールされていれば、現在インストールされているバージョンが表示されます。
0.8.0 以上がインストールされていない人は http://nodejs.org/ から Node.js をダウンロードしてインストールします。
もし「複数のバージョンの Node.js を切り替えながら使いたい」「ユーザのホームディレクトリの下にインストールしたい」と思った人は nvm (Node Version Manager) を使って Node.js をインストールすると良いでしょう。
Grunt のインストール
Grunt は複数のパッケージに分かれています。
まず npm (Node Package Manager) コマンドを使って grunt-cli パッケージと grunt-init パッケージをインストールします。
$ npm -g install grunt-cli grunt-init
Haxe用プロジェクトテンプレートのインストール
grunt-init は ~/.grunt-init/ にある Grunt プロジェクトのテンプレートを使用します。デフォルトでは ~/.grunt-init/ にはテンプレートが無い状態なので Haxe 用のテンプレート (grunt-init-haxe)をインストールします。
$ git clone https://github.com/Fintan/grunt-init-haxe.git ~/.grunt-init/haxe
プロジェクトの作成
grunt-init を使ってプロジェクトを作成します。テンプレートには haxe を指定します。
grunt-initコマンドを実行したディレクトリにプロジェクトのファイルが展開されるので、プロジェクト用のディレクトリを作ってから実行しましょう。
grunt-init を実行するとプロジェクト名などをきかれるので答えます。
$ mkdir MyProject
$ cd MyProject
$ grunt-init haxe
Running "init:haxe" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
"haxe" template notes:
Creates a Haxe project template
Please answer the following:
[?] Project name (Choose a main class name - first character needs to be upper case) MyProject
[?] Project title (A Haxe Project.)
[?] Description (Simple description.)
[?] Version (0.1.0)
[?] Project git repository (git://github.com/tkawachi/MyProject.git)
[?] Project homepage (https://github.com/tkawachi/MyProject)
[?] Project issues tracker (https://github.com/tkawachi/MyProject/issues)
[?] Licenses (MIT)
[?] Author name (KAWACHI Takashi)
[?] Author email (tkawachi@gmail.com)
[?] Author url (none)
[?] Do you need to make any changes to the above before continuing? (y/N)
Writing .jshintrc...OK
Writing GruntFile.js...OK
Writing README.md...OK
Writing build.hxml...OK
Writing resources/html/assets/styles.css...OK
Writing resources/html/MyProject.html...OK
Writing src/MyProject.hx...OK
Writing LICENSE-MIT...OK
Writing package.json...OK
Initialized from template "haxe".
You should now install project dependencies with npm install. After that, you
may execute project tasks with grunt. For more information about installing
and configuring Grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
Done, without errors.
これでプロジェクトが出来ました。
npm install コマンドを実行して必要なライブラリをインストールします。
$ npm install
これでビルド環境が整いました。
早速ビルドしてみましょう。
$ grunt
これで dist/ 以下にコンパイル結果が生成されます。
grunt watch を実行すると .hx ファイルを変更するたびにコンパイルされます。
$ grunt watch
まとめ
Haxe を Javascript 開発時の定番である Grunt と組み合せてセットアップする方法を紹介しました。
grunt-init を使うことで Haxe + Grunt のプロジェクトが簡単につくれます。
明日は shohei909 さんです。よろしくお願いします。