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": ""
}

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

  1. browsersync 浏览器自动刷新神器

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

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

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

  3. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  4. Gulp 搭建前端非SPA 项目, 修改文件浏览器自动刷新

    起因:需要搭建一个自动打包处理 sass / js (es6),自动监听文件变化时浏览器自动刷新的开发环境 项目目录 project build -css -js *.html src -html - ...

  5. Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. 前端神器!!gulp livereload实现浏览器自动刷新

    首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm inst ...

  7. 前端浏览器自动刷新神器:Browsersync

    [安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...

  8. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  9. 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。

    本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...

随机推荐

  1. SpringBoot集成JPA根据实体类自动生成表

    数据库是mysql,在application.properties中的写法如下: 原来配置这样的时候确实可以生产表的 #spring.jpa.hibernate.ddl-auto=update 多方查 ...

  2. U-BOOT 命令的介绍

    U­BOOT 常用命令 通常使用 help(或者只使用问号?),来查看所有的 U­BOOT 命令.将会列出在当前配置下所有支持的命令. 但是我们要注意,尽管 U­BOOT 提供了很多配置选项,并不是所 ...

  3. loj2494 [hnoi2018]寻宝游戏

    题意:给你n个元素的数组a.你可以在每个元素之前添加and和or的符号.每次询问最后变成r有多少种添号情况. n<=1000,m<=5000,q<=1000. 标程: #includ ...

  4. day05 创建用户过程、文件夹,文件等权限修改等

    linux创建用户时修改到的文件 /etc/passwd //存放用户信息 /etc/shadow //存放用户密码信息 /etc/group //存放用户组信息 /etc/gshadow //存放组 ...

  5. 暑期集训日志(Day0~Day5)

    章·五:2019-07-15:明月不谙离恨苦,斜光到晓穿朱户 ·昨日小结: 昨天考试又是爆零边缘,除了难过就剩难过了. T1暴力打崩了只拿了5分. T2没给分时间.最后20分钟打了个残码.没仔细观察数 ...

  6. 用C++Builder在Windows开始按钮上绘图制作方法

    熟悉Windows操作系统的软件设计人员知道,在Win95/98/NT/2000中有一任务栏(Task Bar)程序,路径为:C:\WINDOWS\SYSTEM\SYSTRAY.EXE(假设你的Win ...

  7. 微信小程序page的生命周期和音频播放及监听

    一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------on ...

  8. 【solr】Solr与JDK对应版本关系,Tomcat与JDK

    Solr与JDK对应版本关系,Tomcat与JDK版本对应关系 最新在部署solrCloud集群,由于自己机器上用的JDK都是JDK1.7的,然后我就从网上下载了最新下载了最先的solr6.6.0和最 ...

  9. CMS 源码解读

    CMS 是”Content Management System” 的缩写,意为” 内容管理系统”. 内容管理系统是企业信息化建设和电子政务的新宠,也是一个相对较新的市场.对于内容管理,业界还没有一个统 ...

  10. 微信小程序 拼团商品倒计时(拼团列表、拼团商品详情)

    直接上图: 拼团列表.拼团详情-倒计时                                    //单个倒计时,适用用于单个商品的倒计时 js文件: //倒计时 function cou ...