Gulpで快適ウェブ開発 gulpfile.jsの分割

Gulpでなんらかの自動化を行うときにgulpfile.jsに全てのタスクを記述していくのですが、いつまでもそのようにしているとソースコードの記述量が膨大になってしまい、管理が大変になってしまいます。gulpfile.jsを機能単位で分割して管理をしやすくしていきましょう。

分割する前

require-dirをインストール

ファイル構成

分割した後

単純な例でgulpfile.jsの分割をやってみました。

Gulpによるローカルサーバの立ち上げとリロードの自動化

ウェブサイトを構築するときにはローカルサーバを立ち上げることが必要になると思います。Gulpでローカルサーバの立ち上げとリロードの自動化を行います。

gulpfile.jsにタスクを追加していきます。browser-syncタスクでサーバを立ち上げ、watchタスクでHTML,CSS,JavaScriptの変更を監視します。watchタスクで変更があればreloadタスクを実行し、ブラウザをリロードします。

パッケージのインストールを行います。

Gulpを実行します。

それではウェブサイトの構築をはじめましょう。次回はもっと複雑なタスクにも挑戦してみます。