「browsersync」で「Shift_JIS」を指定すると文字化けが起こるので、強引に回避する作戦

変更があったら勝手にブラウザをリロードしてくれる「browsersync」ですが、「Shift_JIS」形式のファイルを読み込ませると文字化けを起こしちゃいます。
大手企業サイトのコーディングとかやるとよく遭遇するので、強引に回避してみます。

強引に回避する作戦

開発時

1. 「UTF-8」形式のHTMLファイルを用意
2. 「meta charset」に「Shift_JIS」を指定
3. 「browsersync」で快適コーディング

テスト時

1. 「UTF-8」形式のHTMLファイルをビルド用のディレクトリに移動
2. 「gulp-convert-encoding」で「Shift_JIS」形式のHTMLファイルへ変換
3. ブラウザで表示をチェック！

「UTF-8」形式のHTMLファイルを用意

「browsersync」がサポートしているのは「UTF-8」形式のファイルなので、それに合わせましょう。

「meta charset」に「Shift_JIS」を指定

HTML内の指定は「Shift_JIS」になっていますが、ファイル自体の形式は「UTF-8」なので「browsersync」でも表示されます。

「gulp-convert-encoding」で「Shift_JIS」形式のHTMLファイルへ変換

「gulp-convert-encoding」を使うとファイルを指定の形式へ変換できます。

www.npmjs.com

gulp.task('build', function () {
    return gulp.src('./build/**/*.html')
        .pipe(convertEncoding({to: 'shift_jis'}))
        .pipe(gulp.dest('./build'));
});

上記のようなタスクを作って $ gulp build を実行すると、build/ 内のHTMLファイルを全て「Shift_JIS」へ変換します。

※納品前は念入りにブラウザテストし、不具合が起きていないか必ず確認してください。

とりあえず

これでコーディング中は「Shift_JISという名のUTF-8」を使用し、「browsersync」で表示可能です。
なんかめちゃくちゃな方法ですみません。他に良い方法がありましたら教えてくだし。

あー、Shift_JISなくなってしまえ！