browsersyncでShift-Jisのファイルを使用する

browsersyncはShift-Jisファイルを読み込むと文字化けする

文字化けせずにbrowsersyncを使用するにはutf-8にエンコードすればいい。
ただ、ファイル自体をエンコードしてしまうのは嫌。。。。

そこで、ググったら以下の記事がヒット
Shift_JISなサイトをgulp, BrowserSyncで文字化けさせずに表示する

ありがたい。
が、自分の環境では少し修正しないと動かなかったので以下に記します。

まず、上の記事に従って必要なファイルを用意する。
package.jsonやgulpfile.jsですね。
因みに自分の使用した、browser-syncのバージョンは、2.12.12です。
そしたら、gulpfile.jsに以下のように書きます。

//サーバー起動
browserSync.init({
    port: 3000,//無くてもいい
    server: {
        baseDir: 'htmlファイルの場所',
        middleware: [
            function (req, res, next) {
                // 仮想サーバーへのリクエストのurlが ~.htmlなら
                // index.htmlの時は / だけになる
                if (/\.html$/.test(req.url) || req.url === '/') {
                    // ファイル読み込み
                    var absPath='';
                    if(req.url === '/'){
                        absPath = path.join(__dirname, 'htmlの場所のルート','index.html' );
                    }else{
                        absPath = path.join(__dirname, 'htmlの場所のルート', req.url);
                    }
                    var data = fs.readFileSync(absPath);
                    // 文字コード判定
                    var charset = jschardet.detect(data);
                    if (charset.encoding == 'SHIFT_JIS') {
                        // shift-jisなら文字コード変換
                        var source = iconvLite.decode(new Buffer(data, 'binary'), "Shift_JIS");
                        res.setHeader("Content-Type", "text/html; charset=UTF-8");
                        res.end(source);
                    } else {
                        // shift-jis以外
                        next();
                    }
                } else {
                    next();
                }
            }
        ]
    }
});

自分が加筆したのはほんの一部です。
最初の条件分岐のところですね。
やってることは、

• 仮想サーバーへのリクエストを全部精査して

• htmlファイルがリクエストされたら、そのファイルの文字コードを調べてShift-Jisならエンコードして

• エンコードしたファイルをブラウザに投げる

という感じだと思います。
自分もこんなコード書けるようになりたいっす。