文档章节

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

阿振
 阿振
发布于 2016/06/25 00:52
字数 204
阅读 672
收藏 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

© 著作权归作者所有

阿振
粉丝 9
博文 55
码字总数 58791
作品 0
成都
高级程序员
私信 提问
加载中

评论(1)

cIouddyy
cIouddyy
毕竟,把人家惹哭了我还不知道该怎么去哄
【gulp】gulp + browsersync 构建前端项目自动化工作流

什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构建项目并减少频繁的...

朱羽佳
2017/02/21
0
0
gulp常用插件之browser-sync使用

更多gulp常用插件使用请访问:gulp常用插件汇总 browser-sync这是一个可以在多端(pc、移动、平板)实时监测文件修改,自动刷新浏览器的工具。其实这并不是转给gulp使用的,在其它构建工具也可...

osc_resa95yg
2019/12/09
3
0
BrowserSync 前端---多终端测试工具

前端开发测试工具有很多 其中BrowserSync 是一个非常好用的工具,可以在PC以及各类移动终端使用; BrowserSync 工具利用局域网IP创建一个本地服务器,会生成一个类似http://192.168.2.170:30...

osc_cmw77o4t
2018/02/07
1
0
BrowserSync 热更新的使用(保存后自动刷新)

BrowserSync使用的优点,BrowserSync监听条件中的文件,发现更新会立刻刷新浏览器,就像 vue中的热更新一样,解放F5实现自动更新,提高开发效率, 解决了使用双屏幕时来回切换的烦恼! 一 .安...

osc_0ub8pn17
2019/03/13
1
0
基于nodejs开发的总结

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

mircle
2018/03/15
1
0

没有更多内容

加载失败,请刷新页面

加载更多

腾讯副总裁魏颖:提瓢入市,倚杖而归

  魏颖,腾讯公司副总裁,2008 年加入腾讯,全面负责公司薪酬福利、绩效管理、员工关系以及海外业务人力资源。   ————————   很多人对人力资源(HR)工作的理解就是一些人事流...

alkcendkljk
38分钟前
13
0
OSChina 周二乱弹 —— 我要一份儿大姐姐的爱

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @Cobbage :分享赵雷的单曲《阿刁 (Diao)》: 《阿刁 (Diao)》- 赵雷 手机党少年们想听歌,请使劲儿戳(这里) @喵星人123 :昨天睡到半夜 突然...

小小编辑
39分钟前
11
0
window下 mongodb开启用户名和密码 权限

在默认情况下,mongod是监听在127.0.0.1之上的,任何客户端都可以直接连接27017,且没有认证。 好处是,用户可以即时上手,不用担心被一堆配置弄的心烦意乱。 坏处是,公网服务器搭建MongoDB...

东东笔记
今天
9
0
数据倾斜

数据倾斜: 两种数据倾斜发生的现象: 80%情况下都发生挂了,只有极少20%情况下能把task执行完成 窄依赖:结构简单,如果发生数据丢失,方便查找丢失的数据 宽依赖:结构复杂,如何发生数据丢...

七宝1
今天
20
0
我的jdk源码(十一):ArrayList

一、概述 ArrayList类是AbstractList的子类,实现了具体的add(), set(), remove()等方法。它是一个可调整大小的数组可以用来存放各种形式的数据。 二、源码分析 (1) 类的声明,源码如下: ...

Java觉浅
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部