安装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. !/usr/bin/env python和!/usr/bin/python的区别

    脚本语言第一行 作用:文件中代码用指定可执行程序运行 #!/usr/bin/Python  执行脚本时,调用/usr/bin下python解释器 #!/usr/bin/env python  在环境设 ...

  2. 大雄玩java虚拟机01--java命令

    首先是参考的资料,然后说一下我要干什么,我要一边学习java虚拟机一边跟着zxh0大神用go写一个jvm,不过我和他滴不一样! http://docs.oracle.com/javase/specs/ ...

  3. 1.2 JAVA多线程实现

    线程和进程 进程:是执行中一段程序, 进程是系统进行资源分配和调度的一个独立单位. 线程:比进程更小的能独立运行的基本单位,单个进程中执行中每个任务就是一个线程.线程是进程中执行运算的最小单位. Th ...

  4. linux下socket connect 阻塞方式 阻塞时间控制

    同事今天问我,如何在linux下的c代码里面控制connect的阻塞时间.应用的背景是:linux下的c程序有两个目标IP需要connect,如果用阻塞方式,当其中一个IP不能连接的情况下,程序将阻塞 ...

  5. yuv2mp4

    >您使用什么类型的YUV像素格式?最常见的格式是YUV4:2:0平面8位(YUV420p).您可以键入ffmpeg -pix_fmts以获取所有可用格式的列表.>什么是帧率?在我的例子中, ...

  6. 阿里云oss c# api 的使用 的使用

    API 文档下载地址:http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/attach/32085/cn_zh/1515493045734 ...

  7. unity解压缩zip发布后的一些问题

    前段时间项目需要,搞了下zip的解压缩问题,也是利用ICSharpCode.SharpZipLib.dll来处理的zip,这里说下之前遇到的坑(这里提供我用的这个库ICSharpCode.SharpZ ...

  8. Oracle角色,权限,表空间基础语句

    控制台: -sqlplus         -----连接数据库 -conn sys/123456@orcl as sysdba        -----登录sys -create tablespac ...

  9. 机器学习环境搭建-Pycharm

    刚刚开始学习机器学习,遇到了很多的问题,尤其是搭建环境让我觉得脑袋特别疼.我用的是win8 64位操作系统,硬盘小的可怜.开始我也跟着下载了anaconda,后来发现anaconda一点儿不像说的那么 ...

  10. c# word interop encrypt with password protect with password

    public static void EncryptWithPassword(string unEncryptedWordPath, string password) { Word.Applicati ...