ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

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

2019年5月27日

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

    ファイルのエンコードを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

    このエントリーをはてなブックマークに追加