解決使用 php artisan serve browserSync 無法作用
Laravel Elixir 在 3.3 版本都已經幫你內建好了 browserSync
這個功能,我們透過 browserSync
可以 livereload 我們的畫面,很方便我們在開發的時候可以即時看到的我們所修改後的樣貌。
使用的方式相當容易,在你把 laravel clone 回來之後,請先執行:
$ npm install
將 package.json
內的依賴都安裝完成,接下來開啟你的 gulp.js
:
elixir(function(mix) {mix.sass('app.scss');});
可以看到以下的內容,我們只要簡單修改他成:
elixir(function(mix) {mix.browserSync();});
在執行 gulp watch
就可以了,但是問題來了!你會發現在你的 terminal 下的資訊是:
[BS] Proxying: http://homestead.app[BS] Access URLs:------------------------------------Local: http://localhost:3000External: http://192.168.1.2:3000------------------------------------UI: http://localhost:3001UI External: http://192.168.1.2:3001------------------------------------[BS] Watching files...
注意到 Proxying
的地方你需要去修改,修改的方式為:
mix.browserSync({ proxy: your host});
這些在官方文件都有寫到,那我寫這篇幹嘛呢?(揍飛)
原因是我不是透過 homestead 來當我的開發環境,因為它實在太肥大了,所以我透過本機直接開發,有興趣的朋友可以參考 @jigsaw 這篇 在 OSX 使用 Homebrew 打造精巧的 Laravel 開發環境, 雖然我也不是用 OSX 來開發(再度被揍飛)。
我們透過 php artisan serve
可以執行我們的開發環境,接著在執行 gulp watch
就可以同步了,
但是問題來了,他所監聽的 port:3000 遲遲無法載入,我一直再轉圈圈,我想說是不是設定錯誤了,
後來找到了解決方式,結果是在 php artisan serve
的地方出了問題,請改成:
$ php artisan serve --host=0.0.0.0
接著再重新執行 gulp watch
就沒問題了!