使用浏览器与节点同步.js应用程序

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

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

我可以从上面显示的根成功启动我的正在运行的应用程序node ./src/server.js。启动后，我可以在浏览器中访问"http://localhost:3000"并查看索引的内容.html就像我所期望的那样。

我想加快我的开发速度，我最近了解了浏览器同步。为了尝试将其包含在我的 gulp 过程中，我有以下内容：

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

当我运行gulp时，我在命令行中看到以下内容：

BS]访问网址：

 --------------------------------------
       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。我还建议你利用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();
        }
    });
});

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

检查一下，browsersync 中的服务器所做的是为基本的 HTML/JS/CSS 网站创建一个静态服务器，因此您可能需要使用代理功能，如下所示。这意味着您需要像正常运行服务器并将其包装在代理中。

使用 express 生成器默认文件夹结构和 binwww 中的启动脚本，并使用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 }

由于问题中缺少标签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>

相关内容

最新更新

热门标签：