需要安装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. lintcode_93_平衡二叉树

    平衡二叉树   描述 笔记 数据 评测 给定一个二叉树,确定它是高度平衡的.对于这个问题,一棵高度平衡的二叉树的定义是:一棵二叉树中每个节点的两个子树的深度相差不会超过1. 您在真实的面试中是否遇到过 ...

  2. MySql编码、卸载、启动问题

    一.启动问题 计算机------管理------服务------找到MySql------右键------启动或停止 问题:打开Mysql,点击 MySQL Command Line Client,输 ...

  3. python学习之变量类型

    变量: 变量是保存在内存中的值,根据变量类型开辟不同的内存空间且只允许符合该数据类型的数据才可以被存储在该内存空间中 变量赋值: 在Python中定义变量时,无需像其他语言一样需要声明数据类型.每个变 ...

  4. 状压DP详解(位运算)

    前言: 状压DP是一种非常暴力的做法(有一些可以排除某些状态的除外),例如dp[S][v]中,S可以代表已经访问过的顶点的集合,v可以代表当前所在的顶点为v.S代表的就是一种状态(二进制表示),比如 ...

  5. 使用perl发邮件

    如果你使用的是 window 系统,没有 sendmail 工具.这时你就可以使用 perl 的 MIME:Lite 模块作为邮件客户端来发送邮件. 这里我们直接用 cpan 来安装(需要 root ...

  6. [Azure Storage]使用Java上传文件到Storage并生成SAS签名

    Azure官网提供了比较详细的文档,您可以参考:https://azure.microsoft.com/en-us/documentation/articles/storage-java-how-to ...

  7. 用for循环计算(1-3+5-7...99)的结果(两种方法)

    1) sum=0 count=1 for i in range(1,100,2): if count % 2==0: sum = sum - i else: sum = sum + i count = ...

  8. P1336 最佳课题选择

    P1336 最佳课题选择 题目描述 Matrix67要在下个月交给老师n篇论文,论文的内容可以从m个课题中选择.由于课题数有限,Matrix67不得不重复选择一些课题.完成不同课题的论文所花的时间不同 ...

  9. unbantu安装wmvare

    最新评论 wsmyyjie:写的太好了!!! zhangmin92:回复 wopapa523: 这个是你用另一.. wopapa523:请问i11是在哪里输入的? myh65013:挺深入的 andk ...

  10. PJSIP-PJLIB(samples) (the usage of the pjlib lib) (eg:string/I/O)

    Here are some samples about  PJLIB! PJLIB is the basic lib of PJSIP, so we need master the lib first ...