webmanab.html

menu

Gulpで文字コードをUTF-8からShift_JISに変換する方法-『gulp』

　

toc
ー

  1. プラグインのインストール
    1. タスクの記述
      1. それでも上手くいかない ?

        gulpで UTF-8 のファイルをビルド時に Shift_JIS に変換する方法です。文字コードをShift_JISで納品しないといけない要件はたまにありますが、gulpでビルド時に変換することで開発環境はUTF-8で構築できる、というようなメリットがある方法になっています。「gulp-replace」と「gulp-convert-encoding」を利用します。

        gulp 環境の導入はこちらからです。

        プラグインのインストール

        「gulp-replace」と「gulp-convert-encoding」という2つのプラグインをインストールします。


        yarn add gulp-replace gulp-convert-encoding

        「gulp-replace」は特定の文字列を置換、「gulp-convert-encoding」は任意のエンコードに変換、という２つの機能を組み合わせることで要件を実現します。

        タスクの記述

        convertというタスクを定義します。'your-src' 'your-dist' は任意のパスを記述します。そこにHTMLやCSSなどを置いてgulp convertを実行すれば、ファイルのエンコードがShift_JISに変換され、charset で
        指定した UTF-8 の記述部分も　Shift_JISに変更されます。


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

gulp.task('convert', () => {
  return gulp.src('your-src')
    .pipe(replace('UTF-8', 'Shift_JIS'))
    .pipe(convertEncoding({to: 'Shift_JIS'}))
    .pipe(gulp.dest('your-dist'));
});

        それでも上手くいかない ?

        まれにこのタスクでエンコードできない文字列が存在します。おそらく? という悲しい結果になっていると思います。UTF-8 では存在するが Shift_JIS では存在しない文字列などの場合にこうなるみたいです。これはもう手作業で対応するしかないので、初めからその文字列を数値実体参照して開発を進めていくことにしています。

        変換はこちら。

        おわります。

        Gulpで文字コードをUTF-8からShift_JISに変換する方法-『gulp』

        share
        ー

        tag
        ー

        related
        ー

        tip