文档章节

使用gulp和browserSync实现页面自动刷新

阿振
 阿振
发布于 2016/06/25 00:52
字数 204
阅读 155
收藏 0

在平时开发时,我用过很多gulp的自动刷新工具,昨天试了下browser-sync这款插件,感觉确实不错,分享给大家。

gulp和browser-sync的安装就不多介绍了,下面给出命令

$ cnpm install --save-dev gulp browser-sync

将下面的文件写入gulpfile.js文件

'use strict';

// 先引入依赖模块
var gulp = require("gulp"),
    browserSync = require("browser-sync");


// 自动刷新 browser-sync start
gulp.task('browser',function(){
  browserSync({
    // host: 172.16.157.1,
    port: 3000,
    open: true,
    // 路径显示/src开始
    startPath: "/src",
    //timestamps:false,
    server: {
      directory: true,
      routes: {
        '/src': "./src/index.html"
      },
      middleware: function(req,res,next){
        console.log("中间件");
        next();
      },
      baseDir: './'
    },
    // 指定浏览器
    // browser: "google chrome" // 或  ["google chrome","firefox"]
    // 延迟刷新,默认0
    reloadDelay: 1,
    // 是否载入css修改,默认true
    injectChanges: false
  });
});
gulp.task('bro',function(){
  gulp.src('./src/**')
  .pipe(browserSync.reload({stream:true}));
});
gulp.task('default',['bro','browser'],function(){
  gulp.watch('./src/**',['bro']);
});
// 自动刷新 browser-sync end

© 著作权归作者所有

共有 人打赏支持
阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
加载中

评论(1)

zxl78585
zxl78585
毕竟,把人家惹哭了我还不知道该怎么去哄
dashboard开发环境搭建

1.dashboard开发环境搭建(Linux -ubuntu 16.04.2) 参考:dashboard工程目录下的requirements-installation.md和getting-started.md unbuntu安装 & java7安装 1)ubuntu 16.04.2 下载 地址:h......

v1-alpha
2017/10/31
0
0
gulp自动刷新浏览器

项目本地后端开发语言是是基于apache的php,域名为cloud.xxx.com。刚开始想实现浏览器F5自动刷新使用到的是grunt和livereload插件,gulp也有对应的方法,移步「gulp教程之gulp-livereload」。...

cobish
2016/04/14
1K
0
第210天:node、nvm、npm和gulp的安装和使用详解

一、node 1、什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行JS代码。JS由ES(ECMAScript),DOM...

半指温柔乐
04/01
0
0
重构构建的平凡之路

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:李旦 导语 刚开始做前端的时候,一直以为切好页面是重构的全部职责,在切好页面的前提,增加页面交互,这样已经能到重构的顶...

腾讯云社区
2017/11/29
0
0
WEB前端 -“懒人”养成计划

引言 作为一名码农,更作为一名页面仔,我只想说:哪一个程序员,不想在写代码的时候偷点懒?当然这个懒,不是指那种当个纯粹的搬运工(CTRL+C,CTRL+V大神),而是用更少的时间去完成日常的工...

力谱宿云
2016/07/14
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

Kafka如何做到1秒处理1500万条消息?

Apache Kafka 是一款流行的分布式数据流平台,它已经广泛地被诸如 New Relic(数据智能平台)、Uber、Square(移动支付公司)等大型公司用来构建可扩展的、高吞吐量的、且高可靠的实时数据流系统...

架构师springboot
28分钟前
7
0
如何清理Nexus Repository Manager

随着开发运维一体化的理念逐渐深入,持续集成流水线已经成为软件开发的标配。持续集成通过高度自动化的方式,使得构建发布变得非常简单,构建发布次数随之变的越来越多。我们在享受高频次的构...

JasonSE
41分钟前
1
0
聊聊storm的ack机制

序 本文主要研究一下storm的ack机制 实例 SentenceSpout public class AckSentenceSpout extends BaseRichSpout { private ConcurrentHashMap<UUID, Values> pending; private Spo......

go4it
50分钟前
1
0
《netty入门与实战》笔记-05:netty内置的channelHandler

Netty 内置了很多开箱即用的 ChannelHandler。下面,我们通过学习 Netty 内置的 ChannelHandler 来逐步构建我们的 pipeline。 ChannelInboundHandlerAdapter 与 ChannelOutboundHandlerAdap...

Funcy1122
今天
3
0
帧动画(wifi信号动态动画)

准备六张wifi不同信号强度的素材图片,复制到drawable目录中 在drawable目录中新建frame文件,并编写代码 <animation-list xmlns:android="http://schemas.android.com/apk/res/android"> ...

lanyu96
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部