gulpとは？始め方使い方をわかりやすく解説

フロントエンドやweb制作会社のエンジニアの方はよく耳にするgulp（ガルプ）。

使ってみたらグーグル翻訳のように便利だったのでこれからgulpを使う人、自分の備忘録ようとして記事にまとめておこうと思います。

この記事を読むメリット

gulpの概要がわかる
gulpの環境構築方法がわかる
gulpの使いかたがわかる

gulpとは
gulpを使うための環境構築方法
gulpの使い方
1. scssをコンパイルする
2. scssファイルが保存されたら自動でコンパイルする

gulpとは

gulp（ガルプ）とはフロントエンドの開発時に発生するコードをwebブラウザ上でビジュアル化して確認する作業を自動化してくれるツールです。

pugファイルのコンパイル
scssファイルのコンパイル
type scriptのコンパイル
htmlの圧縮
cssの圧縮
jsの圧縮
画像の圧縮

など様々なことを自動で行ってくれます。

すごい便利です。

gulpを使うための環境構築方法

gulpを使うためにはnode.jsとnpmが必要となります。

node.jsとはjsをバックグラウンドで動かすための環境です。

npmとはnode.jdを管理したりパッケージをインストールする時に使用するものです。

node.jsとnpmのインルトール方法

node.jsとnpmをインストールする方法は簡単でこちらからファイルをダウンロードし、インストーラを起動させることでかんたにインストールできます。

ダウンロードは推奨版をおすすめします。

適切にインストールできたか確認

CUI、ターミナルから確認できます。

ターミナルを開き、以下のコマンドを実行することでnode.jsのバージョンを確認することができます。

node -v

node -v

無事バージョンが表示されればインストールは成功です。

次にnpmのバージョンも確認します。

npm -v

npm -v

node.jsもnpmも以下のようにバージョンが表示されますがもし表示されない場合はダウンロードからやり直すか、最新版をインストールして見てください。

v8.11.4

v8.11.4

gulpをインストールするためのディレクトリを作る

gulpをインストールするためのディレクトリをあらかじめ作っておきます。

ターミナルを開きディレクトリを制作したいディレクトリまで移動します。

今回はdesktopに作ることにしようと思います、ですのでまずdesktopへ移動しましょう。

移動するためのコマンドは「cd」です。

cd desktop

1	cd desktop

desktopへ移動できたらそこに「testgulp」というディレクトリを作ります。

ディレクトリを制作するコマンドは「mkdir」です

mkdir testgulp

1	mkdir testgulp

ディレクトリ名をgulpにしてしまうと後々エラーが起こるので他の名前にしておきましょう。

ディレクトリを制作したら制作したディレクトリへ移動します。

cd testgulp

1	cd testgulp

package.jsonファイルを作る

以下のコマンドをtestgulpディレクトリ内で実行することでpackage.jsonが生成されます。

npm init -y

1	npm init -y

無事生成されたか確認しましょう

testgulpディレクトリで「ls」を実行することでそのディレクトリの内容を見ることができます。

ls

もしくは「cat」でpackage.jsonの中身を見ます。

cat package.json

1	cat package.json

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

{

"name": "gulpfile",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "",

"license": "ISC",

}

このようなものが表示されればokです。

gulpをインストールする

ここでようやく本命のgulpがインストールできます。

以下のコマンドを実行しましょう

npm install -D gulp

1	npm install -D gulp

正常にインストールできたか確認しましょう

インストールされるとpackage.jsonに情報が書き込まれるのでpackage.jsonの中身を確認します。

cat package.json

1	cat package.json

中身が以下のように変更されていればokです。

{
  "name": "gulpfile",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
  }
}

