【覚書】utf-8からShift_JISに変換する【gulpfile.js】
utf-8ばかりなこの頃ですが、最近、仕事でShift_JISで作る必要があり・・
普通にShift_JISで作っちゃうと、Gulp経由は文字化けしちゃって仕事にならないんですよね。。
そこで、作業中はutf-8で作り
(ローカルサーバ立ち上げて見た目を確認するのもutf-8でやる)
後にShift_JISに変換するよう、gulpfile.jsに追記しました。
// convert encoding
const gulp = require('gulp');
const through2 = require('through2');
const iconv = require('iconv-lite');
gulp.task('convertToShift_JIS', function() {
return gulp.src('src/**/*.html')
.pipe(through2.obj(function (file, _, cb) {
let content = file.contents.toString('utf8');
// メタタグ内のcharset属性の値を変更する
content = content.replace(/(<meta[^>]+charset=")[^"]+("[^>]*>)/gi, '$1Shift_JIS$2');
// 文字コードを変換
file.contents = iconv.encode(content, 'Shift_JIS');
this.push(file);
cb();
}))
.pipe(gulp.dest('dist/'));
});
上記のタスクは、コマンドプロンプトから
『 gulp convertToShift_JIS 』
エンター!で実行。
メタタグ内のcharsetをShift_JISに書き換えて、文字コードも変換します。
ローカルサーバではdistフォルダを参照するよう、gulpfile.jsで設定してる場合がほとんどかと思われますが、今回はsrcフォルダにしておきます。
// ローカルサーバ起動
const buildServer = done => {
browserSync.init({
server: {
baseDir: 'src/'
}
})
done();
}
srcフォルダはutf-8、distフォルダにはShift_JIS、と分けた形になります。
変換されたhtmlをブラウザで見てみますと、残念ながら多少の文字化けがあったりするので
「?」になっている個所をひとつひとつ書き換える。。。