gulp.js XAMPP, MAMPが不要に！Webサーバを起動しよう（gulp-webserver）

投稿日：2018年11月18日更新日：2019年2月10日

ローカルでの開発環境のためにはWebサーバが必要となります。
そのためにXAMPPやMAMPをインストールして使ってきましたが、gulp用のWebサーバも準備されています。

その名も「gulp-webserver」です（そのまま！）。
gulp-webserverを利用すると、gulpを起動するだけで開発用のWebサービスが起動します。

開発にWebサービスだけが欲しい！なんて時に便利です。

gulp-webserver のインストール

gulpとgulp-webserverをインストールしましょう！
他のNode.jsのモジュールと同様npmコマンドで簡単にインストール可能です。

npm install --dev-save gulp
npm install --dev-save gulp-webserver

1 2	npm install --dev-save gulp npm install --dev-save gulp-webserver

HTMLファイルの準備

表示したいHTMLを準備しましょう。
内容も場所もどこでもOKですが、今回はappディレクトリの中にindex.htmlを準備します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>gulp-serverで表示されている画面だよ！</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>gulp-serverで表示されている画面だよ！</p>

</body>

</html>

内容は何か表示されれば何でもOKです！

gulpfile.js

var gulp = require('gulp');
var webserver = require('gulp-webserver');

gulp.task('default', function() {
  gulp.src('app')
    .pipe(webserver({
      port: 9000
    }));
});

var gulp = require('gulp');

var webserver = require('gulp-webserver');

gulp.task('default', function() {

gulp.src('app')

.pipe(webserver({

port: 9000

}));

});

2行目でモジュールを読み込みます。
5行目でドキュメントルートを指定します。
今回はappディレクトリにindex.htmlを作成したので、appを指定します。

6〜8行目がgulp-webserverの処理ですね。
とても簡単でpipeで繋いでwebserver()とするだけでOKです。
オプションは無くてもOKですが、今回はportだけ指定しておきます。
デフォルトだとport: 8000となっていますが、今回はport: 9000で起動してみます。

gulpの実行

これで準備完了です。
早速gulpを実行してみましょう

gulp

gulp

次のようなログが出ていればgulp-webserverが正常に起動されています。

[17:57:29] Starting 'default'...
[17:57:29] Webserver started at http://localhost:9000
[17:57:29] Finished 'default' after 8.68 ms

[17:57:29] Starting 'default'...

[17:57:29] Webserver started at http://localhost:9000

[17:57:29] Finished 'default' after 8.68 ms

次のようなログが出ていればgulp-webserverが正常に起動されています。

画面表示確認

ブラウザを起動して、http://localhost:9000/にアクセスしてみましょう！
作成した画面が表示されていれば大成功です。

オプションも色々とあるので、公式ページも参照してくださいね。

執筆者：sasaki