gulp实时刷新页面
需要安装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实时刷新页面的更多相关文章
- gulp+browserSync自动刷新页面
BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...
- 使用gulp插件来自动刷新页面。
http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...
- Vue+WebSocket 实现页面实时刷新长连接
最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...
- gulp使用 实现文件修改实时刷新
gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://regist ...
- gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块
1.压缩tinypng图片 gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...
- web页面实时刷新之browser sync
web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...
- flask处理数据,页面实时刷新展示
背景: 后端 flask(python)处理数据,页面实时刷新,类似于打包页面的动态展示,展示效果如图: 代码如下: 前端主要使用以下循环处理, 2--- 2秒刷新一次 {% if 0 == stop ...
- websocket实现数据库更新时前端页面实时刷新
websocket实现数据库更新时前端页面实时刷新 javaweb 目录(?)[+] userjsp ManagerServletjava 如题,实现以上功能,我知道主要有两大种思路: 轮询:轮询的原 ...
- Gulp-livereload:实时刷新编码
实现功能 监听指定目录下的所有文件,实时动态刷新页面 安装(Install) 功能的实现是借助 gulp-connect 插件完成的;所以,首先通过下面命令完成插件安装: npm install -- ...
随机推荐
- springMVC-基本认识
MVC设计模式 Controller Model View SpringMVC 1. 实现MVC设计模式的框架 2. 基于springIOC,是spring的一个子模块,不需要整合 核心组件 1. ...
- django+xadmin在线教育平台(十)
剩余app model注册 courses注册 新建courses/adminx.py: # encoding: utf-8 __author__ = 'mtianyan' __date__ = '2 ...
- jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- IBM Rational Software Architect V9.0安装图解
IBM Rational Software Architect(RSA) -- IBM软件开发平台的一部分 – 是IBM在2003年二月并购Rational以来,首次发布的Rational产品.改进过 ...
- stark组件(7):增加分页功能
效果图: 分页部分代码: # 1.分页处理 all_count = self.model_class.objects.all().count() query_params = request.GET. ...
- C语言指针篇(二)多级指针
多级指针 多级指针常常使用于数组.这里仅仅介绍一下它长什么样,后文会再次详细对比使用. 多级指针呢,常见的有二级指针.见图. 二级指针的 ...
- 笔记-python-lib-requests常用类/方法/属性
笔记-python-lib-requests常用类/方法/属性 1. requests模块常用类/方法/属性 在使用中发现对requests模块不够熟悉,写了几个案例后重新整理了一下文档,罗 ...
- Hive数据导入导出的n种方式
Tutorial-LoadingData Hive加载数据的6种方式 #格式 load data [local] inpath '/op/datas/xxx.txt' [overwrite] into ...
- HTML介绍和head标签-01
主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织 ...
- 2037: [Sdoi2008]Sue的小球
2037: [Sdoi2008]Sue的小球 链接 题解 论文 代码 #include<cstdio> #include<algorithm> #include<cstr ...