需要安装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. SVN中trunk,branches,tags用法详解(转载)

    转载出处:http://www.cnblogs.com/dafozhang/archive/2012/06/28/2567769.html Subversion是一个自由开源的版本控制系统.在Subv ...

  2. OA上传和编辑数据

    1.VO:value object值对象.通常用于业务层之间的数据传递,和PO一样也是仅仅包含数据而已.但应是抽象出的业务对象,可以和表对应,也可以不,这根据业务的需要. 2. String[]类型打 ...

  3. maven 使用错误

    使用mvn test mvn test -Dtest=测试包名.测试类名时 [ERROR] Failed to execute goal org.apache.maven.plugins:maven- ...

  4. Salt-ssh 自动安装salt-minion

    作用:为了不手动去安装一台一台去salt-minion,并进重复的配置 一.环境 系统环境: #cat /etc/redhat-release CentOS Linux release 7.4.170 ...

  5. RESTful API架构和oauth2.0认证机制(概念版)

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...

  6. python 获取类中除内置方法外的所有方法名

    #!/usr/bin/env python# !-*- coding:utf-8 -*- class Menu: def __init__(self): pass def updateProject( ...

  7. C语言实例解析精粹学习笔记——26

    实例26:阿拉伯数字转换为罗马数字,将一个整数n(1~9999)转换为罗马数字,其中数字和罗马数字的对应关系如下: 原书中的开发环境很老,我也没有花心思去研究.自己在codeblocks中进行开发的, ...

  8. POJ:3185-The Water Bowls(枚举反转)

    The Water Bowls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7402 Accepted: 2927 Descr ...

  9. tools.jar seem to ....

    android stadio 运行不起来,可以在java_home原来的路径下加一个\, 然后就可以运行起来了.

  10. springboot遇见问题总结

    今天开始学习创建springboot项目 问题1: 产生异常: 创建项目目录: demo代码: 代码Controller import org.springframework.web.bind.ann ...