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

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

  1. ファイルのエンコードをShift_JISに変換する
    1. gulp-convert-encodingのインストール
    2. タスク
  2. browsersyncでShift-JISのファイルをオートリロード
  3. font-awesomeをSassでコンパイルする時に文字化けしないようにする

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

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

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

gulp-convert-encoding – npm

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

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

タスク

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

gulpfile.js
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内でクオーテーションを追加する

jQuery
@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

サポートが必要ですか?

ご質問・お見積り依頼はお気軽にどうぞ

お問い合わせはこちら
シェア
野良人 代表
新免祥太
1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
広告
次の記事(2019/05/28)
CSSで斜め45度のリボンを配置する時の計算式
前の記事(2019/04/02)
2019/03に注目したWEB関連記事・個人的読書メモ
記事一覧