gulp:開発/本番環境でタスクの内容を調整して幸せになる

###更新したファイルだけをタスクの対象に

gulpでファイルの自動生成をする時、対象ファイルの数が増えてくると生成に時間がかかってツラい感じになってきます。
gulp-newerを使えば更新した差分ファイルのみをタスクの対象にしてくれるので幸せな感じになれます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp = require 'gulp'
newer = require 'gulp-newer'
jade = require 'gulp-jade'
gulp.task 'sampleTask', ->
  # 更新差分の基準になるファイル
  criterionFiles = './dest/html'
	gulp.src([
		'./src/jade/!(_)*.jade'
	])
	.pipe(newer(criterionFiles))
	.pipe(jade())
	.pipe(gulp.dest(dest))
gulp.task 'default', [
  'sampleTask'
]

###本番環境用ファイルを生成する時
本番環境用のファイルを作る時は、生成漏れがあったら困るので更新差分にはしたくありません。
そこでproduction環境の変数を作ってあげて、更新差分の基準ファイルを振り分けするようにしました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
config =
	production: false
gulp.task 'setProduction', ->
  config.production = true
gulp.task 'sampleTask', ->
  if( config.production )
	   criterionFiles = ''
  else
	   criterionFiles = './dest/html'
	gulp.src([
		'./src/jade/!(_)*.jade'
	])
	.pipe(newer(criterionFiles))
	.pipe(jade())
	.pipe(gulp.dest(dest))
gulp.task 'default', [
	'sampleTask'
]
gulp.task 'build', [
	'setProduction'
	'default'
]

###まとめ
静的サイトのジェネレータとしてgulpを使う事が多いので、100枚以上あるhtmlファイルの生成とか画像ファイルの生成にかかる時間が劇的に減りました。
※ちなみに、gruntにも同様のプラグイン(grunt-newer)があります。

参考
gulp-newer
How to handle development and production assets with gulp?