Edited at

BrowserSyncでGZip対応

More than 1 year has passed since last update.

BrowserSyncで、GZipファイル(圧縮済みファイル)を読み込む方法。

Content-EncodingとContent-Typeの設定を、middlewareオプションでします。

今回はGulpを通したんで、gulp.taskでの記述です。

ポイントはmiddlewareの記述のところなので、gulpであろうとなかろうと、あまり関係ないと思いますが一応。


const gulp = require('gulp');
const browserSync = require('browser-sync');

gulp.task('server', function() {
return browserSync.init({
server: {
baseDir: './',
middleware(req, res, next) {
let url = req.url;

// リクエストURLに.jz.gzが含まれる場合
if (url.indexOf('.js.gz') > -1) {
res.setHeader('Content-Encoding', 'gzip');
res.setHeader('Content-Type', 'text/javascript');
// リクエストURLに.css.gzが含まれる場合
} else if (url.indexOf('.css.gz') > -1) {
res.setHeader('Content-Encoding', 'gzip');
res.setHeader('Content-Type', 'text/css');
// リクエストURLに.html.gzが含まれる場合
} else if (url.indexOf('.html.gz') > -1) {
res.setHeader('Content-Encoding', 'gzip');
res.setHeader('Content-Type', 'text/html');
}

next();
}
}
});
});

Grunt版はこちら:grunt-contrib-connectでGZip対応

参考:https://stackoverflow.com/questions/30375699/use-gzip-file-locally