gulpでShift_JISのファイルを生成する（Gitでの文字化け対策も行う）

きっかけ

先日、とあるプロジェクトにてShift_JISでHTMLやCSSを作成しなければいけないという場面がありました。

ただそれだけではなく、そのファイルは近いうち（半年から１年後）にUTF-8にして公開しなければいけないとのこと。

エディタの文字コードをShift_JISにしただけでは、のちのちUTF-8のものを公開する際に、わざわざ文字コードのコンバート作業が発生してしまいます。

VS Codeでコーディングをする際にもわざわざ毎回Shift_JISに変換してファイルを開き直す必要もあり、そこで、UTF-8で元ファイルを作成して、それをgulpを利用してShift_JISに変換して出力するようにしようと思いました。

HTML

gulp-convert-encoding というモジュールを利用します。

こちらはUTF-8からShift_JISに変換してくれるものです。

また、gulp-replaceを使用して、head内にあるcharsetの表記を置換します。

合わせて、gulp-cr-lf-replace というモジュールも併用して、改行コードも正規化しておきます。

var gulp = require('gulp');
var replace = require('gulp-replace');
var convertEncoding = require('gulp-convert-encoding');
var crLfReplace = require('gulp-cr-lf-replace');

gulp.task('html', function(){
	gulp.src('./html/**/**/*.html')
		.pipe(crLfReplace({changeCode: 'CR+LF'}))  //改行コード変換
		.pipe(replace(/meta charset="utf-8"/g, 'meta charset="shift_jis"')) //charsetの表記を置換
		.pipe(convertEncoding({to: "shift_jis"})) //sjis変換
		.pipe(gulp.dest('../'));
});    

SCSS/CSS

HTMLと同様の方法でコンパイル後にShift_JISに変換します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var header = require('gulp-header');
var replace = require('gulp-replace');
var sassUnicode = require('gulp-sass-unicode');
var convertEncoding = require('gulp-convert-encoding');
var crLfReplace = require('gulp-cr-lf-replace');

gulp.task('scss', function() {
	gulp.src('./scss/**/**/*.scss', { base: './scss/'})
		.pipe(sassUnicode())
		.pipe(replace(/@charset "(Shift_JIS|UTF-8)";/g, ''))
		.pipe(header('@charset "shift_jis";\n\n'))
		.pipe(convertEncoding({to: "shift_jis"}))  //sjis変換
		.pipe(gulp.dest('../assets/css/'));
});   

以前の記事を参考に、CSSファイルの先頭にcharsetの記述を追加したり、擬似要素のcontentプロパティで用いられる数値文字参照が文字化けしない処理も追加しています。

shinimae.hatenablog.com

Gitとの連携

ところが、いざShift_JISで出力したファイルの差分を、Gitクライアントツールを通して見ると、文字化けを起こしてしまいます。

こちらを参考にして、Gitの設定を少しばかり編集します。

qiita.com

.gitattributes

*.html diff=sjis

.git/config

[diff "sjis"]
    textconv = iconv -f sjis

こうすることで、Gitクライアントツールでも文字化けすることなく、開発を行うことができました。