Mojolicious + AngularJS + Yeoman = Mojangman?

MojolicousをAPI dedicatedなバックエンド、AngularJSをフロントにするWebappの構築を考えています。 Yeomanでdist以下をどのようにデプロイするかが述べられていますが、git subtreeを使った方法だと複雑になりそうです。

色々調べてみると、Jeffrey氏がRailsとの組み合わせを自身のブログで話しています。

Angular + Rails + Yeoman = Angrailman?

タイトルが面白いですね。私はMojoliciousファンなのでこのブログのタイトルは Mojoを先頭に持ってきました^^

で、話してることは単純でangularディレクトリを作って、そこにyo angularを展開し、distディレクトリを../publicにマッピングするだけです。 Mojoliciousでもやってみましょう。

$ mkdir Mojangman
$ cd Mojangman
$ mojo generate app Mojangman
$ mv mojangman/* .
$ rmdir mojangman
$ mkdir angular
$ cd angular
$ yo angular

ここまでで、こんなツリーになってるはず。

├── angular
│   ├── Gruntfile.js
│   ├── app
│   ├── bower.json
│   ├── karma-e2e.conf.js
│   ├── karma.conf.js
│   ├── node_modules
│   ├── package.json
│   └── test
├── lib
│   ├── Mojangman
│   └── Mojangman.pm
├── log
├── mojangman
├── public
│   └── index.html
├── script
│   └── mojangman
├── t
│   └── basic.t
└── templates
    ├── example
    └── layouts

それからGruntfileを変更して、

$ vi Gruntfile.js
# change the below entry
grunt.initConfig({
    yeoman: {
        app: require('./bower.json').appPath || 'app',
        dist: '../public' // Change from dist to ../public
    },

Gruntでビルドするとpublic/以下にAngularのコンテンツがビルドされる。

$ grunt build  # under angular directory
$ cd ..
$ tree -L 1 public
public
├── 404.html
├── bower_components
├── favicon.ico
├── fonts
├── images
├── index.html
├── robots.txt
├── scripts
├── styles
└── views

で、Mojoliciousのrouteとコントローラをpublicに見るようにすれば、

Mojangman.pm

package Mojangman;
use Mojo::Base 'Mojolicious';
# This method will run once at server start
sub startup {
    my $self = shift;
    # Documentation browser under "/perldoc"
    $self->plugin('PODRenderer');
    # Router
     my $r = $self->routes;
     $r->route('/')->to('example#serve_root');
}

Mojangman/Example.pm

package Mojangman::Example;
use Mojo::Base 'Mojolicious::Controller';
sub serve_root {
    my $self = shift;   
    # will render the index.html file found in the /public directory
    $self->render_static('/index.html');
}

それで、daemonをあげれば完成！(というか始まり）

$ script/mojangman daemon
Server available at http://127.0.0.1:3000.

一応、コードをあげておこう。 https://github.com/shohey1226/Mojangman

追記: May 1, 2014

grunt buildがカレントディレクトリ外でcleanできない（ファイルを消せない）ので、Gruntfile.jsのCleanに{ options: { force: true}}を追加して消せるようにした。

# Gruntfile.js
    clean: {
      options: {
        force: true
      },
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/*',
            '!<%= yeoman.dist %>/.git*'
          ]
        }]
      },
      server: '.tmp'
    },