実行環境

Ruby on Rails 4.2.0
Riot.js 3.3.2

前提

あらかじめNode.jsがローカルにインストールされていること。

$ node -v を実行してバージョンが表示されればOK。

1. npmを使ってriotをインストールする

$ cd (Railsプロジェクト直下のディレクトリ)

プロジェクト直下にpackage.jsonがない場合は下記を実行

$ npm init

=> 基本Entで進み、package.jsonが作成される

packeage.jsonを編集

scripts, devDependenciesの箇所にriotを記載。

今回riotのバージョンを指定したが、しなくてもOK。編集が終わったら保存。

{
  "name": "(プロジェクト名)",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "riot": "riot"
  },
  "devDependencies": {
    "riot": "3.3.2"
  },
  "private": true
}

フロントエンド系のソースをまとめたいのでプロジェクト直下にディレクトリを作成

$ mkdir ./frontend

package.jsonを`/frontend` 以下へ移動する

$ mv ./package.json frontend/

npmを使ってriotをインストール。

今回このプロジェクトのみにインストールしたかったのでgオプションはつけませんでした。
また、指定のディレクトリ以下にインストールしたかったのでprefixオプションをつけました。

$ npm install --prefix ./frontend/

frontend以下にetc, node_modulesディレクトリが作成された！

この時点でfrontend以下はこのようなディレクトリ構造になっていると思います。

frontend/
├── etc
├── node_modules
├── package.json
└── riot
    ├── sample.tag

2. RailsでRiot.jsを使うためにソースをDLしてきて配置する

gemもあるようだけど、うまく動かなかったのでRiotの公式サイトからソースファイルをDLしてきて利用することにした。

curlコマンドでcompilerが含まれたmin.jsファイルをDLしてくる。

公式サイトのGitHubから、riot+compiler.min.jsを取得する。RawボタンからリンクするページのURLを指定すること〜。

oオプションをつけるとこの名前で保存するという指定ができる。

$ curl https://raw.githubusercontent.com/riot/riot/master/riot%2Bcompiler.min.js -o ./vendor/assets/javascripts/riot.js

application.jsに追記し、上記のソースが読み込まれるようにする。

app/assets/javascripts/application.js

（省略）
//= require riot

これで環境構築は完了！

3. サンプルファイルを配置し、コンパイルを実行

tagファイルを作成

$ mkdir frontend/riot
$ touch frontend/riot/sample.tag

公式サイトで配布されているサンプルコードをコピーし、sample.tagとして保存

<sample>
  <h3>{ message }</h3>
  <ul>
    <li each={ techs }>{ name }</li>
  </ul>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML' },
      { name: 'JavaScript' },
      { name: 'CSS' }
    ]
  </script>

  <style>
    :scope { font-size: 2rem }
    h3 { color: #444 }
    ul { color: #999 }
  </style>
</sample>

html.erbファイルを作成

ブラウザで確認出来るviewファイルのbodyタグ内にsampleタグを配置し、mountする処理を書く。

（例）app/views/articles/index.html.erb

<!-- place the custom tag anywhere inside the body -->
    <sample></sample>
<!-- mount the tag -->
    <script>riot.mount('sample')</script>

コンパイルを実行し、tagファイルからjsファイルを作成

$ ./frontend/node_modules/.bin/riot ./frontend/riot/ app/assets/javascripts/riot/

↑については下記のような意味

[npm内のriotファイル] [tagファイルがあるディレクトリを指定] [jsファイルを作成したいディレクトリを指定]

4. 実行

ブラウザで上記のhtml.erbファイルを確認すると、、

Riotのコードが正しく実行されている（このサンプルの場合はsample.tagで設定した内容が表示されている）ことが確認出来る！

5. 諸々コミット対象から外しておく

node_modules以下、tagファイルはコミット対象に入れない方がベターなので、.gitignoreに追記しておく。
.gitignore

（省略）
/frontend/node_modules/*
/app/assets/javascripts/riot/*

Rails4でRiot.js(3.3)が動く環境を構築する