【保存版】Web制作がラクになる Gulp の使い方｜Sass コンパイル・自動リロード・圧縮まで

こんにちは、mokoichiです。

📘 1. Gulp とは？Web制作を効率化する自動化ツール

まずは、Gulp がどんなツールなのかを簡単に整理しておきます。

■ Gulp は「作業を自動化するためのツール」

Gulp は、JavaScript（Node.js）で動く タスクランナー と呼ばれるツールです。

Web制作では、次のような作業が頻繁に発生します。

• Sass を CSS にコンパイルする
• ベンダープレフィックスを付ける
• CSS のプロパティを並び替える
• メディアクエリをまとめる
• ブラウザを自動リロードする
• CSS や JavaScript を圧縮する
• HTML を整形する

これらを毎回手作業で行うのは、時間もかかるしミスも起きやすいです。

Gulp を使うと、これらの作業を 1つのコマンドでまとめて実行 できます。

■ Gulp の特徴（初心者にも分かりやすく）

• 処理の流れがシンプル　→　「どのファイルを読む → どう加工する → どこに出力する」という流れで書くだけ。
• プラグインが豊富　→　Sass、Autoprefixer、BrowserSync、圧縮など、ほぼ何でも自動化できます。
• 学習コストが低い　→　gulpfile.js に JavaScript を少し書くだけで動くので、初心者でも扱いやすいです。
• プロジェクト間で使い回せる　→　一度作った gulpfile.js を別の案件にコピーして使えるのも大きなメリットです。

■ Gulp を使うと何がラクになる？

• Sass を保存するだけで自動コンパイル
• CSS が自動で整形される
• ブラウザが自動リロードされる
• 本番用の圧縮ファイルが自動生成される
• HTML も自動で整形される

つまり、「人がやらなくていい作業」を全部 Gulp に任せられる ようになります。

レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額693円(税込)から利用可能。まずは無料お試し10日間。

www.xserver.ne.jp

📘 2. Gulp を使うための準備（Node.js インストール）

Gulp を使うためには、まず Node.js（ノードジェイエス） をインストールする必要があります。 Gulp は Node.js 上で動くツールなので、ここが最初のステップになります。

■ Node.js をインストールする

Node.js は公式サイトから無料でダウンロードできます。

👉 Node.js 公式サイト

サイトを開くと、推奨バージョン（LTS）が表示されているので、そのままダウンロードしてインストールします。

■ インストールできたか確認する

インストールが完了したら、VS Code か Mac のターミナルを開いて、次のコマンドを入力します。

node -v

バージョン（例：v24.14.1）(2026.04時点)が表示されれば OK です。 続いて npm（Node.js に付属するパッケージ管理ツール）も確認します。

npm -v

こちらもバージョンが表示されれば、Node.js の準備は完了です。

■ プロジェクト用のフォルダを作成する

次に、Gulp を使うための作業フォルダを作ります。

• 例：demo や gulp-test など、好きな名前で OK
• 作成したフォルダを VS Code にドラッグ＆ドロップ して開きます

VS Code の上部メニューから

「ターミナル」→「新しいターミナル」 をクリックすると、フォルダ直下でターミナルが開きます。

■ package.json を作成する（npm init）

Gulp を使うには、プロジェクトに package.json が必要です。 ターミナルで次のコマンドを実行します。

npm init -y

これで、プロジェクトの設定ファイルである package.json が自動生成されます。

■ Gulp をインストールする

最後に、Gulp 本体をインストールします。

npm install --save-dev gulp

●　-save-dev は「開発用のツールとしてインストールする」という意味です。 インストールが完了すると、package.json に以下のように Gulp が追加されます。

"devDependencies": {
  "gulp": "^4.x.x"
}

これで、Gulp を使う準備が整いました。

📘 3. ① プロジェクトフォルダを作成する

Gulp を使った開発は、まず 作業用のフォルダを用意するところから 始まります。 ここが “プロジェクトの土台” になるので、シンプルに整えておくと後の作業がスムーズです。

■ 新しいフォルダを作成する

まずは、Gulp を使いたいプロジェクト用にフォルダを作ります。

• 例：demo
• 例：gulp-test
• 例：my-site

フォルダ名は自由ですが、英数字のみ にしておくとトラブルが起きにくいです。

■ VS Code でフォルダを開く

作成したフォルダを VS Code にドラッグ＆ドロップ すると、そのフォルダがプロジェクトとして開きます。 VS Code の左側に、まだ何も入っていないフォルダ構成が表示されていれば OK です。

■ ターミナルをフォルダ直下で開く

Gulp のコマンドは、VS Code のターミナルから実行します。 上部メニューから 「ターミナル」 → 「新しいターミナル」 をクリックすると、プロジェクト直下でターミナルが開きます。 ターミナルのパスが次のようになっていれば正しく開けています。

~/your-folder-name %

ここから、npm の初期化や Gulp のインストールを進めていきます。

■ このステップでつまずきやすいポイント

初心者の方がよく迷うポイントも補足しておきます。

• フォルダを VS Code で開かずにターミナルだけ開いてしまう

→ コマンドが別の場所で実行されてしまうので注意

• フォルダ名に日本語を使う

