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をタスクごとに複数のファイルに分けて管理する方法を紹介しました。
ぜひお試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

Pythonでrandomを使う。乱数の生成やランダムに選択する関数まとめ

今回は、Pythonでランダムな数値を生成したり、リストのなかからランダムに選択、リストの順番をシャッフルする方法など、randomモジュールで使える関数をまとめました。 しっかり覚えて、目的

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

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

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

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

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

Markdown記法一覧。最速で文章を書くには、これを覚えるべし!

Markdownは文章を記述するための言語です。サイト上で文章を作るとき、タグを使うことで、その文章に様々な意味を持たせます。 しかし、直接タグを打ち込むのは大変ですし、エディタの機能を使おう

Eclipseを日本語化する方法(Pleiadesプラグインの使い方)

Eclipseの公式サイト(https://www.eclipse.org/)からダウンロードしたものは、表示が英語になっています。今回は、公式サイトからダウンロードしたEclipseを、Pleia

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。しかし、まだマップを配置《はいち》しただけで

【Unity 2D】画像のアスペクト比を固定して画面全体に表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。 さて、今回はUnity2Dでのゲーム開発において、アスペクト比を固定し

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

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