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))
});