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】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。 前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

Homebrew

Homebrewの使い方。よく使うコマンド一覧と詳しい解説まとめ

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です