Browsersync能让浏览器实时、快速响应你的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。你的任何一次代码保存,以上的设备都会同时显示你的改动”。

  Browsersync可以单独使用,也可以集成到gulp和grunt这样的构建工具中使用,在node.js项目中还能结合gulp-nodemon实现全栈的自动刷新,而在移动端设备上同步调试的功能对移动web开发显然是很有帮助的。

  相关网站查看 :

Browsersync中文网 - 省时的浏览器同步测试工具  http://www.browsersync.cn/

Browsersync + Gulp.js - Browsersync中文网       http://www.browsersync.cn/docs/gulp/

  一、单独使用Browersync官网都讲得很详细,在此不做赘述.

    二、结合gulp使用Browsersync.

   1..全局安装gulp:$ npm install -g gulp

   2..初始化项目生产package.json : $ npm init

   3..安装项目依赖 : $ npm install --save-dev gulp browser-sync

   4..在项目的gulpfile.js中新建任务 :

 var gulp = require('gulp'); 

 // 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。
var browserSync = require('browser-sync').create(); // 定义一个任务,任务的名字,该任务所要执行的一些操作
gulp.task('watch', function() { // 启动Browsersync服务。代理服务器(proxy)或静态服务器(server)
browserSync.init({ // 设置监听的文件,以gulpfile.js所在的根目录为起点,如果不在根目录要加上路径,单个文件就用字符串,多个文件就用数组
files: ["*.html", "css/*.css", "js/*.js"], // 启动静态服务器,默认监听3000端口,设置启动时打开的index.html的路径
server: { baseDir: "./" }, // 在不同浏览器上镜像点击、滚动和表单,即所有浏览器都会同步
ghostMode: { clicks: true, scroll: true }, // 更改控制台日志前缀
logPrefix: "learning browser-sync in gulp", // 设置监听时打开的浏览器,下面的设置会同时打开chrome, firefox和IE
browser: ["chrome", "firefox", "iexplore"], // 设置服务器监听的端口号
port: 8080 });
}); 

    5..命令行中执行gulp watch任务即可启动browserSync监听.

  

    三、Browsersync结合nodemon实现node.js项目的全栈刷新.

   1..supervisor修改代码时可以自动重启服务器但不更更新浏览器,类似supervior工具的有nodemon(推荐)、node-dev、hotnode.

     2.. 使用gulp+browersync+nodemon结合全战刷新express项目分两步 :

      (1),使用gulp-nodemon插件代替nodemon,使用gulp-nodemon启动node服务

      (2),启动node服务之后启动Browersync任务,监听相关文件

      

var gulp = require('gulp');
// 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。
var browserSync = require('browser-sync').create(); // 这里reload不加括号,只引用不调用
// var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('server', function() {
nodemon({
script: 'app.js',
// 忽略部分对程序运行无影响的文件的改动,nodemon只监视js文件,可用ext项来扩展别的文件类型
ignore: ["gulpfile.js", "node_modules/", "public/**/*.*"],
env: { 'NODE_ENV': 'development' } }).on('start', function() {
browserSync.init({
proxy: 'http://localhost:3000',
files: ["public/**/*.*", "views/**", "routes/**"],
port:8080 },
function() {
console.log("browser refreshed.");
});
});
});

    

Browsersync结合gulp和nodemon实现express全栈自动刷新的更多相关文章

  1. gulp配置(编译压缩转码自动刷新注释全)

    参考自:http://www.sheyilin.com/2016/02/gulp_introduce/ 在原先基础上增加了less编译 es6转码资源地图等,修改了一部分的热刷新. gulpfile. ...

  2. 详解如何使用gulp实现项目在浏览器中的自动刷新

    情况描述: 我们很容易遇到这样一种情况: 我们并不是一开始就规划好了整个项目,比如可能接手别人的项目或者工程已经手动创建好了,现在要想利用gulp来实现浏览器自动刷新,那么如何做呢? 其实非常简单,本 ...

  3. gulp+browserSync+nodemon 实现express 全端自动刷新的实践

    学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...

  4. nodejs里的express自动刷新高级篇【转载】

    搬运自[简书:http://www.jianshu.com/p/2f923c8782c8]亲测可用哦! 最近在使用express框架及mongodb,由于前端和后端代码修改后都需要实现自动刷新功能,刚 ...

  5. express+gulp+gulp-nodemon+browser-sync自动刷新

    express自动生成项目.不在赘述 1.在项目根目录下新建终端,依次运行如下命令 npm install gulp --save-dev npm install gulp-nodemon --sav ...

  6. 一个 "开箱即用" 个人博客全栈系统项目!vue+node+express+mysql+sequlize+uniapp

    " MG'Blog " 一个 "开箱即用" 个人博客全栈系统项目! 探索本项目的源码 » 前台预览 · 管理端预览 v1.0.2 小程序预览 v1.0.2 介绍 ...

  7. 使用gulp+browser-sync搭建前端项目自动化以及自动刷新

    前段时间使用了gulp+browser-sync才发现这个东西真的很好用. 准备工作:(1).安装nodejs.gulp是基于nodejs使用的,所以先安装nodejs,https://nodejs. ...

  8. gulp browser-sync自动刷新插件

    很久没弄gulp了,都快忘了,今天又来温习下browser-sync 自动刷新插件,在安装的时候出现以下提示: $ npm install browser-sync --save-dev> ws ...

  9. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

随机推荐

  1. 【鬼畜】UVA - 401每日一题·猛男就是要暴力打表

    管他什么rev数组,msg数组简化代码 #define _CRT_SECURE_NO_WARNINGS #include <cmath> #include <iostream> ...

  2. mail 发送email

    (一)首先安装ssmpt和mailutils: sudo apt-get install ssmtp mailutils (二)接下来编辑配置文件sudo gedit /etc/ssmtp/ssmtp ...

  3. AndrewNG Deep learning课程笔记

    神经网络基础 Deep learning就是深层神经网络 神经网络的结构如下, 这是两层神经网络,输入层一般不算在内,分别是hidden layer和output layer hidden layer ...

  4. DBGridEh表尾显示合计 .....

    设置如下就可以了..... FooterRowCount  : 1 SumList--------Active:=true 双击 DBGridEh  加入所需要的列....然后在 需要合计的..... ...

  5. 转:GET和POST两种基本请求方法的区别

    原文地址:GET和POST两种基本请求方法的区别 原文如下: GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL ...

  6. 转:Java 集合详解

    原文地址:https://www.cnblogs.com/ysocean/p/6555373.html 一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发 ...

  7. pyhton读取 excel表格文件

    2019的第一天,忘记昨日之事,迎接新的明天. excel表格文件办公中常用,如通过Python操作这些数据需导入并有序读取这些数据 特随笔,供以后查阅 代码如下: import xlrd # fil ...

  8. java 数组(二)

    public class ArrayDemo{ public static void main(String[] args){ int[] arr = {1,5,3,8,2,9,17,13}; get ...

  9. centos安装Django之一:安装openssl

    这几天在部署Django,需要安装的东西有点多,python3.pip3.openssl(pip依赖ssl环境),所以第一步是安装openssl,如何安装呢?主要有三步,随ytkah一起来看看吧 1. ...

  10. MySQL数据库查询操作进阶——多表查询

    多表查询 在大部分情况下,我们用到的表都是彼此相关联的,所以我们会有相当大的需求用到跨表的查询,这个时候我们就需要将相关联的表连起来做多表查询. 多表查询分为连表查询和子查询,连表查询即将相关联的表连 ...