More than 5 years have passed since last update.

middlemanのexternal_pipelineを使ってみる

Posted at 2016-03-31

アセットパイプラインが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

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