middlemanのexternal_pipelineを使ってみる

アセットパイプラインがv4で削除されたので、jsのbuildはbrowserifyにお願いしてみる。
config.rb に以下のように追記をした。

activate :external_pipeline,
  name: :browserify,
  command: build? ? "npm run build":"npm run watch",
  source: "./.tmp/"

bundle exec middleman buildした際には、npm run buildが実行され、
それ以外のbundle exec middleman serverとかでは最初にnpm run watchが実行される。

nameは適当。

sourceで指定したディレクトリ以下が、buildした際のルートディレクトリに追加される。

なので、package.jsonで

  "scripts": {
    "build": "browserify js-source/main.js > ./.tmp/javascripts/all.js",
    "watch": "watch 'npm run build' js-source/ -du"
  }

みたいな感じで.tmp/以下にjsをビルドさせた。そうすると、

にマッピングしてくれる。（sourceディレクトリ内のjavascripts/ は消しておいた）

コード書いてる時はnpm run watchがjsを監視・ビルドして、吐き出されたファイルをmiddleman-livereloadが監視してブラウザreloadっていう感じになった。

そのせいかreloadが数回走ったり、遅かったりするけど、なんとか使えてる。

ドキュメントなさすぎで、以下の設定画面が一番役に立ったかも。

external_pipelineの定義を見てみる

:external_pipeline

:command = "npm run watch"

The command to initialize

:disable_background_execution = false

Don't run the command in a separate background thread

:latency = 0.25

Latency between refreshes of source

:name = :browserify

The name of the pipeline

:source = "./.tmp/"

Path to merge into sitemap