Posted at

middlemanのexternal_pipelineを使ってみる

More than 3 years have passed since last update.

アセットパイプラインが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をビルドさせた。そうすると、

http://localhost:4567/javascripts/all.js

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

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

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


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

http://localhost:4567/__middleman/config/

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