ローカルでの開発環境のためにはWebサーバが必要となります。
そのためにXAMPPやMAMPをインストールして使ってきましたが、gulp用のWebサーバも準備されています。
その名も「gulp-webserver」です(そのまま!)。
gulp-webserverを利用すると、gulpを起動するだけで開発用のWebサービスが起動します。
開発にWebサービスだけが欲しい!なんて時に便利です。
gulp-webserver のインストール
gulpとgulp-webserverをインストールしましょう!
他のNode.jsのモジュールと同様npm
コマンドで簡単にインストール可能です。
HTMLファイルの準備
表示したいHTMLを準備しましょう。
内容も場所もどこでもOKですが、今回はapp
ディレクトリの中にindex.html
を準備します。
内容は何か表示されれば何でもOKです!
gulpfile.js
2行目でモジュールを読み込みます。
5行目でドキュメントルートを指定します。
今回はapp
ディレクトリにindex.html
を作成したので、app
を指定します。
6〜8行目がgulp-webserver
の処理ですね。
とても簡単でpipe
で繋いでwebserver()
とするだけでOKです。
オプションは無くてもOKですが、今回はport
だけ指定しておきます。
デフォルトだとport: 8000
となっていますが、今回はport: 9000
で起動してみます。
gulpの実行
これで準備完了です。
早速gulpを実行してみましょう
次のようなログが出ていればgulp-webserverが正常に起動されています。
次のようなログが出ていればgulp-webserverが正常に起動されています。
画面表示確認
ブラウザを起動して、http://localhost:9000/にアクセスしてみましょう!
作成した画面が表示されていれば大成功です。
オプションも色々とあるので、公式ページも参照してくださいね。