概要
様々なタスクを自動化してくれる「Gulp」を利用してWEB制作を行なっていると、開発中のWEBサイトを確認するためにローカル環境にWEBサーバーを立ち上げたい場合があります。 本稿では、Gulp からWEBサーバーの起動を実現する gulp-webserver について解説します。
本稿のゴール
本稿を読み終えた際に、どのようなことが実現できるのか、まずは本稿のゴールを示します。 本項では次のようなディレクトリ構成のプロジェクトを想定します。
/ (プロジェクトのルート)
├ /public
│ └ index.html
│
├ /src
└ gulpfile.js
とてもシンプルに、人がコーディングするファイルは「src」ディレクトリに入っていることとし、そこから作り出される成果物は「public」ディレクトリに出力されるとします。 ここでは index.html が出力されるとします。 本稿で実現したいことは、「public」ディレクトリに出力されたファイルを gulp-webserver で起動するローカルWEBサーバーで動かし、動作確認できるようにすることです。
gulp-webserver の導入・インストール
「概要」に記載した通り、Gulp からローカルWEBサーバーを起動するには gulp-webserver が便利です。 gulp-webserver は、Node.js のモジュールとして提供されていますので、Gulp と共に、次のような npm install コマンドでインストールすることが出来ます。
$ npm install -D gulp
$ npm install -D gulp-webserver
利用方法
「本稿のゴール」で述べたように、ここでは「public」ディレクトリをローカルWEBサーバーの公開ディレクトリとなるように、gulp-webserver が起動するタスクを書いてみます。 gulpfile.js の記述例は次のようになります。
コードの2行目で gulp-webserver モジュールを読み込み、6行目の pipe() の引数で呼び出しています。 gulp-webserver を呼び出す際にはオプションを指定でき、指定できる主なオプションは以下の通りです。
| オプション | 概要 | 初期値 |
|---|---|---|
| host | 起動時のホスト名 | “localhost” |
| port | 起動時のポート番号 | 8000 |
| path | 動作させるパス | “/” |
| livereload | true に設定すると、ファイルの更新を検知してブラウザを自動的にリロードしてくれる。 | false |
| directoryListing | ディレクトリ・リスティングを有効にするか否か。 | false |
| open | 起動時にブラウザを起動するか否か。 | false |
全てのオプション情報は、公式ページをご覧ください。
Gulpタスクの実行
上のように gulpfile.js を作成したら、Gulpタスクを実行してみましょう。 次のようなコマンドで実行できます。 実行するとブラウザが立ち上がり、index.html が表示されます。
$ npx gulp
- ※1 タスク名を「default」にしている場合は、Gulp のデフォルトタスクとして認識されます。 Gulp 実行時のタスク名の指定を省略できます。
- ※2 本項ではローカルに Gulp をインストールしているため、npx で gulp を実行しています。
おわりに
本稿では、Gulp からローカルWEBサーバーの起動を実現する gulp-webserver について解説しました。 静的なWEBサイトの制作をする際などの動作確認にぜひ利用してみてください。
