Browsersync结合gulp和nodemon实现express全栈自动刷新

Posted hughes5135

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Browsersync结合gulp和nodemon实现express全栈自动刷新相关的知识,希望对你有一定的参考价值。

  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中新建任务 : 

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

 

    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全栈自动刷新的主要内容,如果未能解决你的问题,请参考以下文章

json Gulp,BrowserSync,Node和Nodemon都协调工作。 ;)

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

没有 gulp 的 Express 和 BrowserSync?

浏览器同步、gulp、mongodb 和 express 服务器

从 Package.json 脚本运行 BrowserSync 时出错

gulp,找不到命令 - 之前工作正常,然后突然停止