安装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实现浏览器自动刷新的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. gulp+browserSync+nodemon 实现express 全端自动刷新的实践

    学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...

  9. 通过HTTP响应头让浏览器自动刷新

    以前如果需要让网页过几秒自动刷新一次,我都会在页面通过JS调用setTimeout来做,最近发现原来服务器通过添加响应头部信息来提示浏览器需要在多少时间之后重新加载页面. 代码很简单: respons ...

  10. Browsersync 浏览器自动刷新

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

随机推荐

  1. JS的全局变量与局部变量及变量的提升

    遇到全局变量与局部变量的时候总是出一些或多或少的问题,于是专门花时间去认真研究了一下全局变量与局部变量. 这是在网上看到的一个关于全局变量与局部变量的代码,看了下作者的解析,自己也进行了研究. < ...

  2. 在form表单里上传图片

    需要上传多个图片分别上传,本来提供的工具类里上传一张可以form表单对象实现 后台用MultipartFile file var formdata = new FormData($("#in ...

  3. Forth 编译程序

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  4. Altium Designer 使用中的小技巧1

    在布线的过程中所学到的一点技巧:在没有画原理图的情况下,直接绘制PCB板,需要敷铜Ppolygon pour,但没有网络标号,就无法连上要连的网络,焊盘,怎么办呢?需要事先将需要连接在一起的元器件(焊 ...

  5. 如何使用桥接模式使虚拟机VMware中的Redhat能上网

    VMware中有三种网络连接方式可使其上网:桥接模式,NAT模式,host-only模式,下面详细介绍如何使用桥接模式使虚拟机中的Redhat连上互联网. Bridge(桥接)模式 在Bridge模式 ...

  6. listener介绍

    当Web 应用在Web 容器中运行时, Web 应用内部会不断地发生各种事件: 如Web 应用被启动.Web 应用被停止,用户session 开始.用户session 结束.用户请求到达等, 通常来说 ...

  7. find命令配合sed命令使用

    1.查找当前目录下所有以txt文件中包含123的数字都替换成5678 find ./ -name "*.txt" -exec  grep "123" {} \; ...

  8. 关于redis的安装

    下载redis 我这边下载redis4.0.1版本, 然后解压 然后执行yum -y install gcc gcc-c++ libstdc++-devel 然后cd //qbtapp/redis-4 ...

  9. EditPlus软件自动补全文档htmlbar.acp设置 及 模板文件格式

    1.在htmlbar.acp文件末尾添加如下内容,可自动补全: #T=HTML <html>    ^! </html>   #T=HEAD <head>    ^ ...

  10. win7安装python3.6.1及scrapy

    ---恢复内容开始--- 第一篇博客,记录自己自学python的过程及问题. 首先下载python3.6.1及所需资料 百度云:https://pan.baidu.com/s/1geOEp6z 密码: ...