gulpのbrowsersyncでShift-JISファイルのオートリロードがうまく効かない時の対応
Shift-JISファイルを使わざるを得ない案件が存在し、browsersyncでオートリロードしたいという欲求も存在し、同時にエラーも存在する場合に役立つかもしれない備忘録です。
前置き：browsersyncでShift-JISファイルをオートリロード
browsersyncはファイル変更を監視して自動でブラウザリロードしてくれるツールです。
Shift-JISでは文字化けするので、以前の記事でShift-JISファイルをオートリロードするための方法をチラッと紹介しました（リンク貼っただけですが）。
SIRIUSテンプレート開発時に入れておくと捗るgulpプラグイン今回は、紹介した方法そのままでエラーが出た場合があったので対応をメモしておきます。なお、上記記事で紹介したリンク先のコードは以下。僕も基本的にそのまま使っています。
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();
}
}
]
}
});状況1：文字化けがなおらない
環境によってできたりできなかったりするっぽい？と困っていましたが、調べると何のことはない。
var charset = jschardet.detect(data);
if (charset.encoding == 'Shift_JIS' ) {
// shift-jisなら文字コード変換
} else {
// shift-jis以外
}上記charset.encodingの判定で'Shift_JIS'をチェックしていたところ、入っていたのが全部大文字の'SHIFT_JIS'だっただけでした。
'Shift_JIS'で返ってくるときと'SHIFT_JIS'で返ってくるときの違いが良く分からないのですが（jschardetのバージョンとかかな）、console.log(charset);とかして確認してみると良いと思います。
状況2：(node:25964) [DEP0005] DeprecationWarning
なんか怒られました。
(node:25964) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.Buffer()が非推奨になったので置き換えよ、と書いてあります。候補としてBuffer.alloc(),allocUnsafe(),Buffer.from()が示されていますが、Buffer(string, encoding)の場合はBuffer.from(string, encoding)に置き換えます。引数がnumberの場合はBuffer.alloc()を使用とのこと。以下参照。
該当箇所は以下。
var source = iconvLite.decode(new Buffer(data, 'binary'), "Shift_JIS");修正後↓
var source = iconvLite.decode(new Buffer.from(data, 'binary'), "Shift_JIS");怒られなくなった。
以上。
お問合わせ
@sho_taiko
