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

『※ 当サイトではアフィリエイト広告を利用しています』

こんにちは、mokoichiです。

悩んでる人
悩んでる人

「Sass をコンパイルするたびにターミナルを開くのが面倒…」 「ベンダープレフィックス付けや CSS の並び替え、もっと自動化できないかなぁ？」 「ブラウザを更新するたびにリロードするのが地味に時間を奪われるなぁ〜」 「Gulp が便利って聞くけど、設定が難しそうで手が出せないなぁ~」

Web制作をしていると、こうした “細かい作業の積み重ね” が大きなストレスになります。 そこで今回は、Gulp の基本から、Sass コンパイル・自動リロード・圧縮・整形まで 実務で役立つタスクを私が学習したものを含めて、紹介していきます。 「Gulp を触ったことがない」という方でも、この記事を読み進めるだけで 自分の制作環境を自動化できるようになる ことを目指して、一緒に整理していきましょう。

📘 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 に任せられる ようになります。

📘 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（アルファベット順） が分かりやすくておすすめです。