→ Gulp や Node.js の処理でエラーが出ることがあるため避けるのが安全

• デスクトップやダウンロードフォルダで作業してしまう

→ プロジェクト管理がしづらくなるので、専用フォルダを作るのがおすすめです。

📘 4. ② npm init で package.json を作成する

Gulp を使うためには、プロジェクト内に package.json（パッケージ設定ファイル） が必要です。 これは「このプロジェクトではどんなツールを使うのか」を管理する、とても重要なファイルです。

■ npm init -y で package.json を自動生成する

VS Code のターミナルがプロジェクトフォルダ直下で開いていることを確認したら、次のコマンドを入力します。

npm init -y

-y を付けることで、質問に答える必要がなく、デフォルト設定の package.json が一瞬で作成されます。 実行後、フォルダ内に次のようなファイルが生成されます。

package.json

■ package.json が作成されると何ができるのか？

このファイルがあることで、次のようなことが可能になります。

• Gulp やプラグインを「開発用ツール」として管理できる
• npm install で必要なツールをまとめて再インストールできる
• 別のプロジェクトにコピーして使い回せる

つまり、Gulp を使うための“プロジェクトの設計図” のような役割を持っています。

■ よくあるつまずきポイント

初心者の方が迷いやすいポイントも整理しておきます。

• ターミナルの場所が違うと package.json が別の場所に作られてしまう

→ 必ず VS Code でプロジェクトフォルダを開いてから実行するのが安全です。

• package.json を手動で作ろうとする

→ 基本的に手動で作る必要はありません。npm init -y で十分です。

■ 次のステップ：Gulp をインストールする

package.json ができたら、いよいよ Gulp 本体をインストールします。 この次の章で、実際に Gulp を導入していきます。

📘 5. ③ Gulp をインストールする

package.json が作成できたら、いよいよ Gulp 本体をプロジェクトに導入 します。 ここから、実際に自動化タスクを作れる環境が整っていきます。

■ Gulp をインストールするコマンド

ターミナルで次のコマンドを実行します。

npm install --save-dev gulp

–save-dev は「開発用ツールとしてインストールする」という意味で、 Gulp のようなビルドツールは 本番環境では使わないため devDependencies に入れるのが正解 です。

■ インストールが成功するとどうなる？

インストールが完了すると、package.json に次のような記述が追加されます。

また、プロジェクト内に node_modules フォルダが生成され、 その中に Gulp 本体と関連ファイルがインストールされます。

"devDependencies": {
  "gulp": "^4.x.x"
}

■ Gulp のインストールでよくある質問

● Q. グローバルインストール（npm install -g gulp）は必要？ → 不要です。

昔の Gulp（v3 以前）はグローバルインストールが必要でしたが、 現在の Gulp 4 は ローカルインストールだけで動作 します。 あなたの手順は最新の正しい方法です。

● Q. インストール後に何か設定は必要？ → 特にありません。

このあと作成する gulpfile.js にタスクを書けば、すぐに Gulp を使い始められます。

■ ここまでで準備は完了

• Node.js のインストール
• package.json の作成
• Gulp の導入

これで、Gulp を動かすための “土台” がすべて整いました。

次のステップでは、いよいよ 最初の Gulp タスクを作って動かしてみる ところに進みます。

📘 6. 最初のタスクを作って Gulp を動かしてみる

Gulp のインストールが完了したら、次は 実際に Gulp を動かしてみるステップ に進みます。 ここでは、もっともシンプルな「Hello Gulp」を表示するタスクを作り、Gulp が正しく動作するか確認します。

■ 最初のタスクを書く

gulpfile.js に、次のコードを入力します。

const gulp = require('gulp');

function test(done) {
  console.log("Hello Gulp");
  done();
}

exports.test = test;

● このコードの意味

• const gulp = require(‘gulp’);

→ Gulp 本体を読み込む

• function test()

→ 「test」という名前のタスクを定義

• console.log(“Hello Gulp”);

→ タスクが実行されたときに表示されるメッセージ

• exports.test = test;

→ ターミナルから npx gulp test で呼び出せるようにする

■ タスクを実行してみる

ターミナルで次のコマンドを入力します。

npx gulp test

実行すると、次のようなログが表示されます。

[06:51:11] Using gulpfile ~/your-folder/gulpfile.js
[06:51:11] Starting 'test'...
Hello Gulp
[06:51:11] Finished 'test' after 533 μs

✔ 「Hello Gulp」が表示されれば成功

これで、Gulp が正しく動作していることが確認できました。

■ ここまででできるようになったこと

• Gulp のタスクを自分で作成できた
• ターミナルからタスクを実行できた
• gulpfile.js が正しく読み込まれていることを確認できた

ここまで進めば、次のステップで Sass をコンパイルするタスク を作る準備が整っています。

📘 7. Sass をコンパイルするタスクを作る

ここから、いよいよ Gulp を使って Sass（SCSS）を CSS に変換するタスク を作っていきます。 Web制作では Sass を使う場面が多いため、このステップが Gulp 活用の中心になります。

■ Sass をコンパイルするために必要なパッケージをインストール

まずは、Sass をコンパイルするためのプラグインをインストールします。 ターミナルで次のコマンドを実行します。

