LoginSignup
0
0

More than 5 years have passed since last update.

gulp-convert-encoding / gulp-header

Last updated at Posted at 2017-06-23

システム側の都合やレガシーサイトのリニューアルにもかかわらず、文字コードが変更できない場合など、開発時にタスクランナー(ここでは「gulp」)を利用して、開発は「UTF-8」、コンパイル時に他の文字コードへ変換することで対応する。

https://www.npmjs.com/package/gulp-convert-encoding
https://www.npmjs.com/package/gulp-header

用途例:Sassを「UTF-8」で開発し、コンパイル時に他の文字コードへ変換する

install

$ npm i -D gulp-convert-encoding
$ npm i -D gulp-header

Usage Basic

var gulp = require('gulp');
var sass = require('gulp-sass');
var convertEncoding = require('gulp-convert-encoding');// 文字コードを変換
var header = require('gulp-header'); //@charset宣言を先頭追加する為に使用

gulp.task('styles', function () {
  return gulp.src('src')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(header('@charset "EUC-JP";\n'))// @charset 宣言を追加
    .pipe(convertEncoding({to: "EUC-JP"}))
    .pipe(gulp.dest('dist')) //任意のフォルダー[htdocs/assets/css]とか
});

※結論としてHTMLとCSSで文字コードが違っても、CSSの先頭で文字コード宣言すればよいかと。
※HTML5では、aタグ、linkタグのcharset属性が廃止

参考:(エディターパッケージ)
https://atom.io/packages/auto-encoding
https://github.com/seanliang/ConvertToUTF8

0
0
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
0
0