gulp:タスクをファイル分割する方法

gulp:タスクをファイル分割する方法

gulpは実行したいタスクを gulpfile.js に記述していくというのをよく見かけると思いますが、タスクが増えれば増えるほど gulpfile.js 内の記述は増えていきます。もちろん特に気にならないという人もいるとは思いますが、できれば各タスクがどのような処理を行っているのか把握しやすくしたり管理しやすくしたいという場合は、以下で紹介する方法で各タスクをファイル分割することができます。

はじめに

冒頭にも書いたようにgulpは実行したいタスクをgulpfile.jsにどんどん記述していくため、タスクが増えれば増えるほど記述が増えていきます。
もちろんこれがいけないということではないのですが、やはり長くダラダラと記述が続いていると人によってはたとえ自分がつくったものであってもパッと見でどのようなタスクがあるのかわかりづらく感じたり、制作者とは別の人が見た時には尚更そのように感じることもあると思います。
これを少しでもわかりやすくしたい時に取り入れたいのがタスクの分割化で、分割化することでひとつひとつのタスクが何を行っているのかを把握しやすくすることができます。

今回はサンプルとして以下のようなよく見るファイル構成のものがあり、gulpfile.jsには既に幾つかのタスクが記述されているものをファイル分割していく想定で分割化の手順を紹介していきます。
構成の中身はそれぞれgulpfile.jspackage.jsonがファイルで「src」はディレクトリとなっており、「src」はいわゆる開発環境となります。

├─ gulpfile.js
├─ package.json
└─ /src

gulpfile.js

var gulp = require( 'gulp' ),
    sass = require( 'gulp-sass' );

gulp.task('css', function() {
  gulp.src('./src/scss/**/*.scss')
      .pipe(sass({outputStyle: 'expanded'}))
      .pipe(gulp.dest('./dist/css/'));
});

gulp.task('task1', function() {
  console.log('run task1 ...');
});

gulp.task('task2', function() {
  console.log('run task2 ...');
});

gulp.task('task3', function() {
  console.log('run task3 ...');
});

gulp.task('default', ['css', 'task1', 'task2', 'task3'], function() {
  console.log('run all tasks');
});

1. 「require-dir」をインストールし、

まず、ファイル分割やタスク読み込みに対応させるには「require-dir」モジュールが必要になるので、下記コマンドを実行して「require-dir」をインストールしておきます。

$ npm install require-dir --save-dev

$ npm i -D require-dirでも問題なし

2. 「gulpfile.js」ディレクトリを作成

次に「gulpfile.js」というディレクトリをpackage.jsonと並列に作成します。
今回のサンプル構成だとファイルのgulpfile.jsと混乱してしまうかもしれませんがそれとは別に作成して、さらにその中にはindex.jsconfig.jsonというファイルと「tasks」というディレクトリを新たに作成してください。

※ちなみに、今回はファイルのgulpfile.jsは中に幾つかのタスクが書かれているという想定なのでファイル構成の中に含めて紹介していますが、最終的には不要になるファイルなので、必要ない・紛らわしいと思う場合は削除したり別の場所にファイル移動をしてください。

それぞれ作成したファイルとディレクトリの意味は以下のようになります。

index.jsについて

index.jsには「require-dir」の読み込みやタスクを格納するディレクトリパスなどを記述していきます。
ここでは各タスクを格納するディレクトリは「/gulpfile.js/tasks」にしたいので、index.jsには下記のように記述します。(他のものにしたい場合は赤文字部分を任意のものに変更し、その場合は後ほど出てくる箇所もそれぞれ変更してください)

index.js

require('require-dir')('./tasks', { recurse: true });

config.jsonについて

config.jsonは各種設定を記述するファイルとなり、例えばgulp.src()gulp.dest()などに使用するパス指定だったり、Sassであればコンパイル後のスタイルを指定するといったパラメータ設定などを各タスクファイルには基本的に書かずに、このconfig.jsonに記述していきます。

もちろんこうすることでちょっとタスク変更したいという時でも、場合によっては該当のタスクファイルだけでなくconfig.jsonも編集する必要があるので手間に感じるかもしれませんが、逆にこうしておくことで各種設定はどのようになっているかをこのファイルだけである程度確認可能になり、他にもパス変更時などが全ファイルいじらなくてもこのファイルを変更するだけで良いというメリットもあります。

