1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう!

【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう!

Gulpを使って開発を進めているいると、だんだんとgulpfile.jsが複雑になり、どこになにが書いてあったか分からなくなることがあります。
そんなときは、gulpfile.jsを分割して管理すると分かりやすくなり、作業効率も上がります。

今回はGulp4でgulpfile.jsを分割して管理する方法を紹介します。

目次
  1. ディレクトリ構成について
  2. gulpfile.jsの分割
  3. 現在の使用できるタスクを確認
  4. SassとPugのコンパイル
  5. まとめ

ディレクトリ構成について

今回は、Webサイトを作る、ということで進めていきたいと思います。

今回のサイトはgulp-siteというディレクトリに作っていくとして、pugやscssなどのファイルはその中のassetsというディレクトリに入れています。
それらのpugやscssファイルをコンパイルするためのタスクランナーなどのファイルはdevディレクトリに入れています。

gulp-site
|-- assets/
|   |-- pug/
|   |   `-- index.pug
|   `-- scss/
|       `-- style.scss
`-- dev/
    |-- node_modules/
    |    `-- ....../
    |-- tasks/
    |   |-- pug.js
    |   `-- sass.js
    |-- gulpfile.js
    |-- package-lock.json
    |-- package.json
    `-- paths.js

devディレクトリにはgulpfile.jsがあります。
ご存知のとおり、Gulpを使う上での設定を書いておくことができます。

このgulpfile.jsに、PugやSassの設定も書いてもいいのですが、タスクが増えるごとに分かりにくくなってしまいます。

そこで、gulpfile.jsからtasks/pug.jsやtasks/sass.jsを呼び出す、といったふうに、ファイルを分割して作っていきたいと思います。

gulpfile.jsの分割

Webサイトを作りたいとき、PugやSassを使うと便利になります。
では、PugやSassといった機能ごとに、gulpfile.jsファイルを分割してみましょう。

dev/gulpfile.js

'use strict';

const { watch, series, parallel } = require( 'gulp' );

const { sassTask } = require( './tasks/sass.js' );
const { pugTask } = require( './tasks/pug.js' );
const paths = require( './paths.js' );

const compile = series(
	parallel(
		sassTask,
		pugTask
	)
);

exports.default = cb => {
	compile();
	cb();
}

exports.watch = () => {
	watch( paths.src.all, compile );
}

exports.sass = sassTask;
exports.pug = pugTask;

さて、上記のgulpfile.jsですが、5〜7行目で別のファイルを呼び出しています。
SassやPugの設定ファイル、そしてパスの設定ファイルです。

パスの設定ファイル(dev/paths.js)には、開発で使うファイルや出力場所などのパスが書かれています。こうしておくことで、ディレクトリ構成を変更した場合に、このファイルのみを変更すればよくなり、非常に便利になります。

dev/paths.js

'use strict';

module.exports = {
	src: {
		all: '../assets/**/*.*',
		pug: '../assets/pug/**/*.pug',
		sass: '../assets/scss/**/*.scss',
	},
	dest: '../dest/'
};

また、gulpfile.jsでは、5〜6行目でSassやPugの設定ファイルを読み込んでいます。
まず、以下がSassの設定ファイルです。

dev/tasks/sass.js

'use strict';

const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-dart-sass' );
const paths = require( '../paths' );

const sassTask = cb => {
	return src( paths.src.sass )
		.pipe( sass().on( 'error', sass.logError ) )
		.pipe( dest( paths.dest ) );
	cb();
}

exports.sassTask = sassTask;

また、Pugの設定ファイルは以下のようになります。

dev/tasks/pug.js

'use strict';

const { src, dest } = require( 'gulp' );
const pug = require( 'gulp-pug' );
const paths = require( '../paths' );

const pugTask = cb => {
	return src( paths.src.pug )
		.pipe( pug() )
		.pipe( dest( paths.dest ) );
	cb();
}

exports.pugTask = pugTask;

現在の使用できるタスクを確認

設定がうまくいっているかどうか、使用できるタスクを確認してみます。

$ npx gulp --tasks
[00:00:00] Tasks for ~/.../.../gulp-site/dev/gulpfile.js
[00:00:00] ├── default
[00:00:00] ├── watch
[00:00:00] ├── sass
[00:00:00] └── pug

設定したタスクが表示されていれば成功です。

SassとPugのコンパイル

では、かんたんなscssとpugファイルを用意して、うまくコンパイルされるか試してみましょう。

assets/scss/style.scss

$color-primary: #36e8ff;

.heading {
	color: #ffffff;
	background: $color-primary;
}

assets/pug/index.pug

doctype html
head
	title Sample
body
	h1 Sample Site
	p Sample

これらをコンパイルするには、以下のコマンドを実行します。

$ npx gulp

また、watchを使って、ファイルを監視することも可能です。

$ npx gulp watch

コンパイルされたファイルはdestディレクトリに保存されます。
以下のふたつのファイルが出力されました。

dest/index.html

<!DOCTYPE html><head><title>Sample</title></head><body><h1>Sample Site</h1><p>Sample</p></body>

dest/style.css

.heading {
  color: #ffffff;
  background: #36e8ff;
}

まとめ

Gulpを使っていると、タスクが増えるにつれ、gulpfile.jsの内容が複雑になってしまいます。
そんなときはgulpfile.jsを複数のファイルに分割すると、管理がしやすくなります。

今回はgulpfile.jsをタスクごとに複数のファイルに分けて管理する方法を紹介しました。
ぜひお試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

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

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

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

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹

文字を一文字ずつ表示してみよう!

【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それをも

zsh

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

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

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

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を読み込む

Unityのダウンロードとインストールの方法【Mac】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用してゲームを開発している、とても高機能なツールです。 Unityにはいく

コメントを残す(コメントは承認後に反映されます)

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