GulpでSASSのコンパイル手作業を自動化する５｜有限会社　オブジェクト・ラボ

今回のテーマ

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

gulp-sassパッケージ

npm

gulp-sass

https://www.npmjs.com/package/gulp-sass

Gulp plugin for sass

git-hub:node-sass

GitHub

sass/node-sass

https://github.com/sass/node-sass#options

:rainbow: Node.js bindings to libsass. Contribute to sass/node-sass development by creating an account on GitHub.

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つのバージョンをターゲットとしてくれるようです。

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

GitHub