使用gulp和browser-sync实现浏览器自动刷新
安装gulp (前提是已经安装了node)
全局安装: npm install -g gulp
本项目安装: npm install gulp --save-dev
安装browser-sync
全局安装: npm install -g browser-sync
本项目安装: npm install browser-sync --save-dev
编写代码
在项目根目录下创建文件gulpfile.js
在gulpfile.js中写入如下代码
const gulp=require("gulp");
const browserSync=require("browser-sync").create();
gulp.task("serve",function () {
browserSync.init({
port:2017,
server:{
baseDir:["."]
}
});
gulp.watch("*.html",["html"]);
});
//操作html文件
gulp.task("html",function () {
gulp.src("*.html")
.pipe(browserSync.stream());
});
gulp.task("default",["serve"]);
运行命令
gulp
使用gulp和browser-sync实现浏览器自动刷新的更多相关文章
- gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)
gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...
- 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。
本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- 前端神器!!gulp livereload实现浏览器自动刷新
首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm inst ...
- 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构建前端,压缩css,js文件,实现浏览器自动刷新
一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...
- gulp+browserSync+nodemon 实现express 全端自动刷新的实践
学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...
- 通过HTTP响应头让浏览器自动刷新
以前如果需要让网页过几秒自动刷新一次,我都会在页面通过JS调用setTimeout来做,最近发现原来服务器通过添加响应头部信息来提示浏览器需要在多少时间之后重新加载页面. 代码很简单: respons ...
- Browsersync 浏览器自动刷新
Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用. browsersync中文网 http://www.bro ...
随机推荐
- 利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456:
#!/usr/bin/env python3 # -*- coding: utf-8 -*- from functools import reduce CHAR_TO_INT = { ': 0, ': ...
- Python 字典删除元素clear、pop、popitem
同其它python内建数据类型一样,字典dict也是有一些实用的操作方法.这里我们要说的是字典删除方法:clear().pop()和popitem(),这三种方法的作用不同,操作方法及返回值都不相同. ...
- 域名排序 sort uniq awk
[root@web01 ~]# sort [-fbMnrtuk] [file or stdin] 选项与参数:-f :忽略大小写的差异,例如 A 与 a 视为编码相同:-b :忽略最前面的空格符部分: ...
- 利用phpredis实现PHP操作Redis
redis在PHP中的基本使用案例 利用phpredis实现PHP操作Redis,需要进行redis.so的下载,添加 //利用Redis类进行操作 //实例化Redis类 $redis = new ...
- Java虚拟机学习-对象的创建
虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载.解析和初始化过.如果没有,必须先执行相应类的加载过程. 类加载 ...
- 视觉显著性简介 Saliency Detection
内容转移到博客文章系列:显著性检测 1.简介 视觉显著性包括从下而上和从上往下两种机制.从下而上也可以认为是数据驱动,即图像本身对人的吸引,从上而下则是在人意识控制下对图像进行注意.科研主要做的是从下 ...
- Vue+elementui +Springboot session丢失解决方案
前后端分离项目 由于端口不一致会出现跨域问题 解决跨域以后又会出现前后端sessionID不一致 首先跨域问题 跨域可以在前端配置代理 proxyTable: { '/': { / ...
- OpenGL中VA,VAO,VBO和EBO的区别
1,顶点数组(Vertex Array) VA,顶点数组也是收集好所有的顶点,一次性发送给GPU.不过数据不是存储于GPU中的,绘制速度上没有显示列表快,优点是可以修改数据. 4.VBO(Vertex ...
- 四、fgets与fputs
fgets 描述:从流中读取最多size个字符,遇到文件末尾或\n则停止读取,该函数会在读取到的字符最后加上\0. 原型:char *fgets(char *s, int size, FILE *st ...
- python 3 字符编码解码问题
python2与python3 字符编码都做了很大的调整,区别: 1.python2字符串默认有两种类型,unicode和str.'你好' !=u'你好' python3字符串默认只有str一种类型, ...