SIRIUSテンプレート開発時に入れておくと捗るgulpプラグイン

SIRIUSテンプレートの開発で役に立っているgulpプラグインをメモを兼ねて紹介します。

ファイルのエンコードをShift_JISに変換する

SIRIUSのデフォルト文字コードはShift_JISで、開発時にネックになることも多々…。特にCSSは、style.cssファイル生成時にファイル冒頭に@charset "shift_jis";が自動で付与されるっぽい挙動もあって鬼門です。疑似要素のcontentが文字化けとか。

そこで「gulp-convert-encoding」プラグインでファイルの文字コードを変換します。

gulp-convert-encodingのインストール

npm install --save-dev gulp-convert-encoding

タスク

Sassでコンパイルする時にShift_JISに変換する例です。

var gulp    = require("gulp"),
    sass    = require('gulp-sass'),
    plumber = require('gulp-plumber'),
    convertEncoding = require( 'gulp-convert-encoding' );

gulp.task('sass', function(){
  gulp.src('./src/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(convertEncoding({to: 'Shift_JIS'}))
    .pipe(gulp.dest('./src/css/'));
});

browsersyncでShift-JISのファイルをオートリロード

browsersyncはファイル変更を監視して自動でブラウザリロードしてくれます。

Browsersync – Time-saving synchronised browser testing

Shift-JISに対応していないので、ひと手間かける必要があります。自分は以下の記事のをまんま使っています。

browsersyncでShift-Jisのファイルを使用する – Qiita

Shift-JISなtestディレクトリをwatchして複製して、上記で紹介したgulp-convert-encodingをかましてbrowsersync用のUTF-8環境を作るみたいなアプローチもアリだと思います。やったことないけど。

font-awesomeをSassでコンパイルする時に文字化けしないようにする

SIRIUS関係ないけど、文字コードつながりで。

gulp-ruby-sassでfont-awesomeをコンパイルしたら文字化けした件 – Qiita

上記記事のように、mixinの引数にUnicodeを渡して使う際に文字化けるという現象です。

mixin内でクオーテーションを追加する

@mixin fontawesome( $icon, $weight: 900 ){
	font-family: "Font Awesome 5 Free";
	content:  unquote("\"") + $icon +  unquote("\"");
	font-weight: $weight;
}
.icon::before{  
	@include fontawesome( $icon: \f17b );
}

font-weightの指定が適切でない場合も表示されなかったりするので、そこんとこも注意する必要があります。上記はSolidの場合をデフォルトにしてあります。

Basic Use | Font Awesome