Gulpファイルの肥大化を食い止める！ファイル分割テクニック ｜ SiTest (サイテスト) ブログ

Node.js のタスクランナー、Gulp はとても便利です。
静的なWebサイトを作る時も既にフロントエンジニアにとって欠かせない存在になってきました。

しかし、Gulpを使ってあんな事やこんな事が出来るからと、
次々とライブラリを足していくと設定ファイルが肥大化してしまい、
メンテナンスが非常に辛くなってしまいます。

そこで、弊社エンジニアが実際に行っている設定ファイルの分割テクニックをご紹介していきます。

下記は Gulp コマンドの一連の流れです。

• １．Node.jsとして gulpfile.js を実行
• ２．gulp.task の宣言を記憶してタスク一覧に登録していく
• ３．サブコマンドを解析して、タスクを実行

普通に「node gulpfile.js」コマンドを実行して、
console.logならぬgulp.taskをGulpコマンドが監視しているとイメージしやすいかもしれませんね。
普通のNode.jsと同じイメージでファイルを分割できます。

今回ご紹介するテクニックは下記の3つです。

• １．タスク毎にファイル分割
• ２．fs.readdirSync と併用して保守の手間を減らす
• ３．AltJS と併用してコードの記述量を減らす

今回は架空のプロジェクトを用意しました。
このプロジェクトのgulpfile.jsに対してこれらのテクニックを1つずつ当てはめていきましょう。

あなたはHTML, CSS, JavaScriptで構成された静的なWebサイトを運営しています。
静的ジェネレータとしてJade, Stylus, CoffeeScriptファイルから各種ファイルを吐き出すよう、
Gulpを導入してその仕組みを構築しました。

とある日、特設サイトとして全く別デザインのページを2つ公開することになりました。
ぞれぞれ「プレビュー機能」と「レポート機能」という名前ですので、「preview, report」というフォルダを切って管理することにしました。
また、CoffeeScript をより強化した LiveScript という AltJS も利用したいと日頃から考えています。
既存のファイルも多数存在しているので、暫くは2つのAltJSファイルがプロジェクト内に同居させて、徐々に乗り換えていこうと考えています。

この段階のgulpfile.jsがこちらです。
200行を超える重量級gulpfile.jsを前にうんざりしてきました。もうgulpfile.jsは触りたくありません。
ひどい有様なのに、JavaScriptファイルやCSSファイルを読み込む数が多くてパフォーマンスが悪いから、1ファイルにまとめて欲しいという依頼まで出てきてしまいました。

このままでは流石にプラグインやタスクの追加が難しいので、
一度ファイル分割を行ってこれらの改修に備えていきましょう。

Gulp はタスク毎にファイルを分割しやすいよう設計されています。
各タスクの一つ一つの動作は独立しているからです。

gulpfile.jsファイルの実行が完了した段階で
gulp.taskメソッド実行して宣言された全タスクが使用できます。
requireした先の、外部のJavaScriptファイル内でgulp.taskメソッドを呼び出しても問題ありません。

早速先ほどのプロジェクトに対してこのテクニックを当てはめました。
修正後のgulpfile.jsはとてもシンプルな形式になりました。
各タスクはgulpというフォルダを作成して、「タスク名.js」の形式で分割して管理しています。

["clean", "jade", "stylus", "coffee", "livescript", "build", "watch", "default"]
.forEach(function(it){
  require("./gulp/"+it+".js");
});

gulpフォルダ内に格納しましたが、
各タスクのsrcはgulpfile.jsが起点になっているので各タスクのソースコードは変更していません。
下で実際に動作してファイルが生成されることを確認しました。

$ gulp --tasks
[13:58:59] Using gulpfile ~/xxx/gulpfile-example/answers/technique-1/gulpfile.js
[13:58:59] Tasks for ~/xxx/gulpfile-example/answers/technique-1/gulpfile.js
[13:58:59] ├── clean
[13:58:59] ├── jade:app
[13:58:59] ├── jade:preview
[13:58:59] ├── jade:report
[13:58:59] ├─┬ jade
[13:58:59] │ ├── jade:app
[13:58:59] │ ├── jade:preview
[13:58:59] │ └── jade:report
[13:58:59] ├── stylus:app
[13:58:59] ├── stylus:preview
[13:58:59] ├── stylus:report
[13:58:59] ├─┬ stylus
[13:58:59] │ ├── stylus:app
[13:58:59] │ ├── stylus:preview
[13:58:59] │ └── stylus:report
[13:58:59] ├── coffee
[13:58:59] ├── livescript
[13:58:59] ├── build
[13:58:59] ├── watch
[13:58:59] └── default

