gulp で shift_jis 環境を管理する


sublime も gulp も shift_jis に弱い。というか対応してない?
それでも shift_jis でやらなきゃいけない時があるもので gulp の備忘録。

ファイルのエンコード設定

HTMLやCSSの charset 記述は shift_jis にしておく。
<meta charset="shift_jis">
とか
@charset "shift_jis";
とか

だけどファイル自体のエンコードは utf-8。
(shift_jis にするとうまくコンパイルできなかった)

※エンコード記述も gulp のタスクに組み込んじゃうこともできる。
それに関しては誰かがやり方を書いてくれてるので探そう!
⇒ gulpで処理結果をShift_JISに変換して出力する

プラグイン:gulp-convert-encoding

utf8 ⇒ shift_jis に変換してコンパイルしてくれるプラグイン。
gulp-convert-encoding

これをHTML(jade, ejs ...etc.)のタスク内にかましてあげる。

gulpfile.js
var convertEncoding = require('gulp-convert-encoding');

// html
gulp.task('html', function() {
  return gulp.src(paths.html)
  // その他のタスクいろいろ
  .pipe(convertEncoding({to: "shift_jis"}))
  .pipe(gulp.dest(paths.dist));
});

// ejs
gulp.task('ejs', function () {
  return gulp.src(paths.ejs)
  // その他のタスクいろいろ
  .pipe(ejs(json, {ext: '.html'}))
  .pipe(convertEncoding({to: "shift_jis"}))
  .pipe(gulp.dest(paths.dist));
});

// jade
gulp.task('jade', function() {
  return gulp.src(paths.jade)
  // その他のタスクいろいろ
  .pipe(jade({
    pretty: true,
    basedir: './src/_jade/',
    doctype: 'html'
  }))
  .pipe(convertEncoding({to: "shift_jis"}))
  .pipe(gulp.dest(paths.dist));
});

SCSS も同じように。

gulpfile.js
gulp.task('sass', function() {
  return gulp.src(paths.scss)
  // その他のタスクいろいろ
  .pipe(sass())
  .pipe(convertEncoding({to: "shift_jis"}))
  .pipe(gulp.dest(paths.dist))
});