需要安装nodejs

全局安装gulp

cnpm install -g gulp

局部安装

cnpm install -save-dev gulp

添加配置文件,新建gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload; gulp.task('serve', function() {
browserSync({
server: {
baseDir: 'app',
    tunnel:true //可以解决与wenstrom冲突问题
}
}); gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload);
});

需要有如下目录

gulpfile.js
app/
styles/
main.css
scripts/
main.js
index.html

添加插件

cnpm install -save-dev  browser-sync

启动

gulp serve

再不明白就看这个

http://www.gulpjs.com.cn/docs/recipes/server-with-livereload-and-css-injection/

gulp实时刷新页面的更多相关文章

  1. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

  2. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  3. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

  4. gulp使用 实现文件修改实时刷新

    gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://regist ...

  5. gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块

    1.压缩tinypng图片   gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...

  6. web页面实时刷新之browser sync

    web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...

  7. flask处理数据,页面实时刷新展示

    背景: 后端 flask(python)处理数据,页面实时刷新,类似于打包页面的动态展示,展示效果如图: 代码如下: 前端主要使用以下循环处理, 2--- 2秒刷新一次 {% if 0 == stop ...

  8. websocket实现数据库更新时前端页面实时刷新

    websocket实现数据库更新时前端页面实时刷新 javaweb 目录(?)[+] userjsp ManagerServletjava 如题,实现以上功能,我知道主要有两大种思路: 轮询:轮询的原 ...

  9. Gulp-livereload:实时刷新编码

    实现功能 监听指定目录下的所有文件,实时动态刷新页面 安装(Install) 功能的实现是借助 gulp-connect 插件完成的;所以,首先通过下面命令完成插件安装: npm install -- ...

随机推荐

  1. 一张思维导图带你梳理HashMap相关知识

    HashMap可以说是java中最常见也是最重要的key-value存储结构类,很多程序员可能经常用,但是不一定清楚这个类背后的数据结构和相关操作原理,为了复习HashMap相关的知识,今天花了一天的 ...

  2. linux安装openldap步骤

    目录 虚拟机环境:centos 7 一.环境准备 1.关闭 selinux firewalld 临时: setenforce 0  永久: vi /etc/sysconfig/selinux SELI ...

  3. strak组件(10):批量操作

    效果图: 批量删除只是一个例子,可以根据需求定制自己想要的批量操作. 新增函数 def get_action_list(self) 钩子方法,获取要处理的批量操作的函数 def action_mult ...

  4. POJ:3616-Milking Time

    Milking Time Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12324 Accepted: 5221 Descrip ...

  5. [BZOJ1060][ZJOI2007]时态同步(树形DP)

    [我是传送门] 因为边权只能增加,那么设f[u]为u子树上从i出发到达某个叶节点的最大路径, 显然Ans应该增加f[u]-f[v]-e[i].w Code #include <cstdio> ...

  6. perl语言入门总结-第5章-输入输出

    读取标准输入 chomp($line = <STDIN>); #去掉后面的换行 while (defined($line = <STDIN>)) { print "I ...

  7. tomcat7 配置 https安全访问

    在apache-tomcat-7.0.33-windows-x64.zip配置https,结果在配置SSL时遇到一些问题 1.用JDK自带的keytool来生成私有密钥和自签发的证书,如下: keyt ...

  8. Spring核心技术(十五)——BeanFactory

    BeanFactory是Spring IoC功能的潜在基础,但是现在BeanFactory一般仅仅用于直接集成第三方的框架,对于大多数的Spring用户来说,BeanFactory已经算是一个历史了. ...

  9. php 升级php5.5 、php7

    rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm yum install php55w php55w-opcache yum install ...

  10. linux文件上传下载笔记(rz,sz,sftp,scp)命令

    软件(包)安装/卸载 yum -y install 包名(支持*) :自动选择y,全自动yum install 包名(支持*) :手动选择y or nyum remove 包名(不支持*)rpm -i ...