はじめに
gulpは長い事つかってますが、 フロントの方が入れてくれた環境を基に使っているのでゼロから学んだ経験は乏しいです。 (自分はサーバサイド)
改めてゼロから設定していると、
gulpfile.jsのtaskが肥大化してわかりにくくなるのでファイルを分けたくなる事があります。
そんなときの自分メモ
アジェンダ
- ファイルに分けるには
- requireDirインストール
- 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
サンプル
おわり
require-dirですっきり\(^o^)/