Vue.js セットアップメモ

Vue.jsをSails.jsのフロントエンドとしてセットアップしたメモ。
参考にした構成はhackernews。

やりたいこと

Vue.jsの自動コンパイル（watch）

Sails.jsのアセットコンパイル

Sailsが用意するタスクランナーはGrunt.js。sails liftした時に勝手にassets/js以下のファイルを.tmp/以下にコピーするようになっている。

tasks/config/：Gruntタスクの定義
tasks/register/：定義したGruntタスクを"build"などの親タスクにまとめる

また、assets/js/以下のファイルは勝手にHTMLに差し込まれるようになっている（tasks/pipeline.jsで設定可能）
よって、ビルド前のjsファイルはasset/js/とは別のディレクトリに置きたいので、上のhackernewsの例ではclient/web/というのを作ってそこにVue.jsのソースをおき、ビルドしたファイルをassets/js/build/に出力するようになっている。

webpackでコンパイル

Vue.jsのビルドにはwebpackを使う。
npm install grunt-webpack --save

vue-loader

grunt-webpackがvueをコンパイルするためにvue-loaderを使う。
参考にしたhackernewsではloaderがvueになっていたが、これだと動かなかった。
loaderをvue-loaderにする（https://github.com/vuejs/vue-loader/issues/409）

npm install vue-loader --save

webpackの設定

以下、webpackタスクの設定例です。
outputは.tmp/public/jsに直接吐き出すようにします。（assets/jsに出力したらwatchした時にsyncタスクが走らなくて.tmp/public/js/が更新されなかった）

tasks/config/webpack.js

module.exports = function (grunt) {
  grunt.config.set('webpack', {
    dev: {
      entry: './client/web/main.js',
      output: {
        path: __dirname + '/../../.tmp/public/js/build',
        filename: 'main.js'
      },
      stats: {
        colors: false,
        modules: false,
        reasons: false
      },
      progress: false,
      failOnError: true,
      devtool: '#source-map',
      module: {
        loaders: [
          {test: /\.vue$/, loader: 'vue-loader'}
        ]
      }
    }
  });

  grunt.registerTask('webpack', [
    'webpack:dev'
  ]);

  grunt.loadNpmTasks('grunt-webpack');
};

これでも"vue-template-compilerがない！"と怒られる。npmのvue-template-compilerのページにはvue-loaderを使えばこれはいらないよって書いてあるしhackernewsもこれなしで動くのだが・・・

npm install vue-template-compiler --save
npm install css-loader --save

インストールしたら動いた。何か設定がおかしいのか、バージョンアップで仕様が変わっているのか・・・？

compileAssetsタスクに今定義したwebpackタスクを追加。

tasks/register/compileAssets.js

module.exports = function(grunt) {
   grunt.registerTask('compileAssets', [
    'webpack:dev',
     'clean:dev',
    {　以下略　}

watch

これでビルドはできるようになったけど、Sails.jsはデフォルトでassets/以下しかwatchしてない。
View.jsをいじるたびに毎回サーバー再起動するのは面倒なのでclient/web/以下をwatchして自動でビルドを走らせる。

tasks/config/watch.js

webpack: {
     files: [
       'client/web/**/*'
     ],
     tasks: ['webpack']
 },