Gulp-Sassについて検証してみた

Gulp-Sass完全ガイド：

2025年でも現役のSass自動コンパイル技術

目的

CSSをSCSSの概念で書いて、汎用的に作成する

概要

gulp-sass は、node.js環境のタスクランナーであるGulp上で動作する、Sass/SCSSコンパイラ用のプラグインです。
これを導入することで、CSSをSCSSの構文と設計思想に基づいて、より汎用的かつ効率的に記述できるようになる。
本記事では、Gulp-Sassの導入によるメリットと、プロジェクトごとに最適な選定方法について整理し、あわせて導入時のセットアップ手順をわかりやすく解説する。

• 「コードで設定」：設定ファイルよりJavaScriptコードで処理を記述
• ストリーム処理：ファイルをメモリ上で効率的に変換
• 豊富なエコシステム：4,000以上のプラグインと連携可能

前回の記事のおさらい

今回と前回の比較検証から

項目	Dart Sass CLI (npx sass --watch)	Gulp-Sass（Gulpプラグイン）
導入の手軽さ	◎	△（gulpfile.jsが必要）
Sass/SCSS→CSS変換	◎	◎
複数処理の自動化	×	◎（JS結合/圧縮、画像圧縮など）
圧縮・最適化	△（CLIオプションで可）	◎（他プラグインと連携可）
ベンダープレフィックス	×	◎（PostCSS併用で可）
開発フローへの組み込みやすさ	◎	◎
学習コスト	低	やや高い
拡張性	低	高い

背景

2025年現在も**最新版v6.0.1（2024年11月リリース）**がメンテナンスされており、小～中規模プロジェクトで広く利用されています。

Sass（サス）とは

Sassは「Syntactically Awesome Style Sheets」の略で、CSSをより効率的に書くための**スタイルシート拡張言語（プリプロセッサ）**です。
主な特徴は、変数・ネスト・ミックスイン・継承など、CSSにはない便利な機能を提供することです

SassとSCSSの違い

Sassには2つの記法があります。

• SASS記法（.sass） … インデントベースの簡潔な構文
• SCSS記法（.scss） … CSSに近い構文

主な違い（比較表）

特徴	SCSS（.scss）	SASS（.sass）
構文	CSSに似ている。波括弧 {} とセミコロン ; を使う	インデントベース。波括弧やセミコロン不要
可読性	CSSと同じなので初心者にも分かりやすい	簡潔だがインデントミスに注意
拡張子	.scss	.sass
互換性	CSSと完全互換。既存CSSをそのまま使える	CSSとは構文が異なる
普及度	現在はこちらが主流	限定的な利用

SCSSとSASSの使い分けシーケンス図

主な判断基準（表比較）

判断要素	SCSSを推奨	SASSを推奨
既存資産	CSSファイルがある	.sassファイルがある
チームスキル	CSSに慣れているメンバーが多い	Python/Ruby経験者が多い
コードスタイル	波括弧・セミコロン文化	インデント文化
学習コスト	低い（CSSとほぼ同じ）	中（新しい構文の習得必要）
エディタサポート	標準的	プラグイン必要な場合あり

---

技術的な最新性と適切性

2025年時点でのポジション

項目	評価
最新バージョン	v6.0.1 (2024年11月リリース)
Sassコンパイラ	Dart Sassを推奨（Node Sass非推奨）
主流プロジェクト	静的サイト・レガシーシステム維持
代替ツール	Vite/Webpack（大規模SPA向け）

採用が適するケース

• 既存Gulpプロジェクトの維持
• 軽量な静的サイト制作
• カスタムビルドプロセスが必要な場合

---

セットアップ手順（2025年版）

前提

node.jsがインストールされていること

1. パッケージインストール

terminal

npm install gulp gulp-sass sass --save-dev

• sass（Dart Sass）が必須依存パッケージ

2. gulpfile.js 基本設定

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass')); // Dart Sass指定

// SCSSコンパイルタスク
function compileSass() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({
style: 'compressed' // 出力形式（旧outputStyle）
}).on('error', sass.logError)) // エラー時もプロセス継続
.pipe(gulp.dest('dist/css'));
}

// ファイル監視タスク
function watchFiles() {
gulp.watch('src/scss/**/*.scss', compileSass);
}

// デフォルトタスク定義
exports.default = gulp.series(compileSass, watchFiles);

C:\work\scss\src\scss\Roulette.scss(一部抜粋のみ)

3. 実行コマンド

