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 -- ...
随机推荐
- python基础数据类型之字符串操作
1.字符串切片ps:字符串是不可变的对象, 所以任何操作对原字符 是不会有任何影响的 s1 = "python最简洁" print(s1[0]) print(s1[1]) prin ...
- Linux下配置npm存放路径,解决权限问题
1.打开cmd命令行,查看当前配置 输入 npm config ls 先看一下当前npm的配置环境,由于我已经修改过,所以可以看到修改后的路径 2.修改路径 这里需要修改两个路径,module路径和c ...
- python--Matplotlib(一)
基础知识薄弱的同学可以看看一下博客 https://www.cnblogs.com/dev-liu/p/pandas_plt_basic.html https://blog.csdn.net/Notz ...
- php图片上传旋转压缩方法
用到php的exif扩展,需要开启exif 在php.ini文件中去掉exif组件的注释 extension=php_mbstring.dll //要放在php_exif.dll前面让它先加载 ext ...
- linpack_2
Run linpack in server 1.Get computer nodal information lscpu dmidecode -t memory | head -45 | tail - ...
- Ubuntu 16.04上安装并配置Postfix作为只发送SMTP服务器
如果大家已经在使用第三方邮件服务方案发送并收取邮件,则无需运行自己的邮件服务器.然而,如果大家管理一套云服务器,且其中安装的应用需要发送邮件通知,那么运行一套本地只发送SMTP服务器则更为理想. 如何 ...
- Android onConfigurationChanged 收不到回调
我返现,90度横屏 旋转到270度横屏onConfigurationChanged 是收不到回掉的.尽管清单里面声明了什么: android:configChanges="orientati ...
- 腾讯QQ空间穿越时光轴3D特效
<DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style&g ...
- react基本知识点合集
妹子UI里面有React的相关组件与用法:http://amazeui.org/react/components React官方网站:https://facebook.github.io/react/ ...
- 剑指Offer - 九度1513 - 二进制中1的个数
剑指Offer - 九度1513 - 二进制中1的个数2013-11-29 23:35 题目描述: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 输入: 输入可能包含多个测试样例. ...