【gulp】タスクを外に出してgulpfile内をスッキリさせる方法をメモメモ

【gulp】タスクを外に出してgulpfile内をスッキリさせる方法をメモメモ

みなさま、こんにちは。実は『ちはやふる』が大好きな kouraku です。
最近、huluで嫁に『ちはやふる』TV版を全話見せ、その魅力に引きずり込むことに成功しました。まぁ、元々百人一首とか好きだった嫁ですから、『ちはやふる』を好きになってもらうのはそれほど難しいことは無かったですけどね（笑）。

さて、gulpに色々と機能を盛り込んでいくと、gulpfileが長くなって見通しがだんだん悪くなってきますよね。そんな時、やっぱりタスクを外だししたい！って思ってくるわけで、その方法について今回はメモメモ。

※前回までの記事を元に進めていきます。

設定ファイルの外部ファイル化

タスクを外出しする前に、設定情報なんかも外部に持たせてまとめて管理するようにしてみます。
今後どのような展開をするかは分かりませんが、きっと役に立つことでしょう。

まずは、これまでのソースから、
・サーバ情報
・パス情報
を設定情報として保存してみます。

サーバ情報は、BrowserSyncにある以下の設定を取り出します。
・startPath
・port
・open

また、パス情報はhtdocsのみとします。

何を管理させるかを決めたところで、早速 json 形式で保存します。
ここでは、ファイル名はシンプルに gulpconfig.json とします。

[gulpconfig.json]
{
     "server": {
          "startPath": "index.html",
          "port": 3040,
          "open": "external"
     },
     "paths": {
          "pub": "htdocs/"
     }
}

次に、作成した設定情報ファイルを gulpfile.coffee 内で読み込ませるための記述を追記します。

[gulpfile.coffee]
　：
# gulp設定情報読込
config = require './gulpconfig.json'
　：

それでは、外部ファイルに設定した情報がちゃんと使えるか確認します。
まずは BrowserSync の設定を書き換えます。

[gulpfile.coffee]
　：
gulp.task 'browser-sync', ->
     plugins.browserSync.init
          server:
               baseDir: config.paths.pub
               middleware: [
                    plugins.connectSSI(
                         baseDir: __dirname + '/' + config.paths.pub
                         ext: '.html'
                    )
               ]
          startPath: config.server.startPath
          port: config.server.port
          open: config.server.open
     return
　：

はい、とりあえずここまで書き換えたところで、

$ gulp

とコマンドを叩いてみます。
すると・・・これまで通り動くことが確認できました。

他のタスクに対しても、同様に書き換えて置きましょう（ここでは省略します）。

外部ファイル化したタスクを読み込ませる機能をつくる

設定情報を外に出したところで、いよいよタスクの外部ファイル化に移ります。

まずは、タスクを入れておくディレクトリを作ります。ここでは、分かりやすく gulpfile と同じ階層に gulptasks を置くことにします。
ディレクトリ構成はこんな感じです。

┬ [gulptasks] ─── タスク用ディレクトリを追加
├ [htdocs]
├ [node_modules] ─── plugins
├ gulpconfig.json
├ gulpfile.coffee
├ gulpfile.js
└ package.json

次に、今回の目的のメインである外部ファイル化したタスクを読み込ませる関数を作成します。
この関数自身も、外部ファイルとして作成します。
ここでは、先ほど作成した gulptasks ディレクトリ内に taskload.coffee という名前にします。

続いて、関数の中身を記述していきます。
処理の流れとしてはどんな感じにすれば良いでしょうか？

①gulptasks内のファイル一式を取得して
②取得したファイルをrequire

これだけでとりあえずは良いでしょう。
その前に、上記処理を行うために fs（ファイル読み書き機能） をインストールする必要があります。

$ npm install fs --save-dev

インストールが完了したら、gulpfile.coffeeの上部requireの箇所に追加します。

[gulpfile.coffee]
　：
plugins.fs = require 'fs'
　：

続いて、plugins を外部ファイルでも利用できるように、グローバルオブジェクトを作成して入れ込みます。
先ほど設定した config も追加しておきましょう。

[gulpfile.coffee]
　：
# global設定
global.prop =
     plugins: plugins
     config: config
　：

ここまで準備ができましたので、いよいよ関数の記述をしていきます。

[taskload.coffee]
plugins = prop.plugins

# gulptaskのタスクをロード
module.exports = do ->
     files = plugins.fs.readdirSync(__dirname)
     files.forEach (file) ->
          require(__dirname + '/' + file)
          return

今回は決め打ち処理なので、こんな感じで大丈夫そうですね。

plugins = prop.plugins

でグローバルオブジェクトに入れた plugins 情報を ローカル変数 plugins に移します。

