gulpでshift_jisとCR+LFの開発環境を構築

gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。

gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ

  1. SassはCSS1行目の@charsetをUTF-8と固定出力してしまう
  2. Browsersyncはshift_jisが文字化けする
  3. jQueryなどのライブラリ類の文字コードはshift_jisに変えたくない
  4. 画像までshift_jis変換すると化ける

まずは

と対処した上で
ポイントには、このように対応してみました。

サンプルをGitHubで確認

SassはCSS1行目の@charsetをUTF-8と固定出力してしまう

どうあがいても変えられませんでした。
gulp-convert-encodingを通すと、実際の文字コードはshift_jisになっているのに、@charsetの表記は強引にutf-8のままです。

ネット上の情報を漁っても、Sassのバージョンを過去のものに戻すしか対処法が見つからない。
しかしSassのバージョンを落とすのは腑に落ちなかったので
gulp-replaceで@charsetを文字列置換する対処で落とし所としました。

.pipe('utf-8', 'shift_jis'))

Browsersyncはshift_jisが文字化けする

ソースコードを丸ごとshift_jisでCR+LF環境にできて喜んでいましたが、ブラウザ上の表示が化けているではないか。

おいおい…Chromeのエンコード設定ってどこだ?と探しながら我に帰りましたが
gulp環境なしで普通に開いたら、同じソースが化けていなかったのを思い出したぞ。
そうでした、Browsersyncはshift_jisが文字化けする特性がありました。

Browsersyncのソースに介入するのも面倒。しかし、Browsersyncなしで開発するのも面倒。
ということで、この件は
開発するときはUTF-8でやりきってしまい
リリース用に、開発でコンパイルしたソースを一式複製してshift_jis変換する対処で落とし所としました。

  • /html … 開発データ置き場
    • /assets … 素材置き場
      • /css
      • /img
      • /js
    • /lib … ライブラリ置き場
    • index.html
  • /release … /htmlを複製してshift_jis化
  • /sass … scss置き場

jQueryなどのライブラリ類の文字コードはshift_jisに変えたくない

これで完璧なんじゃねえかと大喜びしていましたが、ふと我にかえりました。
ライブラリも無差別にshift_jis変換してどうする…と。

そこで、gulp.srcで除外の書式を使い、ライブラリ類のディレクトリ以下をshift_jis化対象外としました。

//  htmlディレクトリからreleaseディレクトリへソースを複製
gulp.task('copy', ['clean'], function() {
  gulp.src([
    dir.html + '/**/*.*',
    '!' + dir.html + '/lib/**/*.*' // ライブラリディレクトリは複製対象から除外
  ])
  .pipe(replace('UTF-8', 'shift_jis')) // 文字置換
  .pipe(crLfReplace({changeCode: 'CR+LF'})) // 改行コード変更
  .pipe(convertEncoding({to: 'shift_jis'})) // 文字コード変更
  .pipe(gulp.dest(dir.release));
});

そのあとで、ライブラリだけをプレーンに複製

// Libraryを文字コードを変えず複製
gulp.task('lib-copy', ['copy'], function() {
  gulp.src([
    dir.html + '/lib/**/*.*'
  ])
  .pipe(gulp.dest('release/lib'));
});

画像までshift_jis変換すると化ける

*.*でそこにあるデータをまるごと文字コード改行コード変換の対象にしていたので、画像が化けてリンク切れになってしまいました。
このままでは使い物にならないので、gulp.srcの設定を変更し .html、.js、.css のみ指定するようにしました。

+(html|js|css) で、|で区切った候補のいずれかに該当する指定、
!(html|js|css) で、|で区切った候補のいずれにも該当しない指定ができます。

//  htmlディレクトリからreleaseディレクトリへソースを複製
gulp.task('copy', ['clean'], function() {
  gulp.src([
    dir.html + '/**/*.+(html|js|css)',
    '!' + dir.html + '/lib/**/*.*' // ライブラリディレクトリはまるごと除外
  ])
  .pipe(replace('UTF-8', 'shift_jis')) // 文字置換
  .pipe(crLfReplace({changeCode: 'CR+LF'})) // 改行コード変更
  .pipe(convertEncoding({to: 'shift_jis'})) // 文字コード変更
  .pipe(gulp.dest(dir.release));
});

// 文字コードを変えず複製
gulp.task('plane-copy', ['copy'], function() {
  gulp.src([
    dir.html + '/**/*.!(html|js|css)',
    dir.html + '/lib/**/*.*'
  ])
  .pipe(gulp.dest('release/'));
});

サンプル

GitHubに環境一式のサンプルをアップしました。実際に動かして確認してみたい方はご活用ください。
gulp-shift_jis/README.md at master · webdev-jp-net/gulp-shift_jis

関連記事

Pocket