配置browser-sync 浏览器同步测试工具

配置browser-sync 浏览器同步测试工具

  • 安装依赖

    npm i -g browser--sync // 全局安装
    ?
    npm install --save-dev browser-sync
  • 卸载
    
    
    
    npm uninstall --globall browser--sync
注意: 我们在实际开发中通常是将browser-sync配置在项目中,因为clone到本地后会缺失全局包。 在项目中安装第三方包的时候,是不需要这个自动刷新也页面的包,所以我们将第三方依赖配置在devDependencies分支    
?npm install --save-dev browser-sync // 项目中的第三方依赖包
  • browser-sync 的 scripts 配置 
"scripts": {
    "dev": "browser-sync start --server --files \"css/*.css, index.html, js/*.js\"",
    "start": "npm run dev"
  }
  • 启动开发服务


npm start
或者 npm run dev

原文地址:https://www.cnblogs.com/zhtian/p/9535249.html

时间: 2024-12-30 06:00:52

配置browser-sync 浏览器同步测试工具的相关文章

BrowserSync - 浏览器同步测试工具

背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装: // 使用淘宝镜像会快些 npm install -g browser-sync --registry=https://registry.npm.taobao.org 启动: (1)静态网页(服务器模式) 先进入项目目录,然后: // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --file

省时的浏览器同步测试工具 browsersync NodeJS

http://www.browsersync.cn/ 省时的浏览器同步测试工具 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:“假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”.无论您是前端还是

PC和移动端浏览器同步测试工具Browsersync使用介绍

在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. 五分钟快速入门 1.使用Browsersync前需要安装node.js.详细的安装过程可参见windows 下安装nodejs 2.安装Browsersync.打开一个终端窗口,运行以下命令:npm install -g browser-sync 3.启动 BrowserSync. 如果您想要监听

BrowserSync(省时的浏览器同步测试工具)

第一步:安装node 第二步:安装BrowserSync npm install -g browser-sync 第三部:启动BrowserSync 假如我在D盘建立一个文件test,里面分别包括index.html和style.css两个文件 打开命令行工具,输入: d: cd test browser-sync start --server --files "*.css,*.html" 第四部:在任意编辑器里修改你的html或css并保存看看浏览器的实时变化吧! 详细猛击:http

Browsersync 省时浏览器同步测试工具,浏览器自动刷新,多终端同步

官网地址 http://www.browsersync.cn/ 1.安装 BrowserSync npm install -g browser-sync 2.启动 BrowserSync // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "*.html" //如果您需要监听多个类型的文件,您只需要用逗号隔开.例如我们再加入一个.html文件 // --files 路径是相对于运行该命令的项目(目录) br

前端工具-浏览器同步测试(自动刷新、热刷新、热加载)

Browsersync 官网:https://www.browsersync.io/ 中文:http://www.browsersync.cn/ Gulp中使用 http://www.browsersync.cn/docs/gulp/ 注意1:我测试哪个tesk在下面哪个好使(要么能使用静态服务器,要么用代理?)貌似不能部分请求用代理.. var gulp = require('gulp'); var browserSync = require('browser-sync').create();

12款很棒的浏览器兼容性测试工具推荐

对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,让我们一起看看这些很棒的工具. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Superpreview 这是为微软自己发布的跨浏览器测试工具,您可以同时查看您的网页在多个

Web浏览器兼容性测试工具如何选择

对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒的浏览器兼容性测试工具让我们一起看看这些很棒的工具吧. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Super

Android-手机QQ浏览器耗电测试工具及方法介绍

 Android-QQ浏览器耗电测试工具及方法介绍   1.目前我们常用的测试工具分别有用硬件和软件两种方式: 硬件测试需要用到的:稳压电源.电流计.电脑一套: 软件:powerstat 用的最多的是用硬件测试的方法,用软件测试是需要确认问题时才用到: 2.现在说一下测试耗电的注意事项: 首先耗电测试的软件只能装在32位的电脑上,不支持64位的电脑: 电流表: 一.用零件扣住手机正负极芯片时,注意铜片是否接触正常,测试耗电的手机铜片部分弯曲,容易接触不良.(主要用在可拆卸电池的手机上,不可拆卸的