npm install --save-dev gulp-sass sass

ここでポイントは、

• gulp-sass … Gulp で Sass を扱うためのプラグイン
• sass … 実際に Sass をコンパイルするエンジン（Dart Sass）

という役割分担になっていることです。

■ gulpfile.js に Sass コンパイルタスクを書く

次に、gulpfile.js に Sass を CSS に変換するタスクを追加します

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

function compileSass() {
  return gulp.src("./src/style.scss")   // ① 読み込むファイル
    .pipe(sass())                       // ② Sass → CSS に変換
    .pipe(gulp.dest("./public"));       // ③ 出力先
}

exports.compileSass = compileSass;

■ このコードの流れを分かりやすく解説

Gulp のタスクは 「読む → 加工する → 書き出す」 の流れで構成されています。

① 読み込むファイルを指定する（src）

gulp.src("./src/style.scss")

ここで、どの Sass ファイルを処理するかを指定します。

② Sass を CSS に変換する（pipe）

.pipe(sass())

Sass コンパイラに通して CSS に変換します。

③ CSS を出力する（dest）

.pipe(gulp.dest("./public"))

変換された CSS を public フォルダに書き出します。

■ 実際にコンパイルしてみる

ターミナルで次のコマンドを実行します。

npx gulp compileSass

成功すると、public フォルダに style.css が生成されます。

■ style.scss に内容を書いて試してみる

例として、src/style.scss に次のようなコードを書いてみます。

body {
  color: red;
}

その後、再度コンパイルすると…

public/style.css

が生成され、CSS に変換されていることが確認できます。

■ ここまででできるようになったこと

• Sass を Gulp でコンパイルできるようになった
• gulpfile.js にタスクを追加する流れが理解できた
• Gulp の基本的な「パイプライン処理」が分かった

次のステップでは、さらに便利な Autoprefixer（ベンダープレフィックス自動付与） を追加していきます。

📘 8. Autoprefixer でベンダープレフィックスを自動付与する

Sass をコンパイルできるようになったら、次は ベンダープレフィックス（-webkit-, -ms-, -moz- など）を自動で付与する仕組み を追加していきます。 手動でプレフィックスを付けるのは大変ですし、ブラウザ対応状況も変わるため、 Autoprefixer を使って自動化するのが最も確実で効率的 です。

■ Autoprefixer を使うために必要なパッケージをインストール

ターミナルで次のコマンドを実行します。

npm install --save-dev postcss gulp-postcss autoprefixer

それぞれの役割は次のとおりです。

• postcss

CSS を加工するための基盤となるツール

• gulp-postcss

Gulp で PostCSS を使うためのプラグイン

• autoprefixer

ベンダープレフィックスを自動で付与する本体

■ gulpfile.js に Autoprefixer を追加する

Sass のコンパイルタスクに、Autoprefixer を組み込みます。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

function compileSass() {
  return gulp.src("./src/style.scss")
    .pipe(sass())                         // Sass → CSS
    .pipe(postcss([autoprefixer()]))      // プレフィックス付与
    .pipe(gulp.dest("./public"));
}

exports.compileSass = compileSass;

■ Autoprefixer がどんな処理をしてくれるのか？

例えば、次のような CSS があったとします。

display: flex;

Autoprefixer を通すと、ブラウザ対応状況に応じて自動でこうなります。

display: -webkit-box;
display: -ms-flexbox;
display: flex;

自分で調べて書く必要がなくなるため、 書き忘れや対応漏れを防げる のが大きなメリットです。

■ 実行して確認する

ターミナルで次のコマンドを実行します。

npx gulp compileSass

public/style.css を開くと、Autoprefixer によって必要なプレフィックスが自動で付与されているのが確認できます。

■ Autoprefixer を使うメリット

• ブラウザ対応を自動で最適化してくれる
• 手動でプレフィックスを書く必要がなくなる
• コードの書き忘れやミスを防げる
• CSS がより安全に動作するようになる

Web制作ではほぼ必須のツールなので、Gulp に組み込んでおくと非常に便利です。

📘 9. CSS のプロパティを並び替える（css-declaration-sorter）

Sass をコンパイルし、Autoprefixer でプレフィックスを付けられるようになったら、 次は CSS のプロパティを自動で並び替える処理 を追加していきます。 CSS の記述順がバラバラだと、後から読み返したときに分かりづらくなったり、 チーム開発ではコードの統一感が失われてしまいます。 そこで役立つのが css-declaration-sorter です。

■ css-declaration-sorter をインストールする

ターミナルで次のコマンドを実行します。

npm install --save-dev css-declaration-sorter

これで、CSS のプロパティを自動で並び替えるためのプラグインが使えるようになります。

Autoprefixer と同じく、PostCSS の中で処理を追加します。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssDeclarationSorter = require("css-declaration-sorter");

function compileSass() {
  return gulp.src("./src/style.scss")
    .pipe(sass()) 
    .pipe(postcss([
      autoprefixer(),
      cssDeclarationSorter({ order: "alphabetical" })  // ← 追加
    ]))
    .pipe(gulp.dest("./public"));
}

exports.compileSass = compileSass;

