Browsersync 浏览器自动刷新

Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用。

browsersync中文网  http://www.browsersync.cn/

安装

首先安装node.js(直接下载后安装就行,http://nodejs.cn/download/) > 打开命令行(win+r 然后输入cmd打开命令行)> npm install -g browser-sync (通过npm安装browsersync,如果下载慢的话可以先安装cnpm,$ npm install -g cnpm --registry=https://registry.npm.taobao.org,然后通过cnpm安装 cnpm intall -g browser-sync)

使用

在项目的文件里打开命令行,安装成后就可以使用browsersync的命令,格式是browser-sync start xxx

browser-sync start --server --files "*.css"  //监听CSS文件browser-sync start --server --files "*.css,*.js,*html" //监听其他文件直接用逗号隔开就行,更详细的命令可以到中文网看看

说个无关的

npm init -y 可以生成默认配置的package.json

{
  "name": "jquery-css3-circle-pop-menu",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"browser-sync start --server \"src\" --flies \"src\" "  //在scripts里的dev,写上运行的命令,下次就可以直接用 npm run dev 来运行,不用每次都打那么长的browser-sync
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

原文地址:https://www.cnblogs.com/haqiao/p/8329550.html

时间: 2024-11-08 21:25:00

Browsersync 浏览器自动刷新的相关文章

browsersync 浏览器自动刷新神器

官网:http://www.browsersync.cn/ 基于node,具体安装方法和使用方法参见官网,可以结合gulp等构建工具来用,也可以单独使用.不错~

gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "sc

修改文件后浏览器自动刷新解决方案

现有编程工具的自动刷新解决方案 其实有很多工具可以做到文件一改变,浏览器自动刷新,其实这样体验也是最好的,可是由于一些原因,这些工具并不能解决所有工作场景的需求. 由于这不是本文的主要内容,只列出一些可以实现自动刷新的工具,没有进行详细展开,大家可以自行去研究下. 在Sublime下有一个插件叫做LiveStyle可以实现修改CSS后自动刷新,但是每一个CSS文件都要手动配置,不够智能.需要安装Chrome插件:Emmet LiveStyle. JetBrains公司的IDEA.WebStorm

前端开发 ---浏览器自动刷新

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } span.Apple-tab-span { white-space: pre } 1.livereload (1

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,自动刷新,解放F5,去掉更新提示

BrowserSync虽然这个技术不算新,但是依然有用.略微介绍下 没有安装node,先安装node,这里不再做介绍 安装 npm install -g browser-sync  全局安装,方便在任意目录下启动 所在项目中启动 browser-sync start --server --files "**"  所有文件都检测改变刷新,并自动打开浏览器 http://localhost:3000/ 相当于你的index.html文件,如果你的html文件夹下有个db.html,那么地址

使用grunt实现浏览器自动刷新

首先安装必备的插件: nodejs安装 grunt安装 grunt-contrib-watch:npm install grunt-contrib-watch —save-dev 因为这是要引入livereload来监听你对文件所做的修改,所以需要一个服务器来实现浏览器与服务期间的通信, 因此,可以利用apache实现.将你的项目放在Apache服务器下. 然后就是进行基本的配置了: grunt.initConfig( watch: { livereload: { options: {liver

前端:实现开发页面保存后浏览器自动刷新的方法

一.Grunt+Livereload 首先需要做的是安装node.js,这个是实现此功能的基本环境,安装示例点击查看.Grunt通过node.js的管理工具NPM进行安装,Livereload是谷歌浏览器的一个插件.FQ使用的hosts文件点击即可下载.详细的安装过程请参考如下链接:Grunt+Livereload 搭建本地前端开发环境:个人在安装的过程中唯一出现的问题就是Gruntfile.js的配置.使用教程中的配置文件会出现一个错误提示:path必须是一个字符串.仔细查看后发现“optio

Chrome 实现前端页面自动刷新

作为一个前端,主要是写页面,但是每次写完一段代码,保存,如果想看看刚刚写的代码的效果怎样,还需要到浏览器手动刷新,刷新,刷新,刷的手疼了. 所以如果能实现只要在编辑器中保存,浏览器自动刷新页面,那岂不是很棒嘛!!So convenient~~ 所以本文介绍如何实现浏览器自动刷新. 1.需要安装: livereload,Chrome 安装这个扩展程序 然后,window 用户需要还需要下载安装个客户端, http://livereload.com/ 最后,使用 npm 全局安装 http-serv