読者です 読者をやめる 読者になる 読者になる

dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

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

f:id:kokushin:20160518154843p:plain

変更があったら勝手にブラウザをリロードしてくれる「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なくなってしまえ!