かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Gulp jadeコンパイル時に変数をGulpから渡したい

jadeでテンプレートを作成していて、開発時用と本番環境用とでCSSやjsの読み込みを変えたいというような事があります。
jadeでconfig.jadeの様なものを作成しておいて、devModeのようなフラグを基に出し分けることも出来るのですが、都度変数を変えてコンパイルするのは面倒です。
前回gulpでtask内で処理を分岐させる方法ができたので、gulpの実効タスクによってコンパイルするテンプレートを切り替えることが出来ると楽になります。要するにgulpでjadeをコンパイルする時に変数を渡すことが出来れば実現できそうです。

locals というオプションで変数が渡せるっぽい!

使い方が本当に合っているのかちょっと自信ないのですが、jadeをコンパイルする時にオプションにlocalsといプロパティ名に{変数名: 値}というオブジェクトを付けてあげると、変数がそのままjadeに渡されてコンパイルできるっぽい。

// gulpfile.js
var gulp = require("gulp"),
    runSequence = require('run-sequence'),
    jade = require("gulp-jade");

// jade 
gulp.task('jade', function() {
  var option = {
    pretty: true,
    locals: {
      siteName: 'かもメモ',
      lang: 'ja',
      devMode: true
    }
  };
  
  // build から実行した時 オプションの値を変更する
  if( this.seq && this.seq.indexOf('build') >= 0 ) {
    option.pretty = false;
    option.locals.devMode = false;
  }

  return gulp.src(devDir + '/jade/*.jade')
    .pipe( plumber() )
    .pipe( jade(option) )
    .pipe( gulp.dest(webroot) );
});

// build
gulp.task('build', function(cb) {
  runSequence('jade', cb);
});

// watch
gulp.task('default', function() {
  gulp.watch([devDir + '/jade/**/*.jade', devDir + '/jade/*.jade'], ['jade', reload]);
});
// layout.jade
block Variable
  - var title = ''
doctype html
html(lang= lang)
  head
    meta(charset="utf-8")
    - if(title)
      - title += ' | ' + siteName
    - else
      - title = siteName
    title= title
    - if(devMode)
      link(href="/css/style.css", rel="stylesheet")
      script(src="/js/main.js")
    - else
      link(href="/css/style.min.css", rel="stylesheet")
      script(src="/js/main.min.js")
  body
    //- 略

この例では、gulpコマンドを叩いておいてjadeを編集した時、
コンパイルされるHTMLはmin化されず、CSS/css/style.css・jsは/js/main.jsが読み込まれます。
gulp buildと言うコマンドを実行すると
HTMLはmin化され、CSS、jsはそれぞれ/css/style.min.css/js/main.min.jsが読み込まれるように出力されます。

感想

わざわざconfigとかを変更してコンパイルしなおさなくても、コマンド1つでjadeのコンパイル結果を出し分ける事ができるようになりました。
\\\ ٩( 'ω' )و //// やったぜ!
 
gulp-if というブラグインを見つけたのですが、これを使えばthis.seqでチェックするとかしなくてもgulp.task内で処理とかオプションを変更できたりするのでしょうか???
 


[参考]

鉱石倶楽部 (文春文庫)

鉱石倶楽部 (文春文庫)