クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

gulp.js

gulp.js XAMPP, MAMPが不要に!Webサーバを起動しよう(gulp-webserver)

投稿日:2018年11月18日 更新日:

ローカルでの開発環境のためには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/にアクセスしてみましょう!
作成した画面が表示されていれば大成功です。

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

-gulp.js

執筆者:

関連記事

no image

gulp.js sassファイルが更新されたらコンパイルするタスクを作成する(gulp.watch)

ファイル更新の度にgulpコマンドを実行するのが面倒くさい! gulpを使っているとファイル更新の度にgulpコマンドを打つのが面倒になってきます。 そんな時はgulp.watchを使ってみましょう! …

no image

gulp.js コンパイル時にエラーになっても中断させない(gulp-plumber)

例えば、gulp.watchでsassをコンパイルするタスクを動かしていた場合、sassの記述を間違えてファイルを保存してしまうと、コンパイルエラーとなり、gulp自体が停止してしいまいます。 [cr …

no image

gulp.js 一番簡単なサンプルを作って覚えよう!

gulp(ガルプ)を使うことが一般的になってきました。 私も仕事でgulpを使う機会が多くなってきたので基本的な使い方を書き留めておこうと思います。 良ければ見ていってください。 gulp(ガルプ)っ …


comment

メールアドレスが公開されることはありません。