GulpでローカルWEBサーバーを起動する方法 (gulp-webserver)

投稿者 : OSCA

[PR] "出川哲朗の充電させてもらえませんか?"で登場したロケ地を紹介するファンサイト「あの場所へ行こう!」はこちら。

概要

 様々なタスクを自動化してくれる「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動作させるパス“/”
livereloadtrue に設定すると、ファイルの更新を検知してブラウザを自動的にリロードしてくれる。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サイトの制作をする際などの動作確認にぜひ利用してみてください。

Gulp入門に戻る

Gulpのトップへ戻る

著者 : OSCA

OSCA

Java, PHP 系のWEBエンジニア。 WEBエンジニア向けコミュニティ「WEBエンジニア勉強会」を主催。 個人として何か一つでも世の中の多くの人に使ってもらえるものを作ろうと日々奮闘中。
@engineer_osca