tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

【gulp】gulp taskをファイルに分割 - require-dir

はじめに

gulpは長い事つかってますが、 フロントの方が入れてくれた環境を基に使っているのでゼロから学んだ経験は乏しいです。 (自分はサーバサイド)

改めてゼロから設定していると、
gulpfile.jsのtaskが肥大化してわかりにくくなるのでファイルを分けたくなる事があります。

そんなときの自分メモ

f:id:tweeeety:20180524215025p:plain

アジェンダ

  1. ファイルに分けるには
  2. requireDirインストール
  3. requireDir使ってみる

1. ファイルに分けるには

requireDirというNode helperを使います。
https://www.npmjs.com/package/require-dir

2. requireDirインストール

# サラからならgulpも
$ npm install --save-dev gulp

# require-dirインストール
$ npm install --save-dev require-dir

3. requireDir使ってみる

構成

例ですが、以下のようなtasksディレクトリ以下に分割したtaskをおきます

$ tree
.
├── gulpfile.js
├── package.json
└── tasks
    ├── task1.js
    ├── task2.js.bk
    └── task3.js
gulpfile.js

gulpfile.jsの中身は以下のように書くだけです。

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

tasksディレクトリ配下に書いたtaskを実行してくれます

実行
$ gulp task1
[15:42:30] Using gulpfile ~/gulp-task-divide/gulpfile.js
[15:42:30] Starting 'task1'...
i am task1!!
[15:42:30] Finished 'task1' after 129 μs

$ gulp task2
[15:42:32] Using gulpfile ~/gulp-task-divide/gulpfile.js
[15:42:32] Starting 'task2'...
i am task2!!
[15:42:32] Finished 'task2' after 135 μs

$ gulp task3
[15:42:34] Using gulpfile ~/gulp-task-divide/gulpfile.js
[15:42:34] Starting 'task3'...
i am task3!!
[15:42:34] Finished 'task3' after 120 μs

サンプル

github.com

おわり

require-dirですっきり\(^o^)/