gulp browser-sync自动刷新插件

很久没弄gulp了,都快忘了,今天又来温习下browser-sync 自动刷新插件,在安装的时候出现以下提示:

$ npm install browser-sync --save-dev<br>> [email protected] install /usr/local/lib/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

当出现这个提示的时候,你会发现代码也没有动静了,你可能觉得代码是不是已经停止运行了(我也以为是这样)。然而,这仅仅只是一个提示而已,继续等待就可以了,如果最后安装失败可多尝试几次。

今天弄 browser-sync 的时候,发现文件无法自动刷新,检查了很久,最后发现是文件的原因,我测试的文件是 index.html 文件,然而文件里面的内容却只有几个文字或字符串,而不是一些html代码,如下:

index.html:

123456

当index.html文件里面之后这样或类似的数字时,改插件无法自动刷新。只有其包含html代码时才能自动刷新,如:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	78879
</body>
</html>

当修改成html文件后,你再修改里面的数字是可以自动刷新的,赶快去尝试下吧。

时间: 2024-07-29 18:07:48

gulp browser-sync自动刷新插件的相关文章

gulp自动刷新插件

gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm install browser-sync --save-dev 安装 browser-sync 插件可能遇到的问题 http://www.cnblogs.com/ayseeing/p/4201202.html browser-sync API gulpfile.js文件代码如下: // 先引入依赖模块

使用Gulp实现网页自动刷新:gulp-connect

入门指南 1. 全局安装 gulp: npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4. 运行 gulp: gulp 默认的名为 defa

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

学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究supervisor的时候,突然觉得这东西只有在服务端文件修改时才会触发刷新,前端样式文件模板等等刷新时不会, 能实现前端修改也自动刷新不?想想平时自己用gulp 搭虚拟服务器,用browser自动刷新,于是打算试试. gulp+browserSync 算是原来就有的,现在应该把目标分几步来实现,

Browsersync结合gulp和nodemon实现express全栈自动刷新

Browsersync能让浏览器实时.快速响应你的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.你的任何一次代码保存,以上的设备都会同时显示你的改动". Browsersync可以单独使用,也可以集成到gulp和grunt这样的构建工具中使用,在node.js项目中还能结合gulp-nodemon实现全栈的自动刷新,而在移动端设备上同步调试的功能对移动web开发显然是很有帮助的. 相关网站查看

gulp配置实现修改js、css、html自动刷新

写在前面: 本配置支持es6.less 1.首先 给出初始的目录结构 给出执行gulp后的目录结构 给出执行gulp --p后的目录结构 2.package.json里是一个写入.文件描述了npm包的相关配置信息(作者.简介.包依赖等)和所需模块. { "name": "gruntTest", "version": "1.0.0", "description": "", "ma

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

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

gulp+browserSync自动刷新页面

BrowserSync "Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:"假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动".无论您是前端还是后端工程师,使用它将提高您30%的

jekyll+livereload+chrome插件-更新文件后自动刷新

2014-08-27 本文不保证成功,window系统会出现各种问题,如若不成功,请直接用livereload的window版,解决,详细可以查看livereload下载对应版本操作,比较傻瓜式: 以下主要介绍的是命令行配置的方式: jekyll+livereload更新后自动刷新,老外的教程,先看看: http://dan.doezema.com/2014/01/setting-up-livereload-with-jekyll/ 1.安装guard-jekyll-plus 时会出错,依赖包版

BrowserSync,调试利器--自动刷新(转

---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码,按下了ctrl+s保存.紧接着,你的手机和另一个显示器里的应用,就变成了更新后的效果.你可以马上检查效果是否和你预想的一致,甚至都不需要动一下鼠标... 想起来还不错?嗯,这只是简单地省略掉那个开发过程中会按好多遍的F5刷新. 自动刷新 “自动刷新”并不是新的概念,但对关注“可见”的预览效果的前端开