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

スポンサードリンク

関連コンテンツ

オススメ記事

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

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

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

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

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

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