Nodejs Browser-sync修改文件浏览器同步刷新

最新推荐文章于 2022-08-06 23:21:09 发布
原创 最新推荐文章于 2022-08-06 23:21:09 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Nodejs #Browser-sync #浏览器 #同步 #刷新

博客介绍了Browser-sync的安装与启动，若要监听.html文件需使用服务器模式，BrowserSync会启动小型服务器并提供URL查看网站，还提及了在当前目录下监听单个文件和多个文件的命令。

安装

npm install -g browser-sync

启动

如果想要监听.html文件, 需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看网站。
在这里插入图片描述

监听单个文件，在当前目下输入以下命令

browser-sync start --server --files "css/*.css"

监听多个文件，在当前目下输入以下命令

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"
node文件（夹）操作（相关模块、同步或异步调用、路径模块、文件读取、写入、监视）
weixin_42235173的博客
06-04 978
文件操作 相关模块 Node内核提供了很多与文件操作相关的模块，每个模块都提供了一些最基本的操作API，在NPM中也有社区提供的功能包 fs：基础的文件操作 API path：提供和路径相关的操作 API readline：用于读取大文本文件，一行一行读 fs-extra（第三方）：https://www.npmjs.com/package/fs-extra 同步或异步调用 fs模块对文件的几乎所有操作都有同步和异步两种形式。例如：readFile() 和 readFileSync()
express+webpack中间件实现浏览器的实时刷新
CJF的博客
05-16 3041
express+webpack中间件实现浏览器的无刷新更新 1、Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架。 2、webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。我们使用 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要...
node.js刷新浏览器要点
abcd2923的博客
06-08 1143
node.js刷新浏览器要点 做一个网页项目时，总是需要不断保存代码，再不断刷新浏览器去查看我们的网页效果，很麻烦。去官网上安装一个node.js就可以解决我们的烦恼，安装好后，我们只需要保存代码，浏览器就会自动刷新，我们就可以看到即时的网页效果。 新建一个文件夹project，在vscode中打开 点击文件夹，在终端中打开，按住快捷键 Ctrl+` 即可 初始化项目，npm init -y,会出现一个project.json文件 输入npm i live-server,会自动下载我们需要的
node.js前端使用gulp压缩文件并且更改文件后自动刷新浏览器
weixin_44124065的博客
08-18 248
node.js前端使用gulp压缩文件并且更改文件后自动刷新浏览器 使用版本为nvm8.9.3 + npm5.5.1 版本是个很大的坑，测试多个版本后还是这个好用。 gulp的使用方法 var gulp = require("gulp") var cssnano = require("gulp-cssnano") var rename = require("gulp-rename") var uglify = require('gulp-uglify'); var concat = require('gul
node.js结合browsersync的chrome浏览器实时刷新工具
qq_39020979的博客
05-30 366
https://nodejs.org/zh-cn/官网下载node.js长期支持版 安装过程四个选项中记得选择oneline就行 打开cmd 输入node -v 检查安装是否成功 www.browsersync.cn网站5分钟入门里按提示下载browsersync包 命令行powershell代码安装：npm install -g browser-sync cmd命令行powershell找到index.html文件目录：cd desktop(文件在桌面)->运行代码 brow..
node.js 搭建服务器 前端单页面应用系统，刷新浏览器找得到页面
songJunFeng1的博客
02-02 589
var express = require('express'); var ecstatic = require('ecstatic'); var history = require('connect-history-api-fallback'); var app = express(); //设置允许跨域访问 app.all('*', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); /.
express+nodemon 修改后浏览器自动刷新
weixin_30896511的博客
12-22 1164
添加nodemon模块 cnpm install --save nodemon 根目录添加文件 nodemon.json { "restartable": "rs", "ignore": [ ".git", ".svn", "node_modules/**/node_modules" ], ...
Browsersync浏览器同步测试工具-浏览器兼容性测试工具.docx
09-13
Browsersync是一款强大的浏览器同步测试工具，专为前端开发者设计，用于解决在多浏览器和多设备间进行实时代码同步的问题。它能够实时监控并自动刷新HTML、CSS、JS、LESS等文件，极大地提高了开发效率，避免了手动...
基于nodejs和gulp搭建的前端自动化流程工具
08-10
6. **实时重载和预览**：`browser-sync`是Gulp的一个插件，它可以实现在多个浏览器设备上同步预览和实时刷新，大大提升了前端开发的效率。 7. **代码质量检查**：fetool可以集成ESLint来检查JavaScript代码风格和...
构建个性化的投资组合网站：探索Node.js和Gulp的实践
6. Browser-Sync：用于同步文件更改并自动刷新浏览器的工具，提高开发效率。 7. Nunjucks：一种JavaScript模板引擎，常用于Node.js项目中，用于渲染动态网页。 文件名称列表知识点： 1. timbryan-dev-production：...
实时编辑刷新的前端服务器Puer.zip
07-19
可能敏锐的朋友会点出，同类的browser-sync提供了更强的操作同步的功能。这点其实主要不想去盲目攀比功能(实现其实并不难，因为基础的注入脚本已经做了，剩下的都只是功能堆砌)，目前的出发点都是作者实际的需求(好...
node-explorer:使用NodeJS的浏览器中的文件浏览器
05-09
节点浏览器 使用NodeJS的浏览器中的文件浏览器 安装 打开您的终端并输入： npm install -g node-explorer 用法 打开您的终端并导航到所需的根文件夹，然后键入： node-explorer 您还可以设置所需的端口号： node-explorer -p 3000 ___在[NPM]（）上查看。
安装浏览器同步刷新Browsersync+ NodeJs 安装
qq_36575358的博客
01-07 399
Browsersync需要依赖Node环境，所以这里我们需要先安装NodeJs 1.NodeJs安装 NodeJs安装成功，下面是完整安装NodeJs目录，但是我们仍需验证一些配置文件。 Win+R 输入cmd 验证环境变量，如果能看到安装的nodejs的路径，表示path环境变量设置ok！ echo %path% 验证NodeJs版本 node -v 验证NPM版本 npm...
node.js 基础入门——自动刷新网页nodemon
Myself's 优快云
06-26 2224
nodemon 自动启动 安装： npm install nodemon --save-dev 使用： nodemon xx.js xx.js为你要安装的js文件 只要用nodemon 启动的，每次crtl + s 保存后，都会自动刷新页面。 冲
[Nodejs] nodemon：自动重启与页面刷新
offerkkl的博客
11-02 6182
前提：已经install nodemon到global，这里说如何使用nodemon代替node 例如文件路径 desktop/lab3，而且已经npm install好node-modules 如果用node命令，要npm start 如果用nodemon，要nodemo --exec ‘npm start' 而且在程序输出完毕后显示如下，等待程序更新，然后这边自
node.js async&sync
CodeHouse的博客
11-21 929
const fs = require("fs"); // 非阻塞文件读取，node.js几乎所有函数都支持异步调用，最后一个参数是回调函数 fs.readFile("./async.js", function (err, data) { if (err) { console.log(err); return; } console.log(data.toString()); }); console.log("async read finish..."); // 使用阻塞函数进行
使用nodejs+livereload页面开发自动刷新
goodgirl1991的专栏
10-26 3335
本文总结了http://istyles.blog.163.com/blog/static/181100389201341335012403/所得 1、在浏览器上安装livereload插件，我是在chrome应用里面直接搜索后下载的。 2、在命令行安装livereload，键入npm install -g node-livereload 3、安装后在cmd指定你要监听的目录  liverel
浏览器实时刷新
wmy94827的博客
04-13 726
http://www.browsersync.cn/docs/command-line/ browser-sync
nodejs创建服务器并根据不同网址刷新页面内容(绝对路径)
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
08-06 537
页面里面有css img js 必须一起请求 不然会出不来效果 所以需要把全部的链接都引入。 后面有简化方法 绝对路径
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值