■ 並び替えのルール（order）の種類

css-declaration-sorter では、プロパティの並び順を選べます。

• alphabetical（アルファベット順）

→ 最も一般的で、読みやすく管理しやすい

• smacss

→ SMACSS のルールに沿った順番

• concentric-css

→ ボックスモデルの外側から内側へ並べる

初心者の方には alphabetical（アルファベット順） が分かりやすくておすすめです。

■ 実際の変換例

例えば、次のように順番がバラバラな CSS があったとします。

.box {
  color: red;
  display: flex;
  border: 1px solid #000;
}

alphabetical を使うと、次のように並び替えられます。

.box {
  border: 1px solid #000;
  color: red;
  display: flex;
}

このように、自動で整ったコードにしてくれる ため、 読みやすさ・保守性が大きく向上します。

■ ここまででできるようになったこと

• Sass → CSS の変換
• プレフィックスの自動付与
• CSS のプロパティを自動で整形

CSS の品質が一気に上がり、チーム開発でも安心して使える状態になってきました。

📘 10. メディアクエリをまとめる（gulp-merge-media-queries）

Sass をコンパイルし、Autoprefixer や CSS 並び替えまで自動化できたら、 次は CSS のメディアクエリをまとめて最適化する処理 を追加していきます。 CSS が増えてくると、同じメディアクエリがファイルのあちこちに散らばり、 読みづらくなったり、ファイルサイズが無駄に大きくなることがあります。 そこで役立つのが gulp-merge-media-queries（略称：mmq） です。

■ gulp-merge-media-queries をインストールする

ターミナルで次のコマンドを実行します。

npm install --save-dev gulp-merge-media-queries

インストールが完了すると、package.json の devDependencies に次のように追加されます。

"gulp-merge-media-queries": "^0.2.1"

■ gulpfile.js にメディアクエリ統合処理を追加する

次に、gulpfile.js に mmq を読み込み、PostCSS の後に処理を追加します。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssDeclarationSorter = require("css-declaration-sorter");
const mmq = require("gulp-merge-media-queries");

function compileSass() {
  return gulp.src("./src/style.scss")
    .pipe(sass())
    .pipe(postcss([
      autoprefixer(),
      cssDeclarationSorter({ order: "alphabetical" })
    ]))
    .pipe(mmq())                         // ← メディアクエリをまとめる
    .pipe(gulp.dest("./public"));
}

exports.compileSass = compileSass;

■ メディアクエリがどうまとめられるのか？

例えば、次のようにバラバラに書かれた CSS があるとします。

.box {
  color: red;
}

@media (max-width: 768px) {
  .box {
    color: blue;
  }
}

.header {
  background: #fff;
}

@media (max-width: 768px) {
  .header {
    background: #eee;
  }
}

mmq を通すと、同じメディアクエリが 1つにまとめられます。

.box {
  color: red;
}

.header {
  background: #fff;
}

@media (max-width: 768px) {
  .box {
    color: blue;
  }
  .header {
    background: #eee;
  }
}

✔ メリット

• CSS が読みやすくなる
• ファイルサイズが軽くなる
• メンテナンス性が向上する

特にレスポンシブ対応が多いサイトでは効果が大きいです。

■ 実行して確認する

ターミナルで次のコマンドを実行します。

npx gulp compileSass

public/style.css を開くと、メディアクエリがひとつにまとめられているのが確認できます。

■ ここまででできるようになったこと

• Sass → CSS の変換
• プレフィックス自動付与
• CSS の並び替え
• メディアクエリの統合

CSS の品質がさらに向上し、実務レベルの自動化環境が整ってきました。

📘 11. 複数の Sass ファイルをまとめてコンパイルする方法

ここまでの設定では、style.scss のように 特定の 1 ファイルだけ をコンパイルしていました。

しかし実際の制作では、次のように複数の Sass ファイルを使うことが多いと思います。

• style.scss
• about.scss
• contact.scss
• components/_button.scss
• layout/_header.scss

そこで、Gulp で 複数ファイルをまとめてコンパイルする方法 を追加していきます。

■ 1ファイル → 複数ファイルに対応させる

まず、gulp.src の指定を変更します。

● 変更前（1ファイルのみ）

gulp.src("./src/style.scss")

● 変更後（src フォルダ内のすべての .scss）

gulp.src("./src/*.scss")

これで、src フォルダ直下にある .scss ファイルがすべてコンパイル対象になります。

■ 実際の gulpfile.js（複数ファイル対応版）

function compileSass() {
  return gulp.src("./src/*.scss")
    .pipe(sass())
    .pipe(postcss([
      autoprefixer(),
      cssDeclarationSorter({ order: "alphabetical" })
    ]))
    .pipe(mmq())
    .pipe(gulp.dest("./public"));
}

■ about.scss など別ファイルも自動で CSS 化される

例えば、src フォルダに次のようなファイルがあるとします。

• style.scss
• about.scss

この状態で次のコマンドを実行すると…

npx gulp compileSass

public フォルダには次のように出力されます。

• style.css
• about.css

つまり、src 内のすべての Sass ファイルが個別の CSS として生成される ようになります。

■ about.scss など別ファイルも自動で CSS 化される

