gulp-webserverプラグインは、開発用のWebサーバーを簡単に立ち上げることができるgulpプラグイン。gulp-connect(すでにdeprecated)を書き直したものである
ライブリロード機能も付いてるので gulp-livereload などは不要。ブラウザで表示確認しながら作業に専念することができる
node.jsのサーバーなのでPHPは動かない。PHPを動かしたい場合はApache(MacならMAMPにも含む)やnginxを使うこと
インストール・使い方
gulpがインストールされていることが前提
gulp-webserver プラグインのインストール
npmで開発用としてインストール
npm install --save-dev gulp-webserver
(今回はプロジェクトディレクトリに入れる。-g オプションでグローバルに(ホームディレクトリ直下))
gulpfile.js サンプル
//サンプルのディレクトリ構成
test
|`gulpfile.js
|`app
| `index.html
| `about.html
|`node_modules
| `gulp-webserver(上記でインストールしたもの)
gulpfile.js
var gulp = require('gulp'),
webserver = require('gulp-webserver');
//Webサーバー
gulp.task('webserver', function() {
gulp.src('app') //Webサーバーで表示するサイトのルートディレクトリを指定
.pipe(webserver({
livereload: true, //ライブリロードを有効に
//directoryListing: true //ディレクトリ一覧を表示するか。オプションもあり
}));
});
/**
* デフォルトタスク
*
* コマンド'gulp'で実行される
*/
gulp.task('default', ['webserver']);
実行
ターミナルで gulp
Webサーバーが立ち上がる (終了は Control + c)
[10:24:25] Using gulpfile ~/Desktop/gulp_webserver/gulpfile.js
[10:24:25] Starting 'webserver'...
[10:24:25] Webserver started at http://localhost:8000
[10:24:25] Finished 'webserver' after 14 ms
[10:24:25] Starting 'default'...
[10:24:25] Finished 'default' after 8.64 μs
結果
ブラウザで http://localhost:8000 にアクセスすると、index.html が表示される
http://localhost:8000/about.html にアクセスすると、about.html が表示される
存在しないファイルにアクセスすると"Cannot GET /ファイル名"と表示（オプションで404ページ設定可）
ブラウザを見ながら、エディタでファイルを変更保存すると、ライブリロードが機能していることが確認できる。