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. 打开浏览器,访问即可。


折腾完毕, 搞定

《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!