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

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

https://www.npmjs.com/package/gulp-cdnizer

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>

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