gulp-sassでsassのコンパイルをしよう【gulp4】

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

はじめに

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

gulpでsassをコンパイルできるようになると、ファイルの一括読み込みやベンダープレフィックスの自動付与など面倒な作業を楽にしてくれるようになります。

sassをgulp以外の方法でコンパイルしている方はぜひ参考にしてください。

対象者
  • gulpでsassのコンパイルをしたい方
  • sassで記述する面倒な作業を自動化させたい方

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

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

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

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

スポンサーリンク

gulpでsassをコンパイルするメリット

そもそもgulpでsassをコンパイルするメリットについて説明しておきます。

sassをコンパイルする環境を構築するだけであれば、「Live Sass Compiler」のようなVSCodeプラグインを使うだけでいいです。

しかし「Live Sass Compiler」と比較してgulpでsassをコンパイルすれば以下のようなメリットがあります。

  1. glob機能を使って@import を省略できる
  2. cssにベンダープレフィックスをつける
  3. 未使用のcssを削除してファイルの圧縮ができる
  4. cssファイルのminifyをしてファイルの圧縮ができる

この記事では1と2について説明します。

3と4については以下記事参考にしてください。

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

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

今回の記事ではLibSass(node-sass)を使った説明をしています。

LibSass2022/10/1でサポートが終了される予定とのことです。

最新の書き方に合わせる場合はDart Sassを使用してください。

参考サイト

Dart Sassでコンパイルしたい方はこちら

スポンサーリンク

ディレクトリ構成

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

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

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

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

スポンサーリンク

glob機能とはなにか

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

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

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

glob機能使用前(style.scss)

@import "./module/header";
@import "./module/footer";
@import "./module/main";

glob機能使用後(style.scss)

@import "./module/**";

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

スポンサーリンク

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

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

npm i -D gulp-sass

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

npm i -D gulp-sass

gulp-sass公式

npm i -D gulp-sass-glob

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

npm i -D gulp-sass-glob

gulp-sass-glob公式

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");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function compile(done) {
  src("./src/sass/**/*.scss")
    .pipe(plumber())                   // watch中にエラーが発生してもwatchが止まらないようにする
    .pipe(sassGlob())                  // glob機能を使って@import文を省略する
    .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-cli": "^2.3.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.1.0",
    "gulp-sass-glob": "^1.1.0"
  },


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

コマンドを実行しよう

gulpfile.jsの編集が完了したらコマンドを実行しましょう。

npx gulp compile

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

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

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

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

おわりに

以上gulp-sassを使ってsassのコンパイルをする方法について説明しました。

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

gulpを使ってsassのコンパイルができるようになればストレスフリーでweb制作を進めていくことができるのでぜひ参考にしてください。

コメント

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