Railsで昨今のJSのエコシステム(gulpとかそういうの)を使うにあたってこのようにしたというメモ

  • 115
    Like
  • 0
    Comment
More than 1 year has passed since last update.

ちょっと前に触ったサービスでRailsサービスでgulpとかbrowserifyとかそのあたりのモダンなJSツールを使いたくて、こんな感じにやってみたというメモです。
おおまかにいうと、gulpでビルドしたものを、asset pipelineに通すというだけ。

こんなことを考えていた

最初はsprocketsをいっそのこと外してしまおうかと思ったんだけど、そのサービスはasset_syncというassetをS3にあげるgem使ってたのと、digestまわりとかあって、それらは解決できなくはないけど、めんどくせえからそこはsprocketsに任せてもいいやと思ったので、結局外しませんでした。
また、JSまわりのツールsprocketsと連携してたりするgemがあったりするんですが、JSまわりツールのバージョンアップの早さにgemがついていけてないと感じたので、我慢して古いバージョン使うのが嫌だったので、なるべくsprocketsにほとんど関係ない形でJSまわりの環境作りたいなーという考え方が元にありました。

gulpfileつくる

gulp、browserify、bowerとか使う一般的な感じのgulpfile書いた。
ここらへんはおのおのの好みでgruntとか使えば良いし、好きなように書けば良いと思うので、割愛します。
開発時にwatch系のタスクないとつらいんでちゃんとつくっときましょう。
ただ、以下だけ気にしました。
gulpのビルド用コマンド叩けば、bowerのinstallとconcatが行われるようにしておきましょう。(browserify使ってるならdebowerifyとかbrowserify-shimとか適当に使ってください。)
また、ビルドファイルの出力先を、app/assets/javascripts/buildとでもしておきましょう。
上記のディレクトリをgitignoreに指定するのを忘れないようにしましょう。

npmコマンドでビルドできるようにしとく

package.jsonのscriptsからgulpコマンドを呼び出せるようにしときましょう。
以下は例です。
グローバルにgulpをいれなくても、これでgulp叩けます。
参考リンクです。http://qiita.com/Jxck_/items/efaff21b977ddc782971

"scripts": {
  "start": "gulp build"
}

layoutファイルでincludeする

ビルドしたファイルをlayoutでincludeしましょう。
以下は例です。

= javascript_include_tag "build/bundle"

configファイルでasset precompileするディレクトリを指定する

config/environments/production.rbに以下を記述する。(必要に応じて他の環境のconfigファイルにも書いてください)

config.assets.precompile += ['build/*']

deployプロセス

deployプロセスに対応する必要があるので、対応に必要な作業です。
capistranoつかってると思うんで、それ前提で書きます。

nodebrewのインストール

ここでは、nodebrewを使って入れます。

wget git.io/nodebrew
perl nodebrew setup
export PATH=$HOME/.nodebrew/current/bin:$PATH

nodeのインストール

nodeをインストールします。versionは適当に使いたいversion指定してください。

nodebrew install v0.10.32
nodebrew use v0.10.32
node -v

npmを新しくする

npmが古いと思うので、新しくしましょう。

npm -v
npm update -g npm #version指定したい場合は npm install -g npm@2.1.4 って感じで
npm -v

Capistranoでのdeployに対応する

gemのcapistrano-npmを使います。Gemfileに追加しましょう。

Capfile編集

Capfileでrequireしましょう。僕はこれ忘れててちゃんと動かねーな、みたいなアホなことをしていたので、一応書いときます。

require 'capistrano/npm'

config/deploy.rbを編集

そのままうごかそうとすると、npmコマンドが叩けなかったので、PATHを通しました。
また、node_modulesとbower_componentsにシンボリックリンクを貼ります。
あとは、jsのビルドタスクをcapistranoに書きます。
この記事ではビルドタスクはnpm startで呼べるようにしているので、よきタイミングで、npm startを呼ぶだけです。
気をつけないといけないのは、npm installが走った後、かつ、assets precompileの前にjsのビルドをしないといけないことです。
ソースコード読めばすみますが、capistranoの各タスクを把握するにあたって、便利なqiitaの記事があったんで、はっときます。http://qiita.com/taizo/items/afff46a260bd11588962
以下をconfig/deploy.rbに追加しましょう。
あくまで例なので環境に合わせてください。

set :default_env, {path: "$HOME/.nodebrew/current/bin:$PATH"}
set :linked_dirs, %w{log tmp/pids tmp/cache tmp/sockets vendor/bundle public/system public/assets public/uploads node_modules bower_components}

namespace :npm do
  desc 'Install Bower packages and build javascript with Gulp'
  task :start do
    on roles fetch(:npm_roles) do
      within fetch(:npm_target_path, release_path) do
        execute :npm, 'start', fetch(:npm_flags)
      end
    end
  end
  after 'npm:install', 'npm:start'
end

また必要に応じて、set :npm_flags, '--production'的な感じでnpmコマンドのオプションをセットしましょう。capistrano-npmのデフォルトのオプションは、--production --silent --no-spinになってます。

config/deploy/production.rbとか編集

ロールを設定しましょう。
以下は例です。

set :npm_roles, 'app'

以上で作業は終了です。(のはず、記憶を呼び覚ましながら書いてたのでなんか抜けてたらすみません)

こんな感じにしてよかったこと

productionとdevelopmentでタスクかき分けなくて済んだ

このケースでは、digest、uglifyをsprocketsに完全に任せることになります。なので、いちいちproductionとdevelopmentでかき分けなくても済んだのでちょっと楽だったと思います。
uglifyをgulpビルドの時点ではされていないので、開発時のデバッグでビルドしたものが普通に読めます。(ちょっと場合にもよるとは思うけど)。

最後に

ただ、僕もいまだにRailsでフロントエンドの管理のベストプラクティス模索中なので、なんかいい感じのやり方あったら教えてください(白目