需要安装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. poj_1845_Sumdiv

    Consider two natural numbers A and B. Let S be the sum of all natural divisors of A^B. Determine S m ...

  2. Q&A - 如何获取ip地址所在地

    获取其IP地址后,传入以下URL,并请求该URL,该请求会响应一个JSON格式的数据包,该IP地址的所在地均在这个数据包内   http://int.dpool.sina.com.cn/iplooku ...

  3. Spring MVC 接收前端参数的方式

    方式一: 普通方式接收 1 @RequestMapping("/index") 2 public String getUserName(String username) { 3 S ...

  4. kali linux渗透系统的安装

    Kali 安装详细步骤   实验环境 Windows:Windows 10 企业版 VMware:VMware Workstation 12 Pro Kali:kali-linux-2016.2-am ...

  5. Swoole 创建服务

    1: 创建TCP 服务器 $serv = new swoole_server(‘127.0.0.1’,9501); 2:创建UDP服务器 $serv =  new swoole_server('127 ...

  6. 1,Python常用库之一:Numpy

    Numpy支持大量的维度数组和矩阵运算,对数组运算提供了大量的数学函数库! Numpy比Python列表更具优势,其中一个优势便是速度.在对大型数组执行操作时,Numpy的速度比Python列表的速度 ...

  7. AlphaGo原理-蒙特卡罗树搜索+深度学习

    蒙特卡罗树搜索+深度学习 -- AlphaGo原版论文阅读笔记     目录(?)[+]   原版论文是<Mastering the game of Go with deep neural ne ...

  8. quick sort去除无用判断

    #include <stdio.h> #include <stdlib.h> //int a[]={1000,10000,9,10,30,20,50,23,90,100,10} ...

  9. QBASIC教程

    Qbasic 程序设计入门 BASIC(Beginner’s All-purpose Symbolic Instruction Code 的缩写,意为初学者通用符号指令代码)语言是在1964年由美国的 ...

  10. Dapper 学习笔记

    一.基础 1.Dapper代码就一个SqlMapper.cs文件, 前人测试Dapper速度较快 的Orm,读取速度接近IDataReader,超过DataTable. 2.a.下载地址 https: ...