まえがき

最近いろいろやっています。
とりあえず流行ってるっぽいフロント技術に触れてみたりとか。
本当にいろいろありすぎてちょっと疲れてきてますが、私にとってはこれだ！となってテンション上がってきているのがnpm (run) + Riotです。

やること

全部やる、と書いていますが、実際にやることはフロントエンドとしてはもはや定番の以下項目です。

jsはbabelを使用してes2015で書く
cssは好きなプリプロセッサを使う（私はstylus）
ファイルはwatchして自動ビルド
ビルドされたらライブリロード

※ここに記述するのは、とりあえずriotいれてみたら上記のことが数分で出来てしまったため、テンション上がって書残す、雑なメモです。

準備

モジュール編

必要なモジュールをnpmでインストールします。
以下に私が入れたモジュールを記述致しますが、cssプリプロセッサは好きなものを入れてください。

  "dependencies": {
    "babel-core": "^6.24.1",
    "babel-preset-es2015-riot": "^1.1.0",
    "browser-sync": "^2.18.8",
    "riot": "^3.4.1",
    "stylus": "^0.54.5"
  },

ソースファイル編

これはRiotの公式をご覧ください。（私はまだガイドの序盤・・・）
http://riotjs.com/ja/

tagファイルの記述するscriptタグとstyleタグは以下のようにします。

<script type="es6">
  ...

<style type="stylus">
  ...

package.json編

npm run scriptを書きます。

  "scripts": {
    "start": "npm run riot & npm run server",
    "riot": "node_modules/.bin/riot tags js/tags --type es6 --style stylus -w",
    "server": "node_modules/.bin/browser-sync start --server --files 'js/**/*.*'"
  },

ライブリロードのトリガーとするファイル群をここでは js/**/*.* としていますが、環境に合わせて変更してください。

実行

npm start

ターン！！！！！！！

ターン！すると今回やりたかったことが出来ているはずです。

あとがき

最近プロジェクト毎にgulpを書くのが辛くなってきて、npm run scriptに触れてみたんですが、これは楽々でした。
そして今回Riotをやろうと入れてみたら、もう内部に全部組み込まれているじゃありませんか！
AltJSやCSSプリプロセッサの使用は当たり前になってきていて、モジュールもそのように組まれているんですね。
ありがたい限りです。

npm + Riot.jsで全部やる