gulp:ビルド時にcharsetやファイルエンコードをShift_JISに変換する方法

gulp:ビルド時にcharsetやファイルエンコードをShift_JISに変換する方法

普段は基本的にファイルの文字コードはUTF-8を使用していますが、稀にShift_JISなど別の文字コードを使用する必要があります。
ただ、そういった場合でもgulpは使いたいってときに使える方法のひとつで、今回はUTF-8のファイルをビルド時にShift_JISに変換するというのを備忘録兼ねて紹介します。

gulp-headerのインストール

「gulp」は既にインストール済みという想定で、まずは下記をコマンドに入力して「gulp-replace」と「gulp-convert-encoding」という2つのプラグインをインストールします。

$ npm i -D gulp-replace gulp-convert-encoding

$ npm install gulp-replace gulp-convert-encoding --save-devとか個別にインストールでももちろん可。

プラグイン名から何となくわかると思いますが、「gulp-replace」は特定の文字列を置き換えるというもので、「gulp-convert-encoding」は別のエンコードに変換できるというものになり、この2つのプラグインを利用して実装していきます。

タスクの記述

ここではgulpfile.jsに記述する形で紹介するので、ファイル分割をしている場合などは該当のファイルに記述してください。
また、paths.srcpaths.destとしている部分は、それぞれファイル指定のパスを記述する部分になるので、自身の環境に合わせて任意のものに変更してください。

gulpfile.js

var gulp = require( 'gulp' ),
    replace = require( 'gulp-replace' ),
    convertEncoding = require( 'gulp-convert-encoding' );

gulp.task('build', function() {
  return gulp.src(paths.src)
      .pipe(replace('UTF-8', 'Shift_JIS'))
      .pipe(convertEncoding({to: 'Shift_JIS'}))
      .pipe(gulp.dest(paths.dest));
});

上記は「build」というタスク名で、見ての通りgulp.src()で指定されたファイルをgulp.dest()に出力する間に2つの処理を加えています。
ひとつ目のreplace('UTF-8', 'Shift_JIS')は「gulp-replace」を用いた文字列置換を行っており、ここではUTF-8という文字列をShift_JISに変換しています。
ふたつ目のconvertEncoding({to: 'Shift_JIS'})は「gulp-convert-encoding」を用いたエンコード変換を行っており、ここではShift_JISに変換するようにしています。

上記記述後、gulp.src()で指定したところへUTF-8で作成されたHTMLやCSSなどを適当に置いて$ gulp buildを実行すれば、gulp.dest()で指定したところに出力されたファイルのエンコードがShift_JISに変換されており、さらにcharset指定部分でUTF-8としていた部分もShift_JISになっているのを確認できます。

ちなみに、稀だとは思いますが文字列置換の指定がこれだけだと意図しない部分まで変換されてしまうという場合などは、@charsetを含めて指定するとか正規表現使うとかして回避できると思います。


以上、gulpでビルド時にcharsetやファイルエンコードをShift_JISに変換する方法でした。
一応今のところこれで特に問題は起きておらず、この方法であれば開発時にはUTF-8で作業できてgulpも使えますし、ビルドするときはちゃんとShift_JISとして出力するというのができたので、今後Shift_JISをはじめ別のエンコードを扱う必要があるはこの方法を利用していこうかなと思います。

プラグインの詳細などについては、以下で確認できます。

Close the search window,
please press close button or esc key.