これからはじめる Gulp シリーズこれからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出しでSketch3のデザインデータからスライスを書き出す方法についていくつかの方法を紹介しました。今回はNode.jsのChild Processを使ってgulpからjekyllのbuildコマンドを実行してみたいと思います。

jekyllについて

jekyllはRuby環境で静的なサイト・ブログを作ることができるジェネレータです。今回、インストールやテンプレートの構築については説明を省きます。このシリーズを最初から読んでいる方はGemfileにgem "jekyll"を追記して$ bundle installを実行してください。普通のRuby環境にインストールしたい場合はこちらのInstallationのページを参考にしてください。この記事ではjekyllが動く前提で説明していきます。

Node.jsのChild Processモジュール

Child Processは完全にノンブロッキングな方法で子プロセスの stdin、stdout、 そして stderr を通じたデータストリームを実現します。

Child Processモジュールのexecメソッドを使うことでシェルを実行します。このメソッドを使うことでjekyllコマンドを実行します。

モジュールを読み込む

execメソッドはインストールせずに利用できます。この方法はgulp-execプラグインを参考にしました。

var exec        = require('child_process').exec;

タスクを作る

jekyllコマンドのオプションを管理するためにgulp-utilのtemplateメソッドを使います。サブコマンドとコマンドを変数jekyllOptionsで管理し、templateメソッドを使って当て込みます。jekyllのコマンドオプションはこちらに載っています。

var gulp        = require('gulp');
var gutil       = require('gulp-util');
var exec        = require('child_process').exec;

gulp.task('jekyll:build', function (cb) {

  var jekyllOptions = {
    subCommand  : 'build',
    configFiles : './config.yaml'
  };

  var jekyllCommand = 'jekyll <%= options.subCommand %> --config <%= options.configFiles %>';
  var command       = gutil.template(jekyllCommand, {file: null, options: jekyllOptions});

  exec(command, function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
})

jekyll:buildタスクを実行する

jekyll:buildタスクを実行して実際にこのブログをビルドしてみます。

$ gulp jekyll:build
[15:04:25] Using gulpfile ~/Projects/gulp.whiskers.nukos.kitchen/gulpfile.js
[15:04:25] Starting 'jekyll:build'...
Configuration file: ./_jekyll/config.yml
            Source: ./src
       Destination: ./prv
      Generating...
                    done.
 Auto-regeneration: disabled. Use --watch to enable.
[15:04:33] Finished 'jekyll:build' after 7.71 s

60本程度の記事を7.71sでビルドできました。watchやserveについても同じ方法で実行可能です。ファイルの監視についてはまだ未検証なので今度試して紹介したいと思います。明日はgulp-s3プラグインを使ってAWS S3の静的サイトホスティング機能にデプロイしてみたいと思います。

シリーズ

1. これからはじめるGulp（0）：アドベントカレンダースケジュール
2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す