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

Question

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

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

我可以从上面显示的根目录成功启动我的应用程序 my 运行ning node ./src/server.js。启动后，我可以在浏览器中访问“http://localhost:3000”，并像我期望的那样看到 index.html 的内容。

我想加快我的开发速度，我最近了解了browsersync。为了将其包含在我的 gulp 过程中，我有以下内容：

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。此时，我在浏览器中看到如下错误window:

Cannot GET /

我做错了什么？如果我使用 node ./src/server.js 启动我的应用程序，我可以成功访问 http://localhost:3000，但是，它不是运行 BrowserSync。我做错了什么？

Answer 1

如果您在 ./src/server.js 中有自己的服务器，为什么要使用内置服务器？

勾选this, What server in browsersync does is create a static server for basic HTML/JS/CSS websites, so you might need to use the proxy feature as shown here。这意味着您需要像往常一样运行您的服务器并将其包装在代理中。

Answer 2

您已经有一个节点服务器，所以我认为您需要的是 Proxy。而且我还建议您使用 nodemon 在 speed up development 事情上向前迈出一步。如果发生任何更改，它将自动重新启动您的节点开发服务器。所以你的例子中的示例 gulpfile（nodemon）可能看起来像

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();
        }
    });
});

~

Answer 3

使用 express 生成器默认文件夹结构和 bin\www 中的启动脚本，并使用 ejs 模板，这就是我修改 gulpfile.js 的方式：

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:8000", // port of node server
    });
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch(["./views/*.ejs"], reload);
});

gulp.task('nodemon', function (cb) {
    var callbackCalled = false;
    return nodemon({
        script: './bin/www', 
        env: {
        PORT: 8000
    }}).on('start', function () {
        if (!callbackCalled) {
            callbackCalled = true;
            cb();
        }
    });
});

请注意，我正在监视任何以 .ejs 结尾的文件。我在使用 nodemon 和正在使用的端口时也遇到了问题，所以我添加了一个 env 以将端口作为 8000 传递， env: { PORT: 8000 }

Answer 4

由于问题中缺少标签 grunt，这里有一个仅使用 NPM (package.json) 的解决方案：

"scripts": {
    "start": "browser-sync start --serveStatic 'src' --serveStatic 'node_modules' --files 'src'"
 }

现在所有 <script> src 属性都可以是相对的：

<script src="/stats-js/build/stats.min.js"></script>

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

Using browser-sync with node.js app

node.js

browser-sync