Middleman 4 の新機能を試す シリーズMiddleman 4 の External Pipeline（外部パイプライン）を試す

はじめに

今回は Middleman 4 の External Pipeline（外部パイプライン）を試します。前回作成した Gulp を build / server 時に呼べるようにしたいと思います。

External Pipeline（外部パイプライン）とは

ここ数年で, コミュニティは Rails から離れ NPM のタスクランナー (Gulp, Grunt) や依存管理 (Browserify, Webpack), 公式ツール (ember-cli, react-native) やトランスパイラ(ClojureScript, Elm) に焦点を合わせるようになりました。Middleman はこれらすべてのソリューションや言語に対応することはできません。そこで私たちはこれらのツールが Middleman の中で動作できるようにすることにしました。この機能は external_pipeline (外部パイプライン) と呼ばれ, Middleman の複数のサブプロセスで動作します。一時フォルダにコンテンツを出力し Middleman のサイトマップに取り込むことで実現しています。

External Pipeline の 使い方

External Pipeline は config.rb に設定します。
フォーマットはこんな感じ。

activate :external_pipeline,
  name:    :gulp,
  command: "gulp <taskName>",
  source:  ".tmp/dist",
  latency: 0.25

External Pipeline のオプション

項目	必須	初期設定	説明
name	○	-	The name of the pipeline
command	○	-	The command to initialize
source	○	-	Path to merge into sitemap
latency	-	0.25	Latency between refreshes of source
disable_background_execution	-	false	Don’t run the command in a separate background thread

Browserify の単純なバンドルと Watchify を使ったバンドルを分ける

前回作成したタスクではタスクを実行するとバンドルと同時に監視（ Watchify ）も同時に実行されてしまっていましたが、今回はそれを分けて Middleman の server/build 時に別々のタスクとして実行できるようにしたいと思います。そのために作成した gulpfile.js がこちらです。

Middleman から呼び出すことを前提に1回限りのバンドルを build というタスク、監視を使った自動バンドルを server という名前にしました。

var gulp       = require('gulp');
var browserify = require('browserify');
var source     = require('vinyl-source-stream');
var watchify   = require('watchify');

// settings ---
var paths = {
  srcPath:      'source/assets/javascripts/main.js',
  destFileName: 'bundle.js',
  destPath:     './.tmp/dist'
}

var b = browserify({
  entries: paths.srcPath,
  cache: {},
  packageCache: {}
});

// gulp tasks ---
gulp.task('default', ['build']);
gulp.task('build', bundle);
gulp.task('server', server);

// functions ---
function server() {
  b.plugin(watchify); // plugin を設定
  b.on('update', bundle); // watchify のイベントを設定
  bundle(); // watchify(browserify) を起動
}

function bundle() {
  return b.bundle()
    .pipe(source(paths.destFileName))
    .pipe(gulp.dest(paths.destPath));
}

External Pipeline を設定する

$ middleman build と $ middleman server の時に Gulp タスクを分けて実行できるように command を調整します。

activate :external_pipeline,
  name:    :gulp,
  command: build? ? 'gulp build' : 'gulp server',
  source:  ".tmp/dist",
  latency: 0.25

middleman build

初期化時に External Pipeline で設定した Gulp タスク（gulp build）が実行されています。

$ middleman build
== Executing: `gulp build`
== External: [12:10:48] Using gulpfile ~/Projects/mm4/gulpfile.js
== External: [12:10:49] Starting 'build'...
== External: [12:10:49] Finished 'build' after 237 ms
== Blog Sources: {year}-{month}-{day}-{title}.html (:prefix + :sources)
     updated  build/assets/javascripts/main.js
     updated  build/bundle.js
   identical  build/assets/javascripts/bundle.js
   identical  build/tags/example.html
   identical  build/feed.xml
   identical  build/index.html
   identical  build/2012/01/01/example-article.html
   identical  build/2016/09/20/hoge.html
   identical  build/2016.html
   identical  build/2016/09.html
   identical  build/2012.html
   identical  build/2016/09/20.html
   identical  build/2012/01/01.html
   identical  build/2012/01.html
Project built successfully.

middleman server

External: [12:11:26] Finished 'server' と表示されていますが、Watchify 自体は実行されています。ファイルを変更してみると自動でバンドルされているはずです。

$ middleman server
== The Middleman is loading
== Executing: `gulp server`
== Blog Sources: {year}-{month}-{day}-{title}.html (:prefix + :sources)
== External: [12:11:26] Using gulpfile ~/Projects/mm4/gulpfile.js
== External: [12:11:26] Starting 'server'...
== External: [12:11:26] Finished 'server' after 15 ms
== View your site at "http://localhost:4567", "http://127.0.0.1:4567"
== Inspect your site configuration at "http://localhost:4567/__middleman", "http://127.0.0.1:4567/__middleman"

External Pipeline の状態を確認する

External Pipeline の状態は Middleman のコンフィグ（http://127.0.0.1:4567/__middleman/config/）から確認できます。

:external_pipeline
:command = "gulp server"
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 = :gulp
The name of the pipeline
:source = ".tmp/dist"
Path to merge into sitemap

終わりに

これで External Pipeline から ビルド時とサーバー時に別々の Gulp タスクを実行できるようになりました。
External Pipeline によって npm の資産が活用できるようになるのは嬉しいですね。次回は External Pipeline と Gulp を使って Sass(SCSS) や bourbon を動かせるようにしてみたいと思います。

関連記事

• middlemanのexternal_pipelineを使ってみる
• Middleman v3 -> v4 での Asset Pipeline (Sprockets) から External Pipeline への移行
• Using Webpack with Middleman
• Class: Middleman::Extensions::ExternalPipeline

シリーズ

1. Middleman 4 をインストールしてみる
2. Middleman 4 で middleman-blog をインストールしてみる
3. Browserify を試してみる
4. Gulp から Browserify を実行する
5. Watchify を使った Browserify の 変更監視と自動バンドル
6. Gulp から Watchify と Browserify を使う
7. Middleman 4 の External Pipeline（外部パイプライン）を試す
8. Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
9. Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
10. gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
11. Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
12. Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）