例えば、src フォルダに次のようなファイルがあるとします。

• style.scss
• about.scss

この状態で次のコマンドを実行すると…

npx gulp compileSass

public フォルダには次のように出力されます。

• style.css
• about.css

つまり、src 内のすべての Sass ファイルが個別の CSS として生成される ようになります。

■ サブフォルダ（階層の深いファイル）も対象にしたい場合

制作が進むと、Sass をフォルダ分けすることが増えます。

例：

src/
  pages/
    about.scss
    contact.scss
  components/
    _button.scss
  style.scss

このような構成の場合は、次のように ** を使います。

gulp.src("./src/**/*.scss")

✔ **/*.scss の意味

• src フォルダ
• その下のすべての階層
• すべての .scss ファイル

を対象にする、という指定です。

■ 実際の gulpfile.js（階層すべて対応版）

function compileSass() {
  return gulp.src("./src/**/*.scss")
    .pipe(sass())
    .pipe(postcss([
      autoprefixer(),
      cssDeclarationSorter({ order: "alphabetical" })
    ]))
    .pipe(mmq())
    .pipe(gulp.dest("./public"));
}

■ ここまででできるようになったこと

• 複数の Sass ファイルをまとめてコンパイルできる
• 階層の深い Sass ファイルも自動で処理できる
• ページごとの CSS を自動生成できる

これで、実務レベルの Sass 管理がかなりラクになります。

📘 12. ファイルの変更を監視して自動コンパイルする（watch）

ここまでで、Sass のコンパイルや CSS の整形が自動化できるようになりました。 次のステップは、ファイルを保存した瞬間に自動でコンパイルが走る仕組み を作ることです。 毎回 npx gulp compileSass を手動で実行するのは手間なので、 Gulp の watch 機能 を使って “保存したら即コンパイル” を実現します。

■ watch タスクを追加する

gulpfile.js に、次のような watch タスクを追加します。

function watchFiles() {
  gulp.watch("./src/**/*.scss", compileSass);
}

exports.watch = watchFiles;

■ このコードの意味

● gulp.watch(“監視するファイル”, 実行するタスク)

gulp.watch("./src/**/*.scss", compileSass);

• ./src/**/*.scss

→ src フォルダ以下のすべての Sass ファイルを監視

• compileSass

→ 変更があったら Sass をコンパイルするタスクを実行

つまり、Sass ファイルを保存するたびに自動で CSS が生成される ようになります。

■ watch タスクを実行する

ターミナルで次のコマンドを実行します。

npx gulp watch

これで監視がスタートします。

✔ 監視中はターミナルを閉じない

ターミナルを閉じると監視が止まるため、 作業中はターミナルを開いたままにしておきます。

■ 実際に動作を確認してみる

1. src/style.scss を開く
2. 何か変更して保存する
3. ターミナルに次のようなログが出る

File changed: src/style.scss
Starting 'compileSass'...
Finished 'compileSass'

1. public/style.css が自動で更新される

これで、保存するだけで Sass → CSS の変換が自動化 されました。

■ watch を使うメリット

• 手動でコマンドを打つ必要がなくなる
• 作業スピードが大幅にアップ
• コーディングに集中できる
• ミスやコンパイル忘れがなくなる

Gulp を使う大きなメリットのひとつが、この “自動コンパイル” です。

■ ここまででできるようになったこと

• Sass のコンパイル
• CSS の整形（プレフィックス・並び替え・メディアクエリ統合）
• 複数ファイルのコンパイル
• 保存したら自動でコンパイルが走る環境

制作効率が一気に上がるポイントまで来ました。

📘 13. BrowserSync でブラウザ自動リロードを実現する

ここまでで、Sass のコンパイルや CSS の整形、watch による自動コンパイルができるようになりました。 次のステップは、ブラウザを自動でリロードする仕組み を追加することです。 ファイルを保存するたびに手動でブラウザを更新するのは手間なので、 BrowserSync を使って “保存したら即ブラウザが更新される” 開発環境を作ります。

■ BrowserSync をインストールする

ターミナルで次のコマンドを実行します。

npm install --save-dev browser-sync

BrowserSync は、ローカルサーバーを立ち上げて、 ファイルの変更を検知するとブラウザを自動リロードしてくれる便利なツールです。

■ gulpfile.js に BrowserSync を追加する

まず、BrowserSync を読み込みます。

const browserSync = require("browser-sync").create();

次に、BrowserSync を起動するタスクを作成します。

function browserSyncFunc(done) {
  browserSync.init({
    server: {
      baseDir: "./public"   // 公開フォルダを指定
    }
  });
  done();
}

■ Sass コンパイル後にブラウザをリロードする

compileSass の最後に .pipe(browserSync.stream()) を追加します。

function compileSass() {
  return gulp.src("./src/**/*.scss")
    .pipe(sass())
    .pipe(postcss([
      autoprefixer(),
      cssDeclarationSorter({ order: "alphabetical" })
    ]))
    .pipe(mmq())
    .pipe(gulp.dest("./public"))
    .pipe(browserSync.stream());   // ← 追加：CSS を反映して自動リロード
}

