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内で処理とかオプションを変更できたりするのでしょうか???
[参考]
- 作者: 長野まゆみ
- 出版社/メーカー: 文藝春秋
- 発売日: 2005/02
- メディア: 文庫
- 購入: 2人 クリック: 22回
- この商品を含むブログ (48件) を見る