gulp-webserverはgulpから簡易的なwebserverを立ち上げるgulp-plugin
live reload機能等もあり開発中は大変お世話になっている(詳しくはこちら)
開発ではMacを使っていて、Macから確認する分にはいいのだが、やはり実機で確認したい
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>こんにちは、世界</p>
</body>
</html>
同じWi-Fi環境に接続できれば話は早いのだが、僕の環境ではそれは叶わなかったので
Macのインターネット共有機能を使って実現する
Mac側の設定
-
gulp-webserverのオプションでhostに'0.0.0.0'を指定
gulpfile.jsvar gulp = require("gulp"); var webserver = require("gulp-webserver"); gulp.task('webserver', function() { return gulp.src('sample') .pipe(webserver({ host: '0.0.0.0', // gulp-webserverのオプションでhostに'0.0.0.0'を指定 livereload: true, open: true })); });
あとはいつも通り起動
$ gulp webserver
[11:21:21] Using gulpfile gulpfile.js
[11:21:21] Starting 'webserver'...
[11:21:22] Webserver started at http://0.0.0.0:8000
[11:21:22] Finished 'webserver' after 249 ms
iPhoneから確認
ブラウザから先ほどメモったIPにアクセス
(今回ならhttp://169.254.200.8:8000/
にアクセス)
やったぜ!Androidでもなんでも繋げば見れた
live reloadも効くのですばらしい
所感
終わってみれば設定もやることもめっちゃ簡単だったが、ここまでたどり着くのに相当苦労してしまった
というかそもそもgulp-webserverのページに書いてた
Why can't I reach the server from the network?
Solution: Set 0.0.0.0 as host option.
ただネットワーク周りのことは結局全然理解できてないので勉強しなきゃなーと思う