gulp-sassを使ってDart Sassでコンパイルできるようにしよう【gulp4】

html/css
この記事は約11分で読めます。
スポンサーリンク

はじめに

今回はgulp-sassを使ってDart Sassでコンパイルできるようにする方法について説明していきます。

sassの公式サイトを見ると普段書きなれているsass(LibSass)が2022/10/1でサポートを終了する予定みたいです。

sassの推奨している書き方に合わせたい場合はDart Sassを使うようにしましょう。

対象者
  • gulpを使ってDart Sassでコンパイルする環境を構築したい方
  • LibSassからDart Sassの環境に移行したい方

その他gulpのおすすめのプラグインはこちら

gulpの使い方まとめについてはこちら。

gulpfile.jsのテンプレート紹介についてはこちら。

それではgulpでDart Sassをコンパイルする説明に移ります。

スポンサーリンク

LibSassとDart Sassの違い

冒頭でも記述しましたが、LibSassは2022/10/1でサポートが完全に終了する予定です。

今後web制作をされる方はDart Sassを使用するようにしましょう。

参考サイト

LibSassで記述したい方はこちら

LibSassからDart Sassへ移行するに伴い以下3点が大きく変わります。

  • @import が使用不可となり@useを使用する
  • sass関数が使用不可となりビルトインモジュールを使用する
  • ファイルごとの変数がグローバルな変数からプライベートな変数になる

これだけではどうなるか分かりにくいですね。

簡単にいうとDart Sassではファイルや変数・関数ごとの依存関係がより限定的に明示的になります。

現役エンジニアの方の目線から見るとファイルや変数・関数の影響範囲が分かりやすくなりそうですね。

逆に初心者の方の目線からだとsassがよりプログラミングちっくになって少し難しいと感じるかもしれません。

早いうちにDart Sassを導入して書き方に慣れるようにしましょう。

今回は以下5つのプラグインを使ってDart Sassでコンパイルをしていきます。

プラグイン名内容
sassDart Sassを使えるようにするプラグイン
gulp-sasssassのコンパイルをする
gulp-sass-glob-use-forwardglob機能を使って@use@forwardを省略する
gulp-autoprefixerベンダープレフィックスを自動付与する
gulp-plumberwatch中にエラーが発生してもwatchが止まらないようにする
スポンサーリンク

ディレクトリ構成

今回のディレクトリ構成は下記になります。

test
├ node_modules
├ src
│ ├ css
│ ├ sass
│ │ ├ module
│ │ │ ├ _header.scss
│ │ │ ├ _footer.scss
│ │ │ └ _variable.scss
│ │ └ style.scss
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.json

gulp-sassを使ってscssファイルをコンパイルしてcssフォルダに出力させます。

コンパイルする前後でglob機能を使ったり、ベンダープレフィックスを付与していきます。

スポンサーリンク

glob機能とはなにか

glob機能について説明しておきます。

機能ごとに分けたscssファイルをstyle.scssでまとめて読み込む場合、ひとつひとつ@use@forwardで指定しないといけないので面倒ですよね。

glob機能を使うと以下のように簡略化できます。

glob機能使用前(style.scss)

@use "./module/header";
@use "./module/footer";
@use "./module/variable";

glob機能使用後(style.scss)

@use "./module/*";

非常に簡単に記述できるようになることが分かります。

また名前空間に対しても以下のようにglob機能を使うことができるようになります。

glob機能使用前(footer.scss)

@use "./variable";

.footer{
  background-color: variable.$color-black;
}

glob機能使用後(footer.scss)

@use "./variable" as *;

.footer{
  background-color: $color-black;
}

こちらも非常に簡潔に記述できるようになりました。

スポンサーリンク

プラグインをインストールしよう

それではgulpのプラグインをインストールしていきましょう。

npm i -D sass

下記コマンドをターミナルで実行してsassをインストールします。

npm i -D sass

sass公式

npm i -D gulp-sass

こちらも同様にインストールします。

npm i -D gulp-sass

gulp-sass公式

npm i -D gulp-sass-glob-use-forward

こちらも同様にインストールします。

npm i -D gulp-sass-glob-use-forward

gulp-sass-glob-use-forward公式

npm i -D gulp-autoprefixer

こちらも同様にインストールします。

npm i -D gulp-autoprefixer

gulp-autoprefixer公式

npm i -D gulp-plumber

こちらも同様にインストールします。

npm i -D gulp-plumber

gulp-plumber 公式

スポンサーリンク

gulpfile.jsを編集しよう

プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, watch, series, parallel } = require("gulp");

const plumber = require("gulp-plumber");
const sassGlob = require("gulp-sass-glob-use-forward");
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require("gulp-autoprefixer");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function compile(done) {
  src("./src/sass/**/*.scss")
    .pipe(plumber())                   // watch中にエラーが発生してもwatchが止まらないようにする
    .pipe(sassGlob())                  // glob機能を使って@useや@forwardを省略する
    .pipe(sass())                      // sassのコンパイルをする
    .pipe(autoprefixer())              // ベンダープレフィックスを自動付与する
    .pipe(dest("./src/css"));

  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.compile = series(compile);

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/

package.jsonを編集しよう

ベンダープレフィックスを自動付与させるにはpackage.json を編集する必要があります。

package.jsonbrowserslist オプションを追記することで、どのブラウザのいつのバージョンまでベンダープレフィックスを自動付与させるか設定させることができます。

browserslist の値はご自身の環境に合わせて変更してみてください。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^5.0.0",
    "gulp-sass-glob-use-forward": "^0.1.3",
    "sass": "^1.42.0"
  },


  "browserslist": [
    "last 2 versions",
    "ie >= 11",
    "Android >= 4"
  ]
}
スポンサーリンク

コマンドを実行しよう

編集が完了したらターミナルからコマンドを実行しましょう。

npx gulp compile

「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。

gulpのインストール先が異なる可能性があります。

以下のようになれば正しくsassをコンパイルできています。

[00:00:00] Starting 'compile'...
[00:00:00] Starting 'compile'...
[00:00:00] Finished 'compile' after 20 ms
[00:00:00] Finished 'compile' after 23 ms
スポンサーリンク

おわりに

以上gulp-sassを使ってDart Sassでコンパイルできるようにする方法について説明しました。

いかがだったでしょうか。

これからはDart Sassの環境でweb制作を進めていく必要があります。

早いうちにDart Sassを導入して書き方に慣れるようにしましょう。

コメント

タイトルとURLをコピーしました