1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。

Webページを制作するとき、sassをcssに変換して使用することが多いと思います。
今回はgulp4の使い方を、インストールから詳しく紹介していきたいと思います。

目次
  1. gulpとは
  2. Homebrewのインストール
  3. Node.jsをインストール
  4. npmでgulpをインストール
  5. gulpfile.jsの作成
  6. gulpを使ってファイルをコピーする
  7. gulp-sassを使って、SassをCSSにコンパイル
  8. タスクに名前をつける
  9. 直列タスクseries、並列タスクparallelについて
  10. ファイルの変更を監視
  11. グロブについて
  12. シンボリックリンク、symlinkについて
  13. lastRunで、変更があったファイルのみをコンパイル
  14. gulp4では、taskメソッドは非推奨に
  15. まとめ

gulpとは

gulpは、sassからcssのコンパイルを含め、様々なことを自動で行ってくれる、タスクランナーと呼ばれるものです。
ただ、導入には少し手順を踏まなくてはなりません。今回はその手順も含め、解説していきます。

gulp

まず、gulpインストールするには、npmというパッケージ管理ツールを使います。
npmは、Node.jsをインストールすることで同時にインストールされます。また、Node.jsのインストールにはHomebrewを使うこともできます。

Homebrewを使わなくてもNode.jsをインストールすることはできるのですが、HomebrewにはWeb開発での便利なツールが色々あるので、インストールしておくと後々役立つかもしれません。

Homebrewのインストール

まず、Homebrewをインストールしてみましょう。
Homebrew
Homebrew

Homebrewのインストールには、上のリンクから画像の四角で囲まれた部分をターミナルに入力します。
Homebrew

詳しくは、「Homebrewを使いこなせ!Macへのインストールや使い方。」という記事をご覧ください。

Node.jsをインストール

Node.jsをインストールします。

Node.js

※Homebrewを使用しない場合は、Node.jsのページからダウンロードすることも可能です。

では、Homebrewを使ってNode.jsをインストールしてみましょう。
コマンドをターミナルに入力します。

$ brew install node

これでNode.jsがインストールされます。
インストールできない場合は頭にsudoをつけてインストールします。

$ sudo brew install node

これでnpmが使用できるようになります。

npmでgulpをインストール

では、gulpをインストールしていきましょう。
gulpは、グローバルにインストールする方法もありますが、ローカルのみにインストールすれば問題ないでしょう。

まず、cd の後にディレクトリを入力、もしくはフォルダをドラッグして、作業用ディレクトリに移動しましょう。

screen

$ cd 作業用ディレクトリ

作業用ディレクトリに移動したら、ローカルインストールする前に、「package.json」というファイルを作成します。
package.jsonを作成するには、npm initというコマンドを使います。

npm init

すると、順番に入力できるようになっていますので、入力していきましょう。(後から編集も可能ですので、それほど考える必要もありません)
入力については、npm package.json 取扱説明書をご覧ください。

また、-yというオプションをつけることで、入力を省略することができます。

npm init -y

では、gulpをローカルにインストールします。

$ npm install gulp --save-dev

–save-devというオプションをつけることで、先ほど作成したpackage.jsonに、以下の内容が記入されます。

"devDependencies": {
  "gulp": "^4.0.2"
}

上記の方法では、gulpをインストールした階層でのみgulpコマンドが使用できるようになります。

もしグローバルにインストールしたい場合は、-g というオプションをつけます。
グローバルインストールは、ツールをマシンのどこからでも使用することができます。
とても簡単なのですが、あまり良くない方法とされています。

$ npm install gulp -g

ではgulpコマンドを使ってみましょう。
gulpのバージョンを見てみます。バーションを確認するには、以下のコマンドを使います。

$ gulp --version

gulpfile.jsの作成

gulpfile.jsを作ります。
gulpfile.jsは、gulpの動きを制御するためのファイルです。

例えば、以下のようなgulpfile.jsファイルを作ります。

ファイル: gulpfile.js

function message( cb ) {
	console.log( 'gulpを使おう' );
	cb();
}

exports.default = message;

これでgulpコマンドを入力します。

