stylusカスタム関数でCSS背景画像のキャッシュをコントロールしたい！

##ブラウザキャッシュめんどいよね！！
案件によってApache設定触れなかったりするし、そもそもApache設定よくわかんないし、ブラウザキャッシュさせないってのもなんかアレだし、結局htmlとかcssのソース上でキャッシュコントロールするのが楽チンだよね！絶対そうだよね！

で、「読み込みCSS?hogehoge」みたいなことするでしょ！

index.html

<!-- 読み込みcssに日付とかつけちゃう！ -->
<link rel="stylesheet" href="style.css?201512121212">

そうするとCSS自体はキャッシュ殺してフレッシュな感じでグッドだけど、backgroundで指定してる画像とかがキャッシュ効いちゃったりして、スーパーリロードしなきゃいけなかったりするよね！

だからこうしたい！

style.css

/*
画像ファイル名の後ろに日付とかつけちゃう！
*/
.hoge {
	background-image: url('../images/bg_hoge.jpg?201512121212');
}

そして日時がファイル保存時に自動的に更新されたら常にフレッシュ！つまりめちゃ楽チンだよね！

##できた！

###環境

• gulp
• stylus(+nib)

style.styl

@charset "UTF-8";
@import 'nib'

/*
画像ファイル名の後ろに日付とかつけちゃう！
*/
updateTime = '?'date()
.hoge
	background-image url('../images/bg_hoge.jpg'(updateTime))

gulpfile.coffee

fs          = require('fs')
path        = require('path')
gulp        = require('gulp')
filter      = require('gulp-filter')
stylus      = require('gulp-stylus')
csscomb     = require('gulp-csscomb')
cssbeautify = require('gulp-cssbeautify')
date_util   = require('date-utils')
nib         = require('nib/lib/nib')


#    ________  _________________  __  ___   ________  ___   ______________________  _   __
#   / ____/ / / / ___/_  __/ __ \/  |/  /  / ____/ / / / | / / ____/_  __/  _/ __ \/ | / /
#  / /   / / / /\__ \ / / / / / / /|_/ /  / /_  / / / /  |/ / /     / /  / // / / /  |/ /
# / /___/ /_/ /___/ // / / /_/ / /  / /  / __/ / /_/ / /|  / /___  / / _/ // /_/ / /|  /
# \____/\____//____//_/  \____/_/  /_/  /_/    \____/_/ |_/\____/ /_/ /___/\____/_/ |_/

styl_customfunc = (style)->
	style.define 'date', ->
		updateTime = new Date()
		updateTime = updateTime.toFormat("YYYYMMDDHH24MISS")
		return updateTime


#  _       _____  ______________  __
# | |     / /   |/_  __/ ____/ / / /
# | | /| / / /| | / / / /   / /_/ /
# | |/ |/ / ___ |/ / / /___/ __  /
# |__/|__/_/  |_/_/  \____/_/ /_/

gulp.task 'w', ->
	# stylus
	gulp.watch "./src/*.styl", (file)->
		srcFileName = path.basename file.path

		regex = /^\_/;
		buildTarget = file.path
		if (regex.test(srcFileName))
			buildTarget = "./src/*.styl"

		console.log "styl2css : #{buildTarget}"
		gulp.src buildTarget
			.pipe filter(["*","!_*"])
			.pipe stylus
				use: [nib(),styl_customfunc]
				compress: false
			.pipe(csscomb())
			.pipe cssbeautify
				indent: '\t'
			.pipe gulp.dest "./build"

これで常にフレッシュ！楽勝！いぇい！