terminal

npx gulp

---

よくある設定カスタマイズ

terminal

npm install --save-dev gulp-plumber

エラーハンドリング強化

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const plumber = require('gulp-plumber');

// エラーハンドラ関数
function onError(err) {
  console.error('❌ SASS ERROR:', err.message);
  this.emit('end'); // タスクを止めずに次の処理へ
}

// SCSS/SASSコンパイルタスク
function compileSass() {
  return gulp.src('src/scss/**/*.+(scss|sass)')
    .pipe(plumber({ errorHandler: onError }))
    .pipe(sass({ style: 'compressed' }))
    .pipe(gulp.dest('dist/css'));
}

function watchFiles() {
  gulp.watch('src/scss/**/*.+(scss|sass)', compileSass);
}

exports.default = gulp.series(compileSass, watchFiles);

ポイント解説

.pipe()の最初に挟むことで、以降の処理で発生したエラーをキャッチし、gulpのwatchタスクがクラッシュするのを防ぎます。

errorHandlerとして渡した関数（onError）で、エラー内容をコンソールに出力し、this.emit('end')でストリームを正常終了させます。

plumberなしで.on('error', ...)だけだと、複数ファイルのビルド時に一部しか処理されない・watchが止まる等の問題が起きやすいです。

さらに便利に（通知など）
gulp-notifyと組み合わせれば、エラー時にデスクトップ通知もできます。

plumberのerrorHandler内でnotify.onErrorを呼ぶことで実現できます。

ディレクトリ構造例

tree

project/
├── src/
│   └── scss/
│       ├── main.scss
│       └── components/
├── dist/
│   └── css/
└── gulpfile.js

C:\work\scss\dist\css\Roulette.css(一部抜粋のみ)

自動生成されたCSSファイルです。

webpackとの比較検証

項目	Gulp（タスクランナー）	Webpack（モジュールバンドラー）
主な役割	何でも自動化（Sass変換、画像圧縮、JS圧縮、ファイルコピー、テスト等）	JS/CSS/画像などの依存関係を解決して1つのバンドルにまとめる（＋トランスパイル等）
設定スタイル	gulpfile.jsで「どうやって処理するか」をプログラムで記述	webpack.config.jsで「何をどうまとめるか」を宣言的に記述
柔軟性	非常に高い。独自の処理も自由自在	バンドルやトランスパイルなどWeb向けの処理に特化
拡張性	1000以上のプラグイン。独自処理も書きやすい	loaderやpluginで拡張。フロントエンドの主流機能はほぼ網羅
学習コスト	低め（JSが書ければOK）	やや高め。設定ファイルが複雑になりやすい
得意なプロジェクト	静的サイト、単純な自動化、複数種類のファイル操作が必要な案件	SPA/React/VueなどモダンJSフレームワーク、JS/TS/SCSSの依存関係が複雑な大規模Webアプリ
代表的な自動ビルド例	Sass→CSS変換、JS圧縮、画像圧縮、HTMLコピー	JS/TS/SCSS/画像など全部まとめてバンドル、HMR（ホットリロード）、トランスパイル、コード分割等
併用可否	可能（GulpからWebpackを呼ぶこともできる）	Webpack単体でほとんどのことができるが、Gulpと併用するケースもある

技術選定のポイント

jQueryを使っている現場でgulpfileは使えるか？

jQueryを使っている現場でもgulpfile.jsは問題なく使えます。
gulpは「Sass/SCSSの自動コンパイル」「JSファイルの結合・圧縮」など、フロントエンドのビルド作業を自動化するツールであり、jQueryの有無に関係なく利用できます

わかりやすい登場人物例

登場人物	役割・説明
あなた（開発者）	コーディングやビルドの指示を出す人
Gulp（自動ビルドツール）	SCSSやJSの自動変換・圧縮などをしてくれるプログラム
パソコンのファイル管理	ファイルの保存・更新・出力を担当
Webブラウザ	サイトを表示し、jQueryなどの動作を確認する場所

その他

Q. 2025年でもGulp-Sassは使うべき？

A. プロジェクト規模で判断
◯：軽量サイト・既存Gulpプロジェクト維持
✖：大規模SPA・モダンフレームワーク利用時（Vite/Webpack推奨）

Q. Node SassとDart Sassの違いは？

A. Dart Sassが公式推奨
Node Sassは非推奨
Dart Sassが最新機能をサポート

今回作成したSCSSやCSSの元にした文献(MySiteから抜粋)