【Rails+vue.js(webpack)】自動コンパイル設定方法
目的
Vue.js（というよりWebpack）関連のファイルは変更したらコンパイルする必要があり、
bin/webpackというコマンドを使用する必要があります。
ただ、毎回コンパイルするのは面倒なので、変更を検出して自動コンパイルするようにします。
前提
コーディング開始
Step1: Gem(foreman)インストール
foremanというGemをインストールします。
foremanはProcfileで複数プロセスを管理します。
# Gemfile 追記 gem 'foreman'
# foremanをインストール $ bundle install --path vendor/bundle
Step2: foremanを使う
2種類のファイルを作成します。
| ファイル名 | 役割 |
|---|---|
| bin/server | Procfile.devを実行 |
| Procfile.dev | rails sとbin/webpack-dev-serverを実行 |
# bun/server #!/bin/bash -i bundle install bundle exec foreman start -f Procfile.dev
# Procfile.dev web: bundle exec rails s # watcher: ./bin/webpack-watcher webpacker: ./bin/webpack-dev-server
bin/serverのパーミッションを変更
$ chmod 777 bin/server
Step3: 試してみる
# http://localhost:5000 起動
$ bin/server
app/javascript/packs/app.vueをいじってみると
コンパイル処理が自動で走って、画面がリロードされます。
まとめ
自動コンパイルできるようになったので
何も気にせず開発に専念できるようになりました！
