需要安装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. mysql 自增主键为什么不是连续的?

    由于自增主键可以让主键索引尽量地保持递增顺序插入,避免了页分裂,因此索引更紧凑 MyISAM 引擎的自增值保存在数据文件中 nnoDB 引擎的自增值,其实是保存在了内存里,并且到了 MySQL 8.0 ...

  2. Maven - 修改本地仓库位置

    默认的本地仓库是在:当前的用户目录/.m2/repository 修改位置: 1. 打开maven的conf/settings.xml,找到如下图这一段: 2. 把<localRepositor ...

  3. Linux编译移植Qt4的环境_在OMAPL138平台

    Linux编译Qt4的环境_OMAPL138 手里有一块创龙OMAPL138的板子,我要在上面成功移植Qt环境和触摸屏幕,这是我第二次进行Linux的Qt环境移植,发现了很多问题,需要重新整理. 我编 ...

  4. 笔记-git-git服务器安装及配置

    笔记-git-git服务器安装及配置 1.      GIT服务器简介 Git 可以使用四种主要的协议来传输数据:本地传输,SSH 协议,Git 协议和 HTTP 协议.下面分别介绍一下哪些情形应该使 ...

  5. ElasticSearch 之 Client

    在使用ElasticSearch的时候,我们需要与Cluster通信,Java版本的API提供了几种方式来构造Client,进而通过Client操作Cluster.   1)使用Node与clusto ...

  6. linux中jdk的安装与mysql 的安装

    1.linux安装jdk #先找到 安装包#cd /usr/java tar -zxvf jdk-8u31-linux-x64.tar.gz 2.安装选择要安装java的位置,如/usr/目录下,新建 ...

  7. Webpack标准配置

    let htmlWebpckPlugin= require('html-webpack-plugin');//该组件能将src下面提定的html文件与打包后在js文件打包在一起module.expor ...

  8. Delphi中的关键字与保留字

    Delphi中的关键字与保留字 分类整理 Delphi 中的“关键字”和“保留字”,方便查询 感谢原作者的收集整理! 关键字和保留字的区别在于,关键字不推荐作标示符(编译器已经内置相关函数或者留给保留 ...

  9. 【Divided Two】cpp

    题目: Divide two integers without using multiplication, division and mod operator. If it is overflow, ...

  10. Python之进程、线程、协程

    进程和线程的目的 进程和线程目的是为了:提高执行效率 现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务“呢?简单地说,就是操作系 ...