Gulpのインストール方法＆使い方を解説する

PR
WEB制作
2021.5.31
2023.9.26

この記事では「コードの整形」や「画像の圧縮」といった作業が自動化できる様になるツール、『Gulp（ガルプ）』のインストール方法を解説してゆきます。

コーディング時の『めんどくさい』はすべてGlupに任せてしまいましょう。WEB制作者は必見の内容です！

▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

1Gulp（ガルプ）のインストール方法を解説します
- 1.1Gulpとは？【作業を効率化できるタスクランナー】
- 1.2Gulpで出来ることは？
- 1.3Gulpを導入するメリット【効率化＆品質向上】
- 1.4Gulpのインストール方法【3ステップ／5分で完了】

2STEP.1 Node.jsをインストールする

3STEP.2 プロジェクトフォルダを初期化する
- 3.1Node.jsに含まれる「npm」を使ってインストールします
- 3.2コマンドを実行する

4STEP.3 Gulpをインストールする
- 4.1コマンドを実行する
- 4.2Gulpのバージョンを確認する方法
- 4.3gulpfile.jsを作成する

5Gulpの基本的な使い方
- 5.1Gulpのプラグインをインストールする
- 5.2gulpfile.jsを編集する
- 5.3gulpfile.jsの注意事項【非推奨の書き方について】
- 5.4Gulpのタスクを実行する

6まとめ：Gulpを使いこなして効率的にコーディングをしよう

Gulp（ガルプ）のインストール方法を解説します

まずは今回紹介するツール「Gulp（ガルプ）」について、簡単に紹介してゆきます。

Gulpとは？【作業を効率化できるタスクランナー】

『Gulp（ガルプ）』とは、フロントエンド開発の作業を自動化できる『タスクランナー』と呼ばれる種類のツールです。オープンソースとして公開されているため、誰でも無料で利用することが出来ます。

Gulp公式サイト：https://gulpjs.com/

そんなGulpは「Node.js」上で利用できるツールとなっており、「本体＋プラグイン」の組み合わせで様々な『タスク』が実現できます。また、『タスク』はJavaScriptで記述することでプロジェクトや作業の必要性に合わせて柔軟に設定できる様になっています。

Gulpで出来ることは？

Gulpを導入すれば次の作業を自動化することが出来ます。

▼Gulpで出来ること

CSSにベンダープレフィックスをつける
CSSプロパティの並べ替え（アルファベット順）
画像・CSS・JavaScriptファイルの圧縮
Sassのコンパイル
ブラウザのリロード・実機での確認

WEB制作をしている方であれば、いずれも『正直言ってめんどくさいな。。』と思う作業だと思います。しかしGulpを使えば、これらの煩雑な作業はすべて自動化することが出来てしまいます。

めんどくさい作業をなくして、コーディング作業に集中しましょう！

Gulpを導入するメリット【効率化＆品質向上】

Glupの導入には次のようなメリットがあります。

▼Glup導入のメリット

煩雑な作業を自動化することで、作業が効率的になる
自動化により人的ミスが減り、作業時間が短縮できる
複数人での作業における環境・手順を統一できる

導入の主なメリットは開発者の負担を減らして作業を効率化する事ですが、複数人で環境・手順を統一できるため、納期の短縮やチーム全体の品質向上にも期待ができるツールとなっています。

個人の作業者から企業・チームまで、幅広い層に導入が推奨されるツールだと思います！

Gulpのインストール方法【3ステップ／5分で完了】

今回は、Gulpを利用するまでの手順について、以下の3ステップで解説を進めてゆきます。

▼Gulpのインストール方法

Node.jsをインストールする
プロジェクトフォルダを初期化する
Gulpをインストールする

▼バージョン（2021年5月)

Node.js：v14.16.1 LTS
Gulp：v4.0.2

いずれの作業もインストーラーを実行したりコピペだけで完了出来ます。開始から終了まで5分程度で完了出来る内容となっています。

記事の後半では、Gulpのかんたんな使い方も解説してゆきます！

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

それでは実際のインストール手順について解説を始めます。先ずは、Gulpの実行環境である「Node.js」のインストールから行います。

Node.js公式サイト：https://nodejs.org/en/

Node.jsの公式サイトにアクセスすると、PCに応じたインストーラーが表示されるので、そのままダウンロードしましょう。

執筆時点(2021年5月)の最新バージョン、安定版(LTS)の「14.16.1 LTS」を使用して解説を進めてゆきます。

ダウンロードしたファイルを実行して、Node.jsをインストールしてゆきましょう。

基本的にはインストーラーにしたがって作業をすすめてゆけばOKです（※特別なオプション指定をする必要はありません）。Node.jsの詳しいインストール手順が気になる方には、次の記事がおススメです。

おススメ記事

