browsersync——代码变动实时更新到页面

最新推荐文章于 2021-06-03 06:15:03 发布

原创最新推荐文章于 2021-06-03 06:15:03 发布 · 693 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js

工具专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍BrowserSync的安装、配置及使用方法，包括如何监听文件变化、启动本地服务器、多终端同步预览等，适合前端开发者快速掌握并应用于项目中。

一、准备

nodejs安装教程：https://blog.youkuaiyun.com/FED_AF/article/details/105747632）

二、安装

npm install -g browser-sync

三、用法

# 启动监听服务器，执行前要先切换到项目路径，**代表递归监听，--no-open启动时不触发默认浏览器
browser-sync start --no-open --server --files "**/*.html, **/*.css, **/*.js"
# browser-sync start --server --files "**"     监听当前路径下所有文件
# browser-sync start --server --files "**/*.html"     监听当前路径下所有html文件
# browser-sync start --server --files "**" --index "src/index.html"    监听当前路径下所有文件，并指定当前路径/src/index.html为索引文件（入口）
[Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000          /*本地监听*/  
    External: http://192.168.188.128:3000    /*外部监听*/
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless
environment, you might want to set the open option to false)
[Browsersync] Reloading Browsers...

之后就可以在通过3000端口访问项目了。