CSS の変更は stream() で即時反映されるため、ページ全体のリロードが不要になります。

■ watch タスクに BrowserSync を組み込む

watch タスクを次のように書き換えます。

function watchFiles() {
  gulp.watch("./src/**/*.scss", compileSass);
  gulp.watch("./public/*.html").on("change", browserSync.reload);
}

● これでできること

• Sass を保存 → CSS が自動コンパイル → ブラウザに即反映
• HTML を保存 → ブラウザが自動リロード

■ 最終的な Gulp タスク（BrowserSync 付き）

ここまでの内容をまとめると、次のようになります。

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

これで、次のコマンドを実行するだけで自動化環境がすべて起動します。

npx gulp

■ 実際に動かしてみる

1. px gulp を実行
2. ブラウザが自動で立ち上がる
3. Sass を保存すると CSS が即反映
4. HTML を保存するとブラウザが自動リロード

✔ コーディングに集中できる快適な環境が完成

• 手動リロード不要
• コンパイル忘れなし
• 変更がすぐ反映される

制作スピードが大幅にアップします。

■ ここまででできるようになったこと

• Sass の自動コンパイル
• CSS の整形（プレフィックス・並び替え・メディアクエリ統合）
• watch による自動コンパイル
• BrowserSync によるブラウザ自動リロード

これで、実務レベルのフロントエンド開発環境がほぼ完成しました。

📘 14. CSS・JavaScript の圧縮を自動化する

ここまでで、Sass のコンパイル・整形・自動リロードまで実現できました。

次のステップは、本番公開用に CSS や JavaScript を圧縮（minify）する処理 を追加することです。

圧縮を行うことで、

• ファイルサイズが小さくなる
• ページ表示速度が向上する
• SEO にも良い影響がある

といったメリットがあります。

■ CSS を圧縮する（gulp-clean-css）

まずは CSS の圧縮から追加します。

● パッケージをインストール

npm install --save-dev gulp-clean-css

● gulpfile.js に処理を追加

const cleanCSS = require("gulp-clean-css");

Sass コンパイル後に .pipe(cleanCSS()) を追加します。

function compileSass() {
  return gulp.src("./src/**/*.scss")
    .pipe(sass())
    .pipe(postcss([
      autoprefixer(),
      cssDeclarationSorter({ order: "alphabetical" })
    ]))
    .pipe(mmq())
    .pipe(cleanCSS())                 // ← CSS を圧縮
    .pipe(gulp.dest("./public"))
    .pipe(browserSync.stream());
}

✔ 圧縮されるとどうなる？

例えば、次のような CSS が…

.box {
  color: red;
  padding: 20px;
}

圧縮後はこうなります。

.box{color:red;padding:20px}

余計なスペースや改行が削除され、ファイルサイズが小さくなります。

■ JavaScript を圧縮する（gulp-uglify）

次に、JavaScript の圧縮も自動化します。

● パッケージをインストール

npm install --save-dev gulp-uglify

● gulpfile.js に読み込みを追加

const uglify = require("gulp-uglify");

● JS 圧縮タスクを作成

function minifyJs() {
  return gulp.src("./src/js/*.js")
    .pipe(uglify())                   // JS を圧縮
    .pipe(gulp.dest("./public/js"))
    .pipe(browserSync.stream());
}

exports.minifyJs = minifyJs;

■ watch に JS の監視も追加する

function watchFiles() {
  gulp.watch("./src/**/*.scss", compileSass);
  gulp.watch("./src/js/*.js", minifyJs);        // ← JS の変更を監視
  gulp.watch("./public/*.html").on("change", browserSync.reload);
}

■ ここまででできるようになったこと

• CSS の圧縮（clean-css）
• JavaScript の圧縮（uglify）
• watch による自動圧縮
• 本番公開にそのまま使える軽量ファイルの生成

制作効率だけでなく、サイトの表示速度改善にも直結する重要なステップ です。

📘15. HTML のフォーマットを自動化する（gulp-html-beautify）

CSS や JS の圧縮まで自動化できたら、次は HTML の整形（フォーマット）を自動化 していきます。 HTML は手作業で書いているとインデントがズレたり、改行がバラバラになりがちです。 そこで役立つのが gulp-html-beautify です。 このプラグインを使うと、HTML を自動で読みやすい形に整えてくれます。

（公式情報でも、HTML を beautify するための Gulp プラグインとして紹介されています）

Notion | Where teams and agents work together

A collaborative AI workspace, built on your company context. Build and orchestrate agents right alongside your team's prReadMore...

www.notion.so

■ gulp-html-beautify をインストールする

ターミナルで次のコマンドを実行します。

npm install --save-dev gulp-html-beautify

npm でも「HTML を整形するための Gulp プラグイン」として公開されています。

Notion | Where teams and agents work together

A collaborative AI workspace, built on your company context. Build and orchestrate agents right alongside your team's prReadMore...

www.notion.so

■ gulpfile.js に HTML 整形タスクを追加する

まず、プラグインを読み込みます。

const htmlbeautify = require("gulp-html-beautify");

次に、HTML を整形するタスクを作成します。