定義の仕方は様々な記述方法がありますが下記は記述例のひとつで、gulp.src()gulp.dest()で使用するパス指定とSassのコンパイル後スタイルを設定してみたものになります。

config.json

{
  "root": {
    "src": "./src",
    "dest": "./public"
  },

  "tasks": {
    "css": {
      "sassOptions": {
        "outputStyle": "expanded"
      }
    }
  }
}

「tasks」について

上の「index.jsについて」にもあるように「tasks」ディレクトリには各タスクファイルを格納していきます。

この時点で冒頭でサンプルとしてあげたファイル構成は以下のようになります。

├─ /gulpfile.js (ディレクトリ)
│  ├─ /tasks       ← ここに各タスクファイルを格納
│  ├─ index.js     ← ここに「require-dir」の読み込みなどを記述
│  └─ config.json  ← ここに各種設定を記述
│
├─ gulpfile.js (ファイル)
├─ package.json
└─ /src

3. タスクをファイル分割する

いよいよタスクをファイル分割していきます。
今回は先ほどconfig.jsonの説明時にも例として出したSass関連のタスクを「css」というタスク名で作成してみます。

まず「/gulpfile.js/tasks」の中にタスクファイルを作成していきます。
もちろんファイル名は何でもいいので任意でつけることができますが、今回はCSSのタスクを例にしているのでここではわかりやすくcss.jsというファイルを作成し、そこにCSS(Sass)に関するタスクとして下記のような記述をします。

css.js

var gulp = require( 'gulp' ),
    sass = require( 'gulp-sass' ),
    config = require( '../config' );

gulp.task('css', function() {
  gulp.src(config.root.src+'/scss/**/*.scss')
      .pipe(sass(config.tasks.css.sassOptions))
      .pipe(gulp.dest(config.root.dest+'/css/'));
});

基本的には冒頭でも紹介した分割せずにgulpfile.jsだけに記述していた時と変わらない感じですが、大きな違いとしてはサンプルソース内の赤文字部分で、これらの部分でconfig.jsonの内容の読み込んだり各種設定を使用しています。

あとは$ gulp cssを実行すれば、今回のサンプルタスクの場合はconfig.jsonで設定したconfig.root.srcのパス内にあるscssconfig.jsonで設定したオプションを適用しながらコンパイルされ、config.jsonで設定したconfig.root.destのパス内にある「css」ディレクトリに出力されます。

ここでは簡単なタスクファイルをひとつだけ作成する形で紹介しましたが、他のタスクについても同様にそれぞれファイルを「/gulpfile.js/tasks」の中に作成してタスクを記述していき、必要であれば設定などはconfig.jsonに記述するという流れでタスクをファイル分割して管理することができます。

例えば、もともと冒頭で紹介したサンプルのファイル構成時のgulpfile.jsには上記「css」タスク以外にも「task1」「task2」「task3」という3つのタスクに加え、さらにそれらを一度に実行するタスクなど記述されている「default」タスクも記述されていましたが、それらをそれぞれファイル分割した場合は以下のようなファイル構成になります。
また、分割後はもともとタスクが記述されていたgulpfile.jsも不要となるので削除して問題ないです。

├─ /gulpfile.js
│  ├─ /tasks
│  │  ├─ css.js
│  │  ├─ task1.js
│  │  ├─ task2.js
│  │  ├─ task3.js
│  │  └─ default.js
│  ├─ index.js
│  └─ config.json
│
├─ package.json
└─ /src

以上、gulpのタスクをファイル分割する方法でした。
gulpfile.jsが長くなっても気にならない人には必要ないですし、逆に分割した方が使いにくいと感じる人もいるとは思いますが、長いgulpfile.jsをどうにかしたいと思っている人は是非試してみてください。
また、基本的にやっていることはほぼ変わりませんが、いろいろ割愛しているのもあってここでの説明だとよくわからなかったという人は以下でもgulpタスクのファイル分割について書かれているので参考にしてみてください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。