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 -- ...
随机推荐
- js、jquery中全局替换replace
str.replace(/需要替换的/g,"新字符串") //此处使用正则表达式
- 《JSON笔记之二》----封装JSONUtil
许多java开发人员对于fastjson再也熟悉不过了,这是alibaba开源的依赖,使用fastjson可以使我们很容易的把请求json串转换成为我们所需要的对象.list.map等对象格式,对于开 ...
- datatable 单元格默认文本
在列字段中添加属性:"defaultContent": "-"
- PHP无限分类生成树方法,非递归,引用
//这个是核心方法 function generateTree($items){ $tree = array(); foreach($items as $item){ ...
- C语言结构体指针成员强制类型转换
#include <stdio.h> #include <stdlib.h> typedef struct ListElmt_ { void *data; struct Lis ...
- const用法总结(通俗易懂)
const的意思可以概括为 “一个不能被改变的普通变量” ,使得const在一定程度上提高程序的安全性和可靠性. const的几种情况: 1. const的普通用法 int const size: c ...
- RepeatMasker使用
RM是library-based,通过相似性比对来识别重复序列,可以屏蔽序列中转座子重复序列和低复杂度序列(默认将其替换成N).使用数据库Dfam和Repbase. The Dfam database ...
- C语言实例解析精粹学习笔记——29
题目: 将字符行内单字之间的空格平均分配插入到单字之间,以实现字符行排版.也就是输入一个英文句子,单词之间的空格数目不同,将这些空格数平均分配到单词之间,重新输出. 代码如下(是原书中配套的代码,只是 ...
- Codeforces146D 概率DP
Bag of mice The dragon and the princess are arguing about what to do on the New Year's Eve. The drag ...
- python和matlab
一.python简介 python是一种面向对象的解释型计算机程序设计语言.python是纯粹的自由软件,源代码和解释器CPython遵循GPL协议.Python语法简介清晰,特色之一是强制用空白符作 ...