Gulp 実行コマンドに独自のオプションを付けて便利にしてみる例

前回minimistを使ってコマンドから実行するjsに変数を渡せるようにしました。今回は、実際にコマンドのオプションで便利にgulpを使えるようにしてみた実例のメモです。

一つのgulp下に複数のhtmlサイトをディレクトリを区切って置いているイメージで、次のような感じのオプションを作成したいと思います。

オプション	設定値	効果
`-o`	Boolean	このオプションがある時、新しくwebserverを起動する
`--dev`	Boolean	このオプションがある時、pugを開発用でコンパイルする
`--dir`	Strings	対象とするディレクトリ(サイト)を指定

gulp

const gulp        = require("gulp"),
      pug         = require("gulp-pug"),
      runSequence = require('run-sequence'),
      minimist    = require('minimist'),
      webserver   = require('gulp-webserver');

// options
const defaultOptions = {
  default: {
    o:   false,
    dev: false,
    dir: 'aikatsu'
  }
};
const options = minimist(process.argv.slice(2), defaultOption);

// directory
const destDir  = 'websites/' + options.dir,
      devDir   = 'dev/' + options.dir;

// --------------------------------
// server
// --------------------------------
gulp.task('webserver', function() {
  gulp.src(destDir)
    .pipe(webserver({
      livereload: true,
      port: 3000,
      // -o オプションがあれば新規ウィンドウを開く
      open: !!options.o
    }));
});

// --------------------------------
// HTML
// --------------------------------
gulp.task('pug', function(cb) {
  let files    = devDir + '/pug/*.pug',
      destPath = destDir,
      pugOption  = {
        pretty: true,
        // pugのグローバル変数として渡す値を設定できる
        locals: {
          lang: 'ja',
          // --dev オプションの値をpugに渡す
          devMode: !!options.dev
        }
      };
  
  // コンパイルするhtmlをmin化
  if( options.dev === false ) {
    pugOption.pretty = false
  }

  return gulp.src( files )
    .pipe( plumber() )
    .pipe( pug(pugOption) )
    .pipe( gulp.dest(destPath) );
});

// --------------------------------
// TASK
// --------------------------------
gulp.task('build', function(cb) {
  // build で実行した場合はオプションを無視して開発者用にしない
  options.dev = false;
  return runSequence('html', cb);
});

// --------------------------------
// WATCH
// --------------------------------
gulp.task('default', ['webserver'], function() {
  gulp.watch([
    devDir + '/pug/**/*.pug',
  ], ['html']);
});

※ cssやjavascriptのタスクは割愛しています

pug

block Variable
  -// lang, devMode は gulp から渡される変数
  - var siteName = "かもメモ"
  - var cssVer = '2018-04-01'
doctype html
html(lang= lang)
head
  meta( charset="utf-8")
  meta( name="viewport" content="width=device-width,initial-scale=1.0" )
  meta( name="description" content=`${siteName} 自分の落ちた落とし穴に何度も落ちる人のメモ帳` )
  title= siteName
  - if( devMode )
    link(href="/assets/css/main.css?v="+cssVer, rel="stylesheet")
  - else
    link(href="/assets/css/main.min.css?v="+cssVer, rel="stylesheet")

gulpの実行

kamomeディレクトリのサイトを開発モードで新しくwebサーバを立ち上げてファイル監視を開始

$ gulp -o --dev --dir kamome

yrukyanディレクトリのサイトを本番用にコンパイル

$ gulp build --dir yrukyan

　
minimistモジュール本当ぉぉぉぉおおおおおにｯ便利です!!!!!!
gulp-ifモジュールを利用すればpipe中にオプションによって処理を変えるとかも可能なので、設計を考えればかなり複雑なことまでできそうだなと思いました。
ただ自分で作ったオプションを忘れてしまっても大丈夫なようにREADMEとかちゃんとドキュメントに残しておくのが良いと思います。(ドキュメントを書かないのは悪い文化！)

[参考]