{

"name": "gulpfile",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "",

"license": "ISC",

"devDependencies": {

"gulp": "^4.0.2",

}

もしインストールが正常に行かなかった場合はこちらを参考にしてください。

正常にインストールできましたらインストールしたディレクトリに

gulpfile.js
node_modules
package-lock.json
package.json

が自動生成されます。

使用するのはgulpfile.jsのみですので他はシカトして大丈夫ですが、消去はしないでください。

gulpfile.jsに処理内容を記載することでコンパイルなどを自動化することができます。

これでgulpを使うための環境構築は終了しました。

gulpの使い方

では実際にgulpfile.jsに処理を記載してgulpを使っていきましょう。

よく使うであろう機能をいくつか紹介していきます。

が、gulpの記載方法は２種類あるようで、taskを使って書く方法とallow関数を使って書く方法があります。

taskを使って書く方法は古い方法らしく、挙動がおかしいことがあるようですのでなるべくallow関数を使って書くようにしましょう。

実際、筆者の場合も動かない処理があり苦労しました。

ですがallow関数で記載する方法を解説しているwebサイトが少ないので探り探りといったところです。

scssをコンパイルする

まず、scssをコンパイルするためのプラグインをインストールします。

ターミナルから以下のコマンドを実行してください。

npm install -D gulp gulp-sass

1	npm install -D gulp gulp-sass

正常にインストールされたか気になるかたは「cat package.json」コマンドで確認して見てください。

次にgulpfile.jsに処理を記載していきます。

const { src, dest, watch, parallel } = require("gulp");//gulpを読み込み
const sass = require('gulp-sass');//scssをコンパイルするプラグインを読み込み

const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル

exports.scss = parallel(compilescss);//実行

const { src, dest, watch, parallel } = require("gulp");//gulpを読み込み

const sass = require('gulp-sass');//scssをコンパイルするプラグインを読み込み

const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル

exports.scss = parallel(compilescss);//実行

処理の説明はコメントの通りです。

少し難しい部分のみ解説します。

const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル

1	const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル

「src」の部分にコンパイルしたいファイルのパスを記載します。

今回はsrcの中のscssの中のscssファイルをコンパイルしたいと思います。「*.scss」はscssという拡張子全てという意味です。

sass({outpitStyle:'expanded'})

1	sass({outpitStyle:'expanded'})

「expanded」を「compressed」に変更すると改行なしの圧縮されたファイルが生成されます。

.pipe(dest('src/css/'));

1	.pipe(dest('src/css/'));

コンパイルして生成されたcssファイルを保存する場所のパスを記載します。

実行する方法はターミナルで以下のコマンドを実行します。

gulp scss

gulp scss

scssファイルが保存されたら自動でコンパイルする

scssファイルを変更するたんびにターミナルからgulp scssコマンドを叩いていると大変ですよね、ですのでscssファイルが保存されると自動的にコンパイルされるようにしましょう。

gulpfile.jsに追加で処理を記載していきます。

const { src, dest, watch, parallel } = require("gulp");//gulpを読み込み
const sass = require('gulp-sass');//scssをコンパイルするプラグインを読み込み

const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル
const watchReFilesscss = () => watch("src/scss/*.scss", compilescss);//scssが更新されるとcompilescssを実行

exports.default = parallel(watchReFilescss);//実行

const { src, dest, watch, parallel } = require("gulp");//gulpを読み込み

const sass = require('gulp-sass');//scssをコンパイルするプラグインを読み込み

const compilescss = () => src('src/scss/*.scss').pipe(sass({outpitStyle:'expanded'})).pipe(dest('src/css/'));//scssをコンパイル

const watchReFilesscss = () => watch("src/scss/*.scss", compilescss);//scssが更新されるとcompilescssを実行

exports.default = parallel(watchReFilescss);//実行

「const watchReFilesscss」という行を追加し、「parallel(compilescss);」を「parallel(watchReFilescss);」へ変更します。

const watchReFilesscss = () => watch("src/scss/*.scss", compilescss);//scssが更新されるとcompilescssを実行

1	const watchReFilesscss = () => watch("src/scss/*.scss", compilescss);//scssが更新されるとcompilescssを実行

「watch」でscssファイルを監視し、保存されると「compilescss」の処理が走るようになっています。

「src/scss/*.scss」の部分に監視する対象のファイルのパスを記載します。

実行します

gulp

gulp

監視を終了するためにはcommand+cを押すことで終了できます。