blog

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

    • Ryuichi Nonaka

    はじめに

    今回は 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 を動かせるようにしてみたいと思います。

    関連記事

    シリーズ

    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」エラーの直し方(小ネタ)

    コメント・フィードバック