Gulpを使って開発を進めているいると、だんだんとgulpfile.jsが複雑になり、どこになにが書いてあったか分からなくなることがあります。
そんなときは、gulpfile.jsを分割して管理すると分かりやすくなり、作業効率も上がります。
今回はGulp4でgulpfile.jsを分割して管理する方法を紹介します。
ディレクトリ構成について
今回は、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.jsdevディレクトリには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をタスクごとに複数のファイルに分けて管理する方法を紹介しました。
ぜひお試しください。
