IT

GulpでSASSのコンパイル手作業を自動化する5

今回のテーマ

今回はgulp-sassパッケージを使ってSASSをコンパイルする時のオプションをいろいろ指定して、cssのファイルサイズを圧縮したりベンダープレフィックスを付けたり試してみたいと思います。マニュアルは次のサイトを参考にしました。node-sass のページにオプション説明が詳しく載ってます。

gulp-sassパッケージ

git-hub:node-sass

CSSの整形

まずは筆者の環境

  • OS: Windows10
  • Node.js: v12.14.1
  • gulp-cli: 2.2.0
  • Gulp: 4.0.2

※前回までの環境からOSとNode.jsのバージョンに変更がありますが、前回までの手順に変更点はありませんでした。

動作確認のためにscssファイルはこちらを使いました。

// サンプルSASS
.hoge {
  p {
    font-weight: bold;
    font-size: 1.2rem;
  }
}

$fontColor: #666;

h1 {
  color: $fontColor;
}

.foo-box {
  display: flex;
  border-radius: 20px;
}

ではcssの整形を行ってみます。 gulpfile.js で outputStyle を追加指定し、gulp css タスクを実行してみます。

const { src, dest, series, watch } = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass'); // デフォルトだが一応明示的に宣言

function css() {
  return src('./sass/**/*.scss')
    // 'compressed' ファイルサイズを小さくする
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(dest('./css'));
}

function watch_sass() {
  watch('./sass/**/*.scss', css);
};

exports.css = css;
exports.watch_sass = watch_sass;
exports.default = watch_sass;

.hoge p{font-weight:bold;font-size:1.2rem}h1{color:#666}

{outputStyle: ‘compressed’}と指定すると上のようにcssの空白や改行が取り除かれぎゅっと詰まりました。

outputStyle には nested, expanded, compact, compressed が指定でき、何も指定していないと nested だそうです。cssの見易さ優先ならexpanded 、ファイルサイズを意識するなら compressed になるでしょうか。

ベンダープレフィックスを自動付与

ベンダープレフィックスといえばブラウザの互換性を保証するためのCSS記述になりますがこの指定も結構面倒でいちいち覚えていません😅。次の gulp-autoprefixer を利用すればその悩みから開放されそうです。

gulp-autoprefixerパッケージをインストール

npm install --save-dev gulp-autoprefixer

gulp-autoprefixer用の設定ファイルを .browserslistrc というファイル名でプロジェクトディレクトリに作成する必要があります。この中にはどのブラウザを対象とするかといった設定を行います。古い記述方法ではgulpfile.js に直接記述する方法がありましたが現在では実行時に警告が発生します。ここでは簡単な動作確認のため過去10年にリリースされたすべてのバージョンを対象とする

last 10 years

と設定してみます。

 .browserslistrc ファイルを保存しましたら、gulpfile.js を次のように修正して、gulp css タスクを実行してみます。

const { src, dest, series, watch } = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require( 'gulp-autoprefixer' );
sass.compiler = require('node-sass'); // デフォルトだが一応明示的に宣言

function css() {

  return src('./sass/**/*.scss')
    // 'expanded' CSSを展開する
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(dest('./css'));
}

function watch_sass() {
  watch('./sass/**/*.scss', css);
};

exports.css = css;
exports.watch_sass = watch_sass;
exports.default = watch_sass;
.hoge p {
  font-weight: bold;
  font-size: 1.2rem;
}

h1 {
  color: #666;
}

.foo-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-border-radius: 20px;
          border-radius: 20px;
}

上記の作成されたcssファイルには -webkit- -moz- -ms- といったベンダープレフィックス付きの記述が追加されました。.browserslistrc ファイルの設定内容は実際の案件で異なってくると思いますが

defaults

としておけば現シェア率0.5%以上、各ブラウザの最後の2つのバージョンをターゲットとしてくれるようです。

詳しい設定方法はこちらをご覧ください。

最後に

 

今回はGulpを使いcssのファイルサイズを圧縮したりベンダープレフィックスを付けてみました。今後に役立てたいと思います。

調べているとまだまだ価値のある機能がありそうです。😃中でも興味があるのがgulp-sass-lintでコーディングチェックやgulp-postcssの拡張パッケージでcssの並び替えやメディアクエリ最適化などなど。。また機会があれば挑戦してみます。

  • ABOUT ME
    tubogo
    自己紹介:SE歴17年、儲からない事ならいろいろかじってます。