$ gulp build
[14:01:14] Using gulpfile ~/work/blog/gulpfile-example/answers/technique-1/gulpfile.js
[14:01:14] Starting 'build'...
  ...中略...
[14:01:14] Finished 'build' after 84 ms
[14:01:15] Using ./src/scripts/coffee.coffee
[14:01:15] Using ./src/scripts/livescript.ls
[14:01:15] Using ./src/templates/preview/index.jade
[14:01:15] Using ./src/templates/index.jade
[14:01:15] Using ./src/templates/report/index.jade
[14:01:15] Using ./src/stylesheets/report/css.styl
[14:01:15] Using ./src/stylesheets/css.styl
[14:01:15] Using ./src/stylesheets/preview/css.styl

$ find . | grep '\./dist/'
./dist/css
./dist/css/app
./dist/css/app/css.css
./dist/css/preview
./dist/css/preview/css.css
./dist/css/report
./dist/css/report/css.css
./dist/html
./dist/html/app
./dist/html/app/index.html
./dist/html/preview
./dist/html/preview/index.html
./dist/html/report
./dist/html/report/index.html
./dist/scripts
./dist/scripts/coffee.js
./dist/scripts/livescript.js

これで新しいプラグインやタスクの追加も怖くはありませんね。
しかし、タスクが増えた場合は毎回gulpfile.jsを編集するという一手間が必要となります。
ちょっとした手間でgulpfile.jsがメンテいらずとなるので、次のテクニックもセットで使ってみましょう。

Node.jsにはファイルの読み書きを司るfsライブラリがデフォルトで実装されています。
gulpfile.jsと同じディレクトリにtest.jsというファイルを作成して動きを確認してみましょう。
ドキュメント通りに「.」や「..」を排除したファイル一覧の配列が取得できました。

$ cat test.js
var fs = require("fs");

fs
  .readdirSync(__dirname+"/gulp")
  .forEach(function(it){
    console.log(it);
  });

$ node test.js
build.js
clean.js
coffee.js
default.js
jade.js
livescript.js
stylus.js
watch.js

こちらは上記のテクニックを反映したプロジェクトです。
実際のgulpfile.jsではエディタやエクスプローラー等でタスクの編集をしている間に一時ファイルが混入してしまう可能性がありますので、
ファイル名の末尾が「.js」で終わるファイルのみを採用しています。

gulp 3.7 リリース: CoffeeScriptネイティブに – Qiita

package.jsonのdevDependenciesに記載すれば良いとのこと、
対応している様式はGulpプロジェクトが読み込んでいるinterpretライブラリに載っています。

2016年6月現在のGulpのバージョンは3.9.1です。
リリースノートによるとGulp 3.9に伴い依存しているinterpretが更新されているようです。
実際にGulp3.9.1が依存しているinterprentライブラリのバージョンを確認した所、1.0.0でした。
Qiitaの記事から1年間でTypeScriptやbabelにも対応している事がわかります。

グラッドキューブではLiveScriptを扱って開発していますので、
このようにプロジェクトを書き換えました。

Gulpは性質上、CoffeeScriptやLiveScriptのようなコードの記述量が減るAltJSとの相性が良いです。
特にCoffeeScriptはJavaScriptが読み書き出来る人ならばすぐに入っていける敷居の低さがあります。
積極的に検討してみてください。

いかがでしたでしょうか？

私も以前gulpfile.jsの肥大化で苦しみましたが、
現在はこのようなテクニックにより細分化することに成功し、とても作業しやすく感じています。

もし、この記事がお役に立てれば幸いです。
以上、「Gulpファイルの肥大化を食い止める！ファイル分割テクニック」でした。
最後まで読んでいただきありがとうございました。