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を活用して、自分だけの快適なオリジナル環境をつくると楽しいです。

スポンサードリンク

関連コンテンツ

オススメ記事

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

コメントをどうぞ!

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