gulpのbrowsersyncでShift-JISファイルのオートリロードがうまく効かない時の対応

Shift-JISファイルを使わざるを得ない案件が存在し、browsersyncでオートリロードしたいという欲求も存在し、同時にエラーも存在する場合に役立つかもしれない備忘録です。

    前置き:browsersyncでShift-JISファイルをオートリロード

    browsersyncはファイル変更を監視して自動でブラウザリロードしてくれるツールです。

    Shift-JISでは文字化けするので、以前の記事でShift-JISファイルをオートリロードするための方法をチラッと紹介しました(リンク貼っただけですが)。

    SIRIUSテンプレート開発時に入れておくと捗るgulpプラグイン

    今回は、紹介した方法そのままでエラーが出た場合があったので対応をメモしておきます。なお、上記記事で紹介したリンク先のコードは以下。僕も基本的にそのまま使っています。

    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();
            }
          }
        ]
      }
    });
    

    状況1:文字化けがなおらない

    環境によってできたりできなかったりするっぽい?と困っていましたが、調べると何のことはない。

    gulpfile.js
    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()を使用とのこと。以下参照。

    Buffer.from()/Buffer.alloc() API への移植 | Node.js

    該当箇所は以下。

    gulpfile.js
    var source = iconvLite.decode(new Buffer(data, 'binary'), "Shift_JIS");

    修正後↓

    gulpfile.js
    var source = iconvLite.decode(new Buffer.from(data, 'binary'), "Shift_JIS");

    怒られなくなった。

    以上。

    • このエントリーをはてなブックマークに追加
    広告
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    <次の記事(2020/03/03)
    Amazon定期便に登録してある商品名一覧を表示するブックマークレット
    前の記事>(2019/12/17)
    CakePHP2.xのチュートリアル エラーと対応メモ
    記事一覧