module.exports = do ->

で外部から利用できるようにします。

     files = plugins.fs.readdirSync(__dirname)

でファイル一覧を取得し、

     files.forEach (file) ->
          require(__dirname + '/' + file)
          return

で一覧を一件ずつファイルを取り出し require をかけています。
これでgulptasks内にある外だししたタスクを呼び出す準備が完了しました。

タスクの外部ファイル化

続いて、これまで作ってきたタスクを外出ししたいと思います。
過去3回のメモ書きで作ったタスクは、以下の5つになります。

・browser-sync
・reload
・watch
・ssiChangeVirtual
・ssiChangeFile

ただ、これをそのまま5つのファイルにするのも細かすぎると思うので、関連するものはまとめてみます。

・BrowserSyncの機能を使うもの
　browser-sync, reload
・監視
　watch
・SSI変換
　ssiChangeVirtual, ssiChangeFile

それでは、ファイルをそれぞれ作っていきます。
外部ファイル化するには、先ほどの taskload 同様、以下の手順で記述していけばOKです。

①gulpをrequire
②設定情報を取得
③外部から利用できる状態にする
④タスクの記述をコピペ（一応修正が必要がないか確認！）

BrowserSync関連を上記手順に従って作ります。

[gulptasks/browser-sync.coffee]
gulp = require 'gulp'
plugins = prop.plugins
config = prop.config
parentPath = plugins.path.resolve("")

# BrowserSync
module.exports = do ->

     # BrowserSyncの設定
     gulp.task 'browser-sync', ->
          plugins.browserSync.init
               server:
                    # ルートを指定します
                    baseDir: config.paths.pub
                    # middlewareを使う設定
                    middleware: [
                         # SSIの設定情報
                         plugins.connectSSI(
                              baseDir: parentPath + '/' + config.paths.pub
                              ext: '.html'
                         )
                    ]
               # gulp起動時に開くページを指定します
               startPath: config.server.startPath
               # ポートを指定します（デフォルトは3000）
               port: config.server.port
               # External IPでブラウザを開けます（スマホで確認する時に重宝）
               open: config.server.open
          return

     # リロード
     gulp.task 'reload', ->
          plugins.browserSync.reload()
          return

はい、こんな感じになります。
この中で、実は微妙に違う部分があります。

parentPath = plugins.path.resolve("")

と

baseDir: parentPath + '/' + config.paths.pub

のSSIを利用する場合の設定箇所です。

__dirname はカレントパスを取ってきますが、現時点でカレントは gulptasks の中になっていますので、親のディレクトリを設定してあげる必要があります。
node.js で親のディレクトリを取得するにはどうすれば良いか。そこで使用する機能が path です。

では、早速 path をインストールしましょう。

$ npm install path --save-dev

インストールが終わったら、gulpfile.coffee の上部requireの箇所に追加します。

[gulpfile.coffee]
　：
plugins.path = require 'path'
　：

これで、plugins.path.resolve("") とすることで、親ディレクトリの絶対パスを取得することができるようになりました。

続いて、watch.coffee と ssi.coffee も作成していきます。
特に特徴はないので、ここでは省略させていただきます。
（サンプルデータをご参照ください）

あとは、gulpfile.coffee の中から不要となったタスクの記述を削除しましょう。

はい、これでタスクの外出し作業が完了です。
gulp とコマンドを叩いて、これまで通りの動作をするか確認しましょう。
問題なく動いてくれるはずです。

今回のサンプルデータ

まとめ

設定ファイルとかも、事前に準備しておかないと、色々面倒なことになったりしますよね。
まぁ、プロジェクトの規模とかにもよりますが、小さい内から整えた方が、後々きっと楽になるはず・・・！今回のメモもデフォルトの設定として、今後も使用していく予定です。

そうそう、話がすっかりそれてしまいましたが（この流れが本題！？→）、今まで後輩の女の子に借りて読んでいた漫画『ちはやふる』、嫁の同意も得て、最近ようやく自分で揃えることができました。最新刊の発売もそろそろなので、夫婦揃ってソワソワです。

そしてそして、今年は夏季休暇を使って・・・なな、なんと！！近江神宮へ行くことにしました！
（ﾊﾟﾁﾊﾟﾁﾊﾟﾁ）
いやぁ～、『ちはや』熱上げまくりで、夏の暑さなんかも吹っ飛ばす勢いが今の自分にはある！！

そんな浮かれ気分の kouraku でした。

アルバイトの方を募集中！

シーブレインでは、一緒に働いてくれるアルバイトの方を募集しております。
興味がある方は、下記リンクをチェックしてください。たくさんのご応募お待ちしております！
アルバイト募集に関する詳細はこちら

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