10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gulp で shift_jis 環境を管理する

Posted at

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))
});
10
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?