解決使用 php artisan serve browserSync 無法作用

February 17, 2016

Laravel 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:3000
    External: http://192.168.1.2:3000
 ------------------------------------
          UI: http://localhost:3001
 UI 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 就沒問題了!