【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の出力有無を気にする必要がなくなります。