静的ファイルは開発時はローカルからの配信を参照、プロダクションでは CDN や独自の配信サーバからの参照に切り替えることがある。テンプレートエンジンのヘルパーなどでも対応できるが、静的ページなどのことも考えるとどうせ html の minify などもやることになるのでそこでやってしまうのが手っ取り早い。
gulp-cdnizer
を使って標準の CDN の URL を設定することでお好みの配信サーバの参照に書き換えることができる。
gulpfile.js
gulp.task("cdnizer", function () {
return gulp.src("app/**/*.html")
.pipe($.cdnizer({
defaultCDNBase: "//static.tiqav.com",
files: ["**/*.{css,js,gif,png,jpg,jpeg}"]
}))
.pipe(gulp.dest("dist"));
});
app/index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles/vendor.css" />
</head>
<body></body>
</html>
cdnizer
タスク実行前はローカルを参照している。
dist/index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//static.tiqav.com/styles/vendor.css" />
</head>
<body></body>
</html>
実行後は独自の配信サーバの参照に書き換えられている。