Node.jsとは？Windowsにインストールする方法をやさしく解説この記事では、Node.jsで出来ることや、Windows10へのインストール方法について解説してゆきます。もちろんMa...

インストールが完了したら、確認のためにコマンドプロンプト（コンソール）を開いて次のコマンドを実行しましょう。

▼実行コマンド

node -v

コマンドの実行結果にダウンロードしたNode.jsのバージョンが表示出来れば、インストール作業は終わりです。

STEP.2 プロジェクトフォルダを初期化する

Node.jsのインストールが終わったら、続けてGulpを利用するプロジェクトフォルダの作成と初期化を行います。

また今回は、以下のプロジェクトフォルダを例に解説を進めてゆきます。

▼プロジェクトフォルダ
C:\sample

Node.jsに含まれる「npm」を使ってインストールします

Gulpは、Node.jsに含まれる「npm」というツールを使ってインストールをしてゆきます。

▼npmとは？
Node Package Managerの略称で、Node.jsのパッケージ（各種フレームワークやライブラリ）を管理するツールです。npmはNode.jsに含まれる形で自動的にインストールされ、コマンド「npm」で利用する事ができます。

コマンドを実行する

先ずはPC上にプロジェクトフォルダを作成と、初期化をするためのコマンドを実行しましょう。

▼実行コマンド

mkdir sample
cd sample
npm init -y

コマンド操作が終わると、プロジェクトフォルダ内に『package.json』というファイルが作成されます。

▼package.jsonとは
Node.jsのパッケージを管理するために使われるファイル。拡張子からも分かるとおり、JSON形式で記述してゆきます。

一例ですが、作成される『package.json』の内容は次の様になります。

▼package.jsonの内容

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

プロジェクトフォルダの初期化はこれでOKです！

STEP.3 Gulpをインストールする

ここまで来たら、いよいよGulpをインストールしてゆきます。

コマンドを実行する

さきほど初期化を行ったプロジェクトフォルダで次のコマンドを実行して、Glupをインストールしてゆきましょう。

▼実行コマンド

npm install gulp -g
npm install gulp --save-dev

Glupのインストールには「グローバルインストール」と「ローカルインストール」の2種類がありますが、今回は両方ともインストールします。

グローバルインストール・・・PC上のどこからでも利用できる様になる
ローカルインストール・・・プロジェクトのフォルダ内でのみ利用できる様になる

上記コマンドの実行後には、パッケージを管理する「package.json」の”devDependencies”に「gulp」が追加されていることも確認できます。

Gulpのバージョンを確認する方法

インストールしたGulpのバージョンを確認するには、次のコマンドを実行します。

▼実行コマンド

gulp -v

プロジェクトフォルダ内で上記のコマンドを実行すると、先ほどインストールした「グローバルインストール」と「ローカルインストール」それぞれのバージョンが確認できます。

gulpfile.jsを作成する

最後にプロジェクトフォルダ内に『gulpfile.js』を作成してゆきます。

▼gulpfile.jsとは
Glupを通して実行するタスクを登録するためのファイル。拡張子から分かるとおり、JavaScriptで記述してゆきます。

『gulpfile.js』はプロジェクトフォルダの直下、package.jsonと同じ階層に作成します。また、この時点ではファイルは空のままでOKです。（※後ほど編集内容について解説を行います）

以上でGulpのインストール作業は終わりです！

Gulpの基本的な使い方

インストールが終わったら、今度は実際にGulpを使ってみましょう。今回は以下のタスクを作成して、実行するまでの流れを解説してゆきます。

▼作業内容

Sass（SCSS）をコンパイルする

▼フォルダ構成

/sample
　├/css
　│　├/sass
　│　│　└style.scss
　│　└★ここにCSSファイルを生成する
　├node_modules
　├gulpfile.js
　├package.json
　└package-lock.json

▼style.scssの内容

$blue: #3bbfce;
$margin: 16px;
.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Gulpのプラグインをインストールする

まずは、Sassのコンパイルを行うためのプラグインをインストールしてゆきます。プロジェクトフォルダ内で次のコマンドを実行します。

▼実行コマンド

npm install gulp-sass --save-dev

上記を実行すると、Gulpのプラグイン「gulp-sass」がインストールされます。また、パッケージを管理する「package.json」の”devDependencies”に「gulp-sass」が追加されていることも確認できます。

gulpfile.jsを編集する

タスクを実行するための処理を、あらかじめ用意しておいた「gulpfile.js」に追加してゆきます。

▼gulpfile.jsの編集内容

// Gulpを初期化する
const { src, dest, series } = require('gulp');

// Gulpプラグインの読み込み
const sass = require('gulp-sass');

// Sassのコンパイル処理
const sass_compile = function(){
    return src('css/sass/style.scss')
      .pipe(sass({ outputStyle: 'expanded' }))
      .pipe(dest('css'))
}

// タスクを実行する
exports.default = series(sass_compile);