function formatHtml() {
  const options = {
    indent_size: 2,
    indent_with_tabs: false,
    preserve_newlines: true,
    max_preserve_newlines: 1,
    end_with_newline: true
  };

  return gulp.src("./public/*.html")
    .pipe(htmlbeautify(options))
    .pipe(gulp.dest("./public"));
}

exports.formatHtml = formatHtml;

● オプションの意味（公式仕様より）

• indent_size：インデント幅（スペース数）
• indent_with_tabs：タブでインデントするか
• preserve_newlines：元の改行を保持するか
• max_preserve_newlines：連続改行の最大数
• end_with_newline：最後の行に改行を入れる

これらは js-beautify の設定を引き継いでおり、柔軟に調整できます。

■ HTML を保存したら自動整形するようにする

watch タスクに HTML の監視を追加します。

function watchFiles() {
  gulp.watch("./src/**/*.scss", compileSass);
  gulp.watch("./src/js/*.js", minifyJs);
  gulp.watch("./public/*.html", formatHtml);  // ← HTML を保存したら整形
}

■ 実際の動作イメージ

1. public/index.html を保存
2. 自動で整形されて読みやすい HTML に
3. BrowserSync によりブラウザも自動リロード

■ HTML 整形を入れるメリット

• コードの見た目が統一される
• インデント崩れを防げる
• チーム開発でも読みやすい
• コードレビューがしやすくなる

HTML の品質を保つために、実務でもよく使われる設定です。

📘 16. Gulp 環境を別プロジェクトでも使い回す方法

ここまで構築してきた Gulp 環境は、Sass コンパイル・CSS 整形・JS 圧縮・自動リロードまで揃った 実務レベルの開発環境 です。 毎回ゼロから構築するのは時間がかかるため、 この Gulp 環境を別の案件でも使い回せるようにしておく と、制作スピードが大幅に上がります。 ここでは、最もシンプルで確実な「使い回し方法」をまとめます。

■ 方法①：Gulp 用の“スターターテンプレート”を作る（最もおすすめ）

あなたが今作った Gulp 環境を 丸ごとテンプレート化 しておきます。

● 手順

1. 今のプロジェクトフォルダをコピー
2. フォルダ名を「gulp-starter」などに変更
3. 中の src や public の中身だけ削除
4. Gulp 関連ファイルはそのまま残す

• package.json
• gulpfile.js
• node_modules（削除してOK）

● 新しい案件で使うとき

1. gulp-starter をコピー
2. 新しい案件名にリネーム
3. npm install を実行（package.json の内容から node_modules が復元される）
4. すぐに開発開始できる

✔ メリット

• 最速で新規プロジェクトを開始できる
• 毎回同じ環境を再構築する必要がない
• チームにも配布しやすい

■ 方法②：package.json と gulpfile.js だけコピーする

もっと軽量に使い回したい場合は、次の2つだけコピーします。

• package.json
• gulpfile.js

● 新しいプロジェクトでの手順

1. 新規フォルダを作る
2. package.json と gulpfile.js をコピー
3. npm install を実行
4. src と public を作成
5. 開発開始

✔ メリット

• 必要最低限のファイルだけで環境を再構築できる
• node_modules を含めないので軽い

■ 方法③：GitHub にテンプレートリポジトリとして保存する

GitHub を使っているなら、

テンプレートリポジトリ として保存しておくのが最強です。

● 手順

1. 今の Gulp プロジェクトを GitHub に push
2. GitHub の設定で「Template repository」を ON
3. 新しい案件を作るときは「Use this template」から生成

✔ メリット

• どの PC からでも同じ環境を再利用できる
• バージョン管理ができる
• チームで共有しやすい

■ 方法④：npm scripts として Gulp セットを公開する（上級者向け）

自作の Gulp セットを npm パッケージとして公開し、 npm install your-gulp-kit のように使い回す方法もあります。 ただし、これは上級者向けなので、 最初は 方法①〜③ で十分です。

■ どの方法を選ぶべきか？

・ご自身の制作スタイルで選んでください。 （個人的には① または ③（GitHub テンプレート））

■ ここまででできるようになったこと

• Gulp 環境をテンプレート化して再利用できる
• 新規案件の立ち上げが圧倒的に早くなる
• チームやクライアントにも共有しやすい

これで、Gulp を「一度作って終わり」ではなく、

制作の武器として継続的に使える状態 になりました。

📘 17. まとめ：Gulp は“作業の自動化”で制作効率を最大化するツール

ここまでの章で、Gulp を使った Web 制作の自動化環境を一つずつ構築してきました。 Sass のコンパイルからブラウザ自動リロード、CSS/JS の圧縮、HTML 整形まで、 制作に必要な作業をほぼすべて自動化できる環境 が完成しました。 最後に、Gulp がどんな価値をもたらすのかを整理して締めくくります。

■ Gulp が解決してくれる “面倒な作業”

Web 制作では、次のような作業が毎日のように発生します。

• Sass をコンパイルする
• ベンダープレフィックスを付ける
• CSS の並び順を整える
• メディアクエリをまとめる
• CSS/JS を圧縮する
• HTML を整形する
• ブラウザをリロードする
• ファイルを監視して変更を反映する

これらを手作業で行うと、時間がかかるうえにミスも起こりやすい です。

