Laravel5.4 中使用 browsync 监控 CSS 并自动刷新页面

系统升级到 5.4 后， 发现 npm run hot 并不好使。 帖子请见： 问答：Laravel 5.4 的新 Laravel-mix 使用中遇到些问题

折腾+折腾后，使用 Browsync 来代替。

开始折腾:

1. 安装browser-sync

    npm install --save-dev browser-sync browser-sync-webpack-plugin

2. 配置 webpack.mix.js

在文件中添加:

    const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

    mix.webpackConfig({
            plugins: [
                    new BrowserSyncPlugin({
                            files: [
                                    '../*.css'
                            ]
                    }, { reload: false})
            ]
    })

3. 运行

    npm run watch

4. 修改 blade 模板

在你的 模板中添加如下代码, 如 layouts/app.blade.php

    <script id="__bs_script__">//<![CDATA[
            document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.7'><\/script>".replace("HOST", location.hostname));
    //]]></script>

上面 的代码是你在 运行 run watch 后，terminal 中给出的， 注意看

5. 打开浏览器，访问即可。

折腾完毕， 搞定