Edited at

[gulp] html のローカルへの静的ファイルの参照を外部への参照に書き換える

More than 3 years have passed since last update.

静的ファイルは開発時はローカルからの配信を参照、プロダクションでは 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>

実行後は独自の配信サーバの参照に書き換えられている。