BrowserSyncでGZip対応

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