前回の記事（開発環境について）の追記となります。前回ウェブサーバーとタスクランナーの説明をしましたが、色々調べていくとGulpだけで開発環境を構築する事が可能であるとわかりました。
特に変更をせず既存の gulpfile.jsを開くと、Node.jsの拡張機能の gulp-webserverが読み込まれていると思います。無い場合は gulp-webserverをインストールして記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 読み込み const webserver = require('gulp-webserver'); // 呼び出し function server() { return src('.') .pipe(webserver({ directoryListing: true, host: '0.0.0.0', open: true, port: 8080 })); } |
下記のコマンドでGulp タスクを実行します。
（gulpfileに書かれている全てのタスクが実行されます。）
|
1 |
$ npx gulp |
実行するとページが開きます。上記の設定の場合は 0.0.0.0:8080 が開きます。
前回紹介したhttp-serverの場合、プロジェクトを複数立ち上げた時にはポート番号が自動で振り分けられましたが、Gulpの場合は手動で portを変更する必要があります。
スマホ、iPad等の実機で確認をしたい場合は、 hostを '0.0.0.0'に変更し（初期値は’localhost’）、 IPアドレス:ポート番号でアクセス可能です。
