【Gulp】Sassのコンパイル時に文字コード指定記述（charaset）を保持する方法
Web2019年2月8日
Gulpでsassファイルをコンパイルしてcssを出力した際、sassファイルで書いたはずのcharasetが消されてshift-jisで保存されてしまうことがあります。本記事では確実に、1行目にcharasetが記述された状態でcssがコンパイルされるようにするgulp記述をご紹介させていただきたいと思います。
マルチバイト文字があるとcharasetは出力される
なぜこんな仕様なのか謎なのですが、sassファイル内にマルチバイト文字があるとcharasetは出力され、無い場合は出力されません。これはコメントアウト内の文字列も含まれます。
これではサーバの文字コードがUTF-8なのに、shift-jisで出力されてしまうといった困った状況が発生することになります。
2つのモジュールで解決
そこで、以下の2つのモジュールを使うことでこの問題を解決することが可能です。
gulp-header
このモジュールを使うことで、コンパイルされるcssファイルの先頭に任意の記述を挿入することができます。gulpfile.jsで以下のように記述することで、マルチバイトがあろうがなかろうが先頭にcharasetが挿入されます。
var gulp = require('gulp');
var sass = require('gulp-sass');
var header = require('gulp-header');
gulp.task('sass', function(){
gulp.src('_dev/scss/*.scss')
.pipe(sass())
.pipe(header('@charset "UTF-8";\n\n'))
.pipe(gulp.dest('shared/css'));
});ただしこのモジュールだけでは対応としては完全ではなく、これではsassファイル内にマルチバイト文字があった場合、以下のようにcharasetが重複して記述されてしまいます。
@charset "UTF-8";
@charset "UTF-8";gulp-replace
そこで、さらにモジュール「gulp-replace」を活用します。このモジュールを使うことで、任意の文字列を置換することが可能です。gulpfile.jsで以下のように記述することで、「@charset "UTF-8";」を全て削除してから前述のgulp-headerでcharasetを挿入するようにします。
var gulp = require('gulp');
var sass = require('gulp-sass');
var header = require('gulp-header');
var replace = require('gulp-replace');
gulp.task('sass', function(){
gulp.src('_dev/scss/*.scss')
.pipe(sass())
.pipe(replace(/@charset "UTF-8";/g, ''))
.pipe(header('@charset "UTF-8";\n\n'))
.pipe(gulp.dest('shared/css'));
});これでcharasetの出力有無を気にする必要がなくなります。
まとめ
本記事を執筆するにあたって、以下の記事を参考にさせていただきました。
おそらくコメントアウトなどに日本語を使うクセのあるエンジニアの場合、遭遇しない現象なのだと思いますが自分の場合、極力日本語をsassファイル内に書かないスタンスなので、本対応が必要になりました次第です。
「cssファイルが意図した文字コードでコンパイルされない」「charasetが出力されない」などでお困りの方は、ぜひ本記事をご参考にしていただければ幸いです。