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

スポンサードリンク

関連コンテンツ

オススメ記事

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

迷路やRPGで使えるマップを作ってみよ!

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

小学生からのプログラミング講座(こうざ)、第10弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力(にゅうりょく)で移動(いどう)するところまで、紹介(しょうかい)

scratch

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

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

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

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

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

MacでのAndroid Studioインストール手順

今回は Android Studio 3.4 をインストールする手順を解説します。 Android Studio のダウンロード Android Studio そのページから

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

コメントをどうぞ!

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