$ gulp
[17:40:05] Using gulpfile ~/xxx/gulpfile.js
[17:40:05] Starting 'default'...
gulpを使おう
[17:40:05] Finished 'default' after 2.78 ms

gulpを使おうと表示されれば成功です。

gulpを使ってファイルをコピーする

ではgulpによるファイルの操作を学んでいきましょう。
まずファイルをコピーする方法を見ていきます。

gulpfile.jsがある階層にsrcフォルダを作成し、その中にscript.jsファイルを作ります。
適当なソースを入力し、このファイルをgulpを使ってoutputフォルダへコピーします。

gulpfile.js

const { src, dest } = require( 'gulp' );

function copy() {
	return src( './src/*.js' )
		.pipe( dest( './output/' ) );
}

exports.default = copy;

あとは次のコマンドを実行します。

$ gulp

するとoutputフォルダが作られ、script.jsがコピーされます。

上記の例ではcopy()という関数を作成していますが、これは短くすることもできます。

gulpfile.js

const { src, dest } = require( 'gulp' );

exports.default = function() {
	return src( './src/*.js' )
		.pipe( dest( './output/' ) );
}

gulp-sassを使って、SassをCSSにコンパイル

sassをcssにコンパイルするためのツールを追加していきます。
gulp-sassをインストールしましょう。

ターミナルに入力します。

$ npm install gulp-sass --save-dev

では、gulpfile.jsを編集していきます。

ファイル: gulpfile.js

const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-sass' );

exports.default = function() {
	return src( './src/*.scss' )
		.pipe( sass() )
		.pipe( dest( './output/' ) );
}

2行目でgulp-sassモジュールを変数に代入し、6行目でSassを変換します。

では、実際にSassをコンパイルしてみましょう。
まず、Sass(.scss)ファイルを作っていきます。

ファイル: src/style.scss

.article {
	h1 {
		color: #222;
	}
}

ターミナルにgulpと入力します。

$ gulp

これで、cssフォルダが作られ、さらにその中にコンパイルしたcssファイルが作られます。

ファイル: output/style.css

