[Laravel] 如何使用 Elixir 的 BrowserSync

我想這是常常遇到的雷, 沒有記錄下來總是會忘記

目前測試的版本:

• Laravel 5.2.29
• laravel-elixir 5.0.0

1. 建立 Laravel 專案

composer create-project laravel/laravel myproject --prefer-dist

2. npm 安裝套件

npm install

3. 修改專案中的 gulpfile.js

mix.browserSync({
    proxy : 'localhost:8000'
});

更多 BrowserSync 的選項可以看這裡: https://www.browsersync.io/docs/options/

4. 用 php 內建 server 啟動專案

php artisan serve --host 0.0.0.0

務必要加上 --host 0.0.0.0 不然不會成功, 不要問為什麼, 踩過 N 次的雷的結論!!!

5. 執行瀏覽同步

gulp watch

如果你不是用 Homestead, 請再次確認 Proxying 為你設定的 proxy 而非 http://homestead.app

它會幫你開啟預設瀏覽器, 開啟同步的 URL, 我的範例為 http://localhost:3000

BrowserSync 的 UI 為 http://localhost:3001

說實在的, 啟用 BrowserSync 只有一點點眉角, 只有一小步, 解後卻能跨出一大步!

開心寫 code 吧!!