使用与node.js应用程序的浏览器同步

我有一个现有的节点应用程序。 我的节点目录结构是这样设置的:

./ node_modules/ src/ views/ index.html ... server.js test/ gulpfile.js package.json 

我可以成功地启动我的应用程序我的运行node ./src/server.js从上面显示的根。 一旦开始,我可以在浏览器中访问“ http:// localhost:3000 ”,看到index.html的内容,就像我期待的那样。

我想加快我的发展,我最近了解到浏览器同步 。 为了将其纳入我的g process过程,我有以下几点:

 var browserSync = require('browser-sync').create(); browserSync.init({ server: { baseDir: './src/', server: './src/server.js' } }); 

当我运行gulp时,我在命令行看到以下内容:

BS]访问URL:

  -------------------------------------- Local: http://localhost:3000 External: http://[ip address]:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://[ip address]:3001 -------------------------------------- 

我的浏览器然后打开,它试图加载http:// localhost:3000 。 在这一点上,我在浏览器窗口中看到以下错误:

 Cannot GET / 

我究竟做错了什么? 如果我使用node ./src/server.js启动我的应用程序,则可以成功访问http:// localhost:3000 ,但是,它像不能与BrowserSync一起运行。 我究竟做错了什么?

你已经有一个节点服务器,所以我认为你需要的是Proxy 。 而且我还build议你使用nodemonspeed up development 。 如果有任何更改,它将自动重新启动节点开发服务器。 所以你的情况(与nodemon )的示例gulpfile可能看起来像

 var gulp = require('gulp'); var browserSync = require('browser-sync'); var reload = browserSync.reload; var nodemon = require('gulp-nodemon'); gulp.task('browser-sync', ['nodemon'], function() { browserSync.init(null, { proxy: "http://localhost:3700", // port of node server }); }); gulp.task('default', ['browser-sync'], function () { gulp.watch(["./src/views/*.html"], reload); }); gulp.task('nodemon', function (cb) { var callbackCalled = false; return nodemon({script: './src/server.js'}).on('start', function () { if (!callbackCalled) { callbackCalled = true; cb(); } }); }); 

如果你有自己的./src/server.js你为什么要使用内置的服务器呢?

检查一下 ,浏览器同步中的服务器是为基本的HTML / JS / CSS网站创build一个静态服务器,所以你可能需要使用代理function,如下所示。 这意味着你需要像往常一样运行你的服务器,并把它包装在代理中。