.article h1 {
  color: #222; }

タスクに名前をつける

さて、これまで紹介してきた方法では、gulpというコマンドを入力すると実行されるわけですが。これでは一つのタスクしか実行することができません。
例えばSassのコンパイルと、Pugのコンパイルのそれぞれのタスクを作成し、使い分けるということができないのです。

そこで、タスクに名前をつけてみましょう。

では、gulpfile.jsのdefault部分を変更してみます。

こちらはgulp-sassをインストールした場合のgulpfile.jsファイルです。

ファイル: gulpfile.js

const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-sass' );

exports.sass = function() {
	return src( './src/*.scss' )
		.pipe( sass() )
		.pipe( dest( './output/' ) );
}

この例では、さきほどまでdefaultとなっていた部分をsassに変更しました。
では、この状態で実行してみます。ターミナルに以下のコマンドを入力します。

$ gulp sass

gulpの後に、sassというワードを入力することで、実行できるようになります。
これは、タスクをいくつも追加したとき、それぞれに名前をつけたい時などに使えます。

次のように複数のタスクを作成しておけば、場合に応じて使い分けることができます。

const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-sass' );

exports.copy = function() {
	return src( './src/*.*' )
		.pipe( dest( './output/' ) );
}

exports.sass = function() {
	return src( './src/*.scss' )
		.pipe( sass() )
		.pipe( dest( './output/' ) );
}

直列タスクseries、並列タスクparallelについて

ではseriesとparallelについて見ていきましょう。

まずseriesはタスクを順番に実行していくメソッドです。

gulpfile.js

const { series } = require('gulp');

function cat( cb ) {
	console.log( 'ニャー' );
	cb();
}

function dog( cb ) {
	console.log( 'ワン' );
	cb();
}

exports.default = series( cat, dog );

実際に実行してみると、catがスタートしてニャーと言ったら終了し、dogがスタートしてワンと言ったら終了というふうに、順番に実行されているのが分かります。

$ gulp
[18:04:30] Using gulpfile ~/xxx/gulpfile.js
[18:04:30] Starting 'default'...
[18:04:30] Starting 'cat'...
ニャー
[18:04:30] Finished 'cat' after 1.88 ms
[18:04:30] Starting 'dog'...
ワン
[18:04:30] Finished 'dog' after 444 μs
[18:04:30] Finished 'default' after 5.23 ms

続いて、parallelはタスクを同時に実行するメソッドです。

gulpfile.js

const { parallel } = require('gulp');

function cat( cb ) {
	console.log( 'ニャー' );
	cb();
}

function dog( cb ) {
	console.log( 'ワン' );
	cb();
}

exports.default = parallel( cat, dog );

実際に実行してみると、catとdogが同時に実行されていることが分かります。

$ gulp
[18:25:16] Using gulpfile ~/xxx/gulpfile.js
[18:25:16] Starting 'default'...
[18:25:16] Starting 'cat'...
[18:25:16] Starting 'dog'...
ニャー
[18:25:16] Finished 'cat' after 1.46 ms
ワン
[18:25:16] Finished 'dog' after 3.17 ms
[18:25:16] Finished 'default' after 5.95 ms

ファイルの変更を監視

gulpには、ファイルの変更を監視する機能があります。
早速使っていきましょう。

ファイル: gulpfile.js

const { src, dest, watch } = require( 'gulp' );
const sass = require( 'gulp-sass' );

function compileSass() {
	return src( './src/**/*.scss' )
		.pipe( sass() )
		.pipe( dest( './output/' ) );
}

exports.sass = compileSass;

exports.watch = function() {
	watch( './src/**/*.scss', compileSass );
}

13行目のwatchメソッドで、srcフォルダのscssファイルが変更された時、compileSassを実行するという命令を作成しました。

これでファイルを監視して、保存された場合に自動的にSassがコンパイルされるようになりました。
実行してみましょう。

$ gulp watch

watchを終了するには、「Ctrl + C」で終了します。

グロブについて

グロブはファイルのディレクトリを指定するときに役立つものです。

* 任意の文字数(’*.js’)
** 0個以上の階層(’**/*.js’)
! そのファイルを省く。除外(’!img/img.jpg’)

他にも色々ありますが、よく使うのはこの3つです。

シンボリックリンク、symlinkについて

symlinkを使ってシンボリックリンクを作成すると、別の場所にあるファイルに簡単にアクセスできるようになる、ショートカットのようなものです。

const { src, symlink } = require( 'gulp' );

exports.link = function() {
	return src( '../test/src/' )
		.pipe( symlink( './src/' ) );
}

このようにすると、一つ上の階層にあるtestフォルダの中の、srcフォルダにあるファイルが、今現在の階層でも使用できるようになります。

lastRunで、変更があったファイルのみをコンパイル

lastRunメソッドとsrcメソッドを同時に使うことで、変更があったファイルのみをコンパイルするようにできます。

そのまま使っても、どのファイルがコンパイルされているのか分からないので、gulp-usingというプラグインを使おうと思います。
gulp-usingを使うと、どのファイルが使われているのかを見ることができます。

const { src, dest, lastRun, watch } = require( 'gulp' );
const sass = require( 'gulp-sass' );
const using = require( 'gulp-using' );
 
function compileSass() {
	return src( './src/**/*.scss', { since: lastRun( compileSass ) } )
		.pipe( sass() )
		.pipe( using() )
		.pipe( dest( './output/' ) );
}
 
exports.watch = function() {
	watch( './src/**/*.scss', compileSass );
}

6行目でlastRunを使っています。
これでgulp watchを実行し、ファイルを変更すると、2回目からは変更したファイルのみがコンパイルされます。

gulp4では、taskメソッドは非推奨に

gulp4以前のgulpでは、taskメソッドを使ってタスクを作成しておりましたが、これは非推奨になったようです。
タスクはエクスポート(exports)することで使えるようになります。

まとめ

以上、gulpの使い方を詳しくまとめました。
その他にもgulpには様々なツールがあります。そのツールを使うと、もっと快適な環境を作ることができます。

gulpを活用して、自分だけの快適なオリジナル環境をつくると楽しいです。

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。 今回は

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

コメントをどうぞ!

メールアドレスが公開されることはありません。