文档章节

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

阿振
 阿振
发布于 2016/06/25 00:52
字数 204
阅读 164
收藏 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
毕竟,把人家惹哭了我还不知道该怎么去哄
基于nodejs开发的总结

1 browsersync http://www.browsersync.cn/docs/api/ 省时的浏览器同步测试工具 Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的...

mircle
03/15
0
0
WEB前端 -“懒人”养成计划

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

力谱宿云
2016/07/14
1K
5
gulp配合browser-sync怎么实现在自己的域名下刷新同步?

var gulp = require('gulp'); var browserSync = require('browser-sync').create(); gulp.task('serve', function() { browserSync.init({ proxy: "http://v35new.faqrobot.org/" }); gulp.......

vcxiaohan
2016/09/20
424
0
browser-sync 自动刷新调试插件利器使用指南

https://blog.csdn.net/ywl570717586/article/details/53190443 https://blog.csdn.net/q36835109/article/details/78677637 //好用 browser-sync start --proxy "http://localhost:8080/sm......

mircle
07/26
0
0
BrowserSync —— 多设备浏览器同步测试工具

当你开发响应式网站时,需要做大量的测试和调整工作。而 BrowserSync 可以让你的这个开发和测试过程更贱快速,通过在多个设备上同步 URL、交互和代码变动来实现快速的同时多设备测试。Brows...

oschina
2014/09/06
101
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 分布式链路跟踪 Sleuth + Zipkin + Elasticsearch

随着业务越来越复杂,系统也随之进行各种拆分,特别是随着微服务架构的兴起,看似一个简单的应用,后台可能很多服务在支撑;一个请求可能需要多个服务的调用;当请求迟缓或不可用时,无法得知...

编程SHA
13分钟前
1
0
Swift-清除缓存

func removeCache (){ // 取出cache文件夹路径.如果清除其他位子的可以将cachesDirectory换成对应的文件夹 let cachePath = NSSearchPathForDirectoriesInDomains(FileMan...

west_zll
14分钟前
1
0
kl键盘事件

frameworks/base/data/keyboards路径下定义了很对kl文件。如Vendor_0416_Product_0300.kl,定义了某某遥控器的按键事件 # TVkey 103 DPAD_UPkey 108 DPAD_DOWNkey 105 DPAD_LEFTk...

安卓工程师王恒
17分钟前
1
0
CentOS 7 安装 Docker

工具: Oracle VM VirtualBox 虚拟机 ,本地电脑win10 系统: 虚拟机装 centos 7 前置条件: Docker 要求 CentOS 系统的内核版本高于 3.10 1. 通过 uname -r 命令查看当前的内核版本 2. 如果不够...

_大侠__
28分钟前
1
0
webrtc onAddStream回调流程

背景 webrtc代码基于M59 正文 1. 回调设置和处理 (1)java层先在监听器中实现回调处理函数,如下所示: private class PCObserver implements PeerConnection.Observer { @Override...

bill_shen
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部