Gulp は、これらの作業をすべて自動化し、

「保存するだけで最適化されたファイルが生成される」 という快適な環境を提供してくれます。

■ Gulp を導入することで得られるメリット

● ① 作業スピードが圧倒的に上がる

コンパイル・整形・圧縮・リロードがすべて自動化されるため、

コーディングに集中でき、制作時間が大幅に短縮されます。

● ② コード品質が安定する

• プレフィックスの付け忘れ
• インデントの乱れ
• メディアクエリの散乱
• 圧縮し忘れ

こうしたヒューマンエラーを防げます。

● ③ チーム開発でも統一されたコードが保てる

自動整形・自動最適化により、誰が書いても同じ品質のコードになります。

● ④ 本番公開にそのまま使えるファイルが生成される

圧縮済みの CSS/JS が自動で出力されるため、

パフォーマンスの良いサイトを簡単に作れる ようになります。

● ⑤ 一度作った環境を何度でも使い回せる

テンプレート化しておけば、

新しい案件でも数秒で開発環境を立ち上げられます。

■ この Gulp 環境でできること（総まとめ）

あなたが構築した Gulp 環境は、次のすべてを自動化できます。

• Sass → CSS のコンパイル
• Autoprefixer によるプレフィックス付与
• CSS のプロパティ並び替え
• メディアクエリの統合
• CSS の圧縮
• JavaScript の圧縮
• HTML の整形
• ファイル変更の自動監視
• BrowserSync によるブラウザ自動リロード
• 複数 Sass の一括コンパイル
• プロジェクト間の使い回し

つまり、Web 制作のほぼすべての作業を自動化できる環境 が完成しています。

■ 最後に：Gulp は“作業の自動化”で制作効率を最大化するツール

Gulp の本質は、

「人間がやるべきでない作業をすべて自動化する」

という点にあります。

あなたが本当に時間を使うべきなのは、

• デザインを考える
• コードの構造を設計する
• クライアントの課題を解決する

といった “クリエイティブな部分” です。

Gulp は、そのための時間を最大限確保してくれる強力な相棒です。

TVCMで話題のココナラ

📘 付録. よくあるエラーとその解決方法

Gulp を使っていると、最初のうちはさまざまなエラーに遭遇します。 しかし、ほとんどのエラーは 原因がパターン化されている ため、落ち着いて対処すれば必ず解決できます。

ここでは、実務でも頻出するエラーを「原因 → 解決策」の形でまとめました。

■ ① MODULE_NOT_FOUND（モジュールが見つからない）

● 代表的なエラー例

Error: Cannot find module 'gulp-sass'

● 原因

• プラグインがインストールされていない。
• package.json にはあるが node_modules が壊れている。

■ ② Sass の import エラー

● 代表的なエラー例

Error: File to import not found or unreadable

● 原因

• import 先のパスが間違っている。
• src//*.scss ではなく .//*.scss のように node_modules まで拾ってしまっている。

● 解決策

• import パスを正しく書く。
• Gulp の src を必ず次のように限定する。

gulp.src('./src/**/*.scss')

■ ③ 権限（permission denied）エラー

● 代表的なエラー例

npm ERR! code EACCES
npm ERR! permission denied

● 原因

• npm のキャッシュやディレクトリの権限が不足している。

● 解決策

Mac/Linux の場合：

sudo npm install

または npm キャッシュの修復：

sudo chown -R $USER ~/.npm

■ ④ Gulp のバージョン不一致エラー

● 代表的なエラー例

Gulp version mismatch:

● 原因

• グローバルの gulp-cli と、プロジェクト内の gulp のバージョンが違う

● 解決策

npm install --global gulp-cli
npm install --save-dev gulp

■ ⑤ watch が動かない・タスクが実行されない

● 原因

• watch の書き方が間違っている。
• タスク名の export が漏れている。

● 解決策

exports.watch = watchFiles;

■ ⑥ JSON.parse エラー（package.json の文法ミス）

● 代表的なエラー例

EJSONPARSE: Failed to parse json

● 原因

• package.json のカンマ抜け・余分なカンマ
• name が “gulp” だけになっている（禁止ワード）

● 解決策

• JSON を整形し直す
• name を “gulp_project” のように変更する。

■ ⑦ Node Sass のバージョン不一致

● 代表的なエラー例

Node Sass does not yet support your current environment

● 原因

• Node.js のバージョンと node-sass の対応が合っていない

● 解決策

npm rebuild node-sass

または Dart Sass（sass）に移行するのが最も安全。

■ ⑧ imagemin 系のエラー（画像圧縮）

● 原因

• pngquant などの依存ツールが不足している

● 解決策

npm install mozjpeg

■ ⑨ そもそも Gulp が動かない（gulp コマンド not found）

● 原因

• gulp-cli がグローバルに入っていない
• PATH が通っていない

● 解決策

npm install --global gulp-cli
npx gulp

■ まとめ：Gulp のエラーは 90% がこの2つ

1. 権限エラー（permission denied）
2. モジュールが見つからない（MODULE_NOT_FOUND）

このどちらかであることがほとんどです。

エラーメッセージを落ち着いて読めば、必ず原因にたどり着けます。