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

# Gulp-Sass完全ガイド：
> 2025年でも現役のSass自動コンパイル技術

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

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

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

## 前回の記事のおさらい
https://qiita.com/RIKIgigasu/items/94d4147c0b3a70fb880b 

### 今回と前回の比較検証から
| 項目                           | 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の使い分けシーケンス図
```mermaid
sequenceDiagram
    participant You as あなた（開発者）
    participant Project as プロジェクト要件
    participant Team as チームメンバー
    participant Syntax as 記法選択

    You->>Project: 新規プロジェクト開始
    Project-->>You: 要件を提示
    You->>Syntax: 記法を検討
    
    alt SCSSを選択する場合
        Syntax->>You: CSS互換が必要
        Syntax->>You: 既存CSS資産活用
        Syntax->>You: チームがCSSに慣れている
        You->>Team: 「SCSSで進めよう」
    else SASSを選択する場合
        Syntax->>You: コードの簡潔さ重視
        Syntax->>You: インデント文化のチーム
        Syntax->>You: 既存.sass資産がある
        You->>Team: 「SASS記法で行こう」
    end
    
    Team-->>You: 了解！
    You->>Project: 開発開始
    Note right of You: どちらもgulp-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. パッケージインストール
```bash:terminal
npm install gulp gulp-sass sass --save-dev
```

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

### 2. gulpfile.js 基本設定
```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(一部抜粋のみ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/83736bb7-62d8-4d17-a716-b1a38cc4cf98.png)


### 3. 実行コマンド
```bash:terminal
npx gulp
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/e9d38c6e-54de-4eae-919a-f426094c8936.png)


---

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

```bash:terminal
npm install --save-dev gulp-plumber
```

### エラーハンドリング強化
```js: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を呼ぶことで実現できます。

## ディレクトリ構造例
```bash:tree
project/
├── src/
│   └── scss/
│       ├── main.scss
│       └── components/
├── dist/
│   └── css/
└── gulpfile.js

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/8010b4de-9e4c-4b28-95e9-cf6fed2d8c6e.png)


C:\work\scss\dist\css\Roulette.css(一部抜粋のみ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/cf92dd1a-96b8-4616-b98e-c8d2804abf47.png)
> 自動生成された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と併用するケースもある                             |




## 技術選定のポイント
```mermaid
graph TD
  A[プロジェクト規模] -->|小規模| B[🔧 Gulp-Sass]
  A -->|大規模| C[Vite/Webpack]
  B --> D{やりたいこと}
  D -->|シンプルでOK| E[Gulpだけで十分]
  D -->|追加機能も使いたい| F[プラグインも活用]

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

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

```mermaid
sequenceDiagram
    participant Dev as あなた（開発者）
    participant Gulp as Gulp（自動ビルドツール）
    participant FS as パソコンのファイル管理
    participant Browser as Webブラウザ

    Dev->>Gulp: gulpfile.jsにタスクを定義
    Dev->>FS: SCSSやJSファイルを編集・保存
    Gulp->>FS: ファイルの変更を監視
    FS-->>Gulp: 変更通知
    Gulp->>Gulp: SCSSをCSSに変換、JSを結合・圧縮
    Gulp->>FS: 変換後のCSSやJSを出力
    Browser->>FS: HTMLでCSS/JSを読み込む
    Browser->>Browser: jQueryやJSが動作
```
### わかりやすい登場人物例

| 登場人物                 | 役割・説明                                                        |
|--------------------------|-------------------------------------------------------------------|
| あなた（開発者）         | コーディングやビルドの指示を出す人                                |
| 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から抜粋)
https://kenriki.static.jp/sp/Roulette.html