WindowsのYeomanでAngularJSとPHPアプリのひな形を作る #PHP

ChocolateyパッケージのYeomanをインストールして、AngularJSとPHPアプリのひな形を作成するメモです。
Windowsのvagrantにて、synched_folder上でYeomanを使用するとファイルシステムの都合によるのかエラーを吐きます。
そのためWindows環境で用意することにしました。

Chocolateyのインストール

http://chocolatey.org の「Easy Install」に従い、以下をコマンドプロントに貼り付けて実行するとインストール完了です。

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

Yeomanのインストール

Yeomanのインストールは次をコマンドプロントで実行。

$ cinst yeoman

依存するパッケージも全てインストールされます。
参考 http://chocolatey.org/packages?q=yeoman

generator-angular-phpのインストール

AngularJSとPHP連携のgeneratorをインストール。

$ npm install -g generator-angular-php

yoの実行失敗…Node.jsのバージョンを上げて回避

$ yo angular-php

yoを実行すると「Object has no method 'tmpdir' 」なエラーが出力され、ググると次のページにたどり着きました。
https://github.com/gruntjs/grunt-contrib-imagemin/issues/142
「Node >= 0.10」というコメントがあったので、http://nodejs.org/ から0.10系をインストールしてyoのエラーを回避。
ちなみにChocolateyは0.8系をインストールしていました。

composerの実行

yoは最後まで実行されましたが、途中でcomposerが失敗していました。
ディレクトリを一時的に移動して手動実行。

$ cd app¥api
$ php composer.phar update

npm install

gruntが入っていないのでnpmでインストール。yoを実行したディレクトリで次を実行します。

$ npm install

webappとかのgenerateだと自動でインストールしてくれるのですが。。

grunt serveの実行

$ grunt serve

「compassが無い」と怒られます。
依存関係によりcompassもインストールされているはずですが入っていません。
また$ cinst compassしてもインストール済みと出力されます。
なので再インストール。

$ cinst -force compass

compassのパスが通り、grunt serveが実行可能になります。

phpソースをいじってみる

次の変数$resourcesがangularのリクエストに対するレスポンスです。

app¥api¥public¥resource.php

    $resources = array(
        'html5-boilerplate' => array(
            'name' => 'HTML5 Boilerplate',
            'description' => 'HTML5 Boilerplate is a professional front-end template'
                . ' for building fast, robust, and adaptable web apps or sites.',
        ),
        'angular' => array(
            'name' => 'Angular',
            'description' => 'AngularJS is a toolset for building the framework most'
                . ' suited to your application development.',
        ),
        'karma' => array(
            'name' => 'Karma',
            'description' => 'Spectacular Test Runner for JavaScript.',
        ),
    );

変数の中身をいじくると表示が変わります。

gruntでビルド

karmaのテストが無く、ビルドが途中で止まるのでforceオプションを付けます。

$ grunt --force

distディレクトリに配布物が生成されます。

途中つまずきましたが、Windowsでインストールを簡単にしてくれるChocolateyはとても便利ですね。