gulp
BrowserSync

Shift_JISなサイトをgulp, BrowserSyncで文字化けさせずに表示する

More than 1 year has passed since last update.

なぜかいまだにShift_JISなサイトたくさんありますね。
見る分にはShift_JISでも問題ありませんが、運用にかかわってしまうとちょっと面倒なことになります。なぜか。
BrowsersyncだとShift_JISなサイトは文字化けするから。

そこでBrowsersyncでもshift-jisが文字化けしない方法を考えてみました。

※検索するとShift_JISなhtmlをUTF-8に変換して書き出すと言うものは見つかりますが、そんな対応はしたくない、ということで以下になります。

Browsersyncのmiddlewareを使用して、Shift_JISなhtmlをUTF-8に変換してブラウザに表示させてしまいます。

package.json
"devDependencies": {
    "browser-sync": "^2.8.0",
    "gulp": "^3.9.0",
    "iconv-lite": "^0.4.15",
    "jschardet": "^1.4.1"
  }
gulpfile.js
var gulp = require('gulp'),
    browser = require('browser-sync'),
    fs = require('fs'),
    path = require('path'),
    iconvLite = require('iconv-lite'),
    util = require('util'),
    jschardet = require('jschardet'),
    url = require('url');

gulp.task('server', function() {
    browser({
    port: ****,
        server: {
            baseDir: '****',
            middleware: [
              function (req, res, next) {
                // pathnameを取得
                var urlParse = url.parse(req.url);

                // .htmlなら
                if (/\.html$/.test(urlParse.pathname)) {

                  // データ取得
                  var data = fs.readFileSync(path.join(__dirname, 'htmlデータ格納先', urlParse.pathname));

                  // 文字コード判定
                  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();
                }
              }
            ]

        }
    });
});

gulp.task("default", ['server']);

これで読み込むファイルがhtmlかつShift_JISの場合に、UTF-8へ変換されBrowsersync上でも文字化けしなくなります。

単純に変換しているだけなのでjsファイルなどは諦めたほうがいい場合もあると思いますが、
cssなどは強制的に変換させても大丈夫そう。