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": ""
}
Browsersync 浏览器自动刷新的更多相关文章
- browsersync 浏览器自动刷新神器
官网:http://www.browsersync.cn/ 基于node,具体安装方法和使用方法参见官网,可以结合gulp等构建工具来用,也可以单独使用.不错~
- gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)
gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- Gulp 搭建前端非SPA 项目, 修改文件浏览器自动刷新
起因:需要搭建一个自动打包处理 sass / js (es6),自动监听文件变化时浏览器自动刷新的开发环境 项目目录 project build -css -js *.html src -html - ...
- Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- 前端神器!!gulp livereload实现浏览器自动刷新
首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm inst ...
- 前端浏览器自动刷新神器:Browsersync
[安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...
- gulp构建前端,压缩css,js文件,实现浏览器自动刷新
一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...
- 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。
本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...
随机推荐
- Linux 实用指令(6)--crond任务调度
目录 crond任务调度 1 原理示意图 2 概述 3 基本语法 3.1 常用选项 4 快速入门 4.1 任务的要求 4.2 步骤如下 4.3 参数细节说明 5 任务调度的几个应用实例 5.1 案例一 ...
- YXcms前台注入(有限制但可以绕过)
这个cms很久前做过代码审计,很多问题,但是经过这么长时间,现在安全性提高了不少,这几天看了下,基本没有什么特别大的问题了(不包含后台). 在yxcms/protected/apps/member/c ...
- Eclipse 常用快捷键 (动画讲解)【转】
Eclipse 常用快捷键 (动画讲解)[转] Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的 ...
- TestNG 入门教程【转】
TestNG 入门教程[转] 国庆7天假期,大部分朋友都出去旅游了,微信圈里全是晒旅游的照片, 东南亚游,欧洲游呀,真是羡慕呀. 悲惨的我只去了上海野生动物园, 在家休息,利用这段假期,把之前学过的东 ...
- 五. Arrow Function 箭头函数
箭头函数三大好处: 1. 简明的语法 举例: 如果只有一个参数,可以不加(),多个参数用 "," 隔开 2. 隐式返回 首先说下什么是显示返回,显示返回就是 return 加上你要 ...
- 三. var let const的理解 以及 立即执行函数中的使用 以及 for循环中的例子
一. 立即执行函数 windows中有个name属性,name='' '' var 如果我们用var name 去声明,那就会改变windows中name的值(因为我们不是在函数作用域中声明的,所以会 ...
- JEECG-Boot 项目介绍——基于代码生成器的快速开发平台(Springboot前后端分离)
Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Design.强大的代码生成器让前端和后 ...
- An invalid property 'jdbcType ' was found in mapping
大概2种原因: 1 放进去的类型与字段的类型不匹配 2 比较变态,xml中=两边不能有空格! 错误示例如下: #{plat,jdbcType = INTEGER}, 去掉空格后: #{plat,jd ...
- Python学习day17-常用的一些模块
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- Python学习day02 - 编程分类和Pycharm和Jupyter的安装
编程语言分类 编程语言是用来和计算机交互的,计算机只认识0和1 机器语言(低级语言) 直接和硬件交互 用0和1和计算机沟通 优点:执行效率最高 缺点:开发效率低 汇编语言直接和硬件交互 优点(相较于机 ...