ajax - 无法让 gulp 使用浏览器同步来刷新 Express 服务器和 json

Question

我正在学习 React，我想要的第一件事就是一个可以为我处理重新加载和刷新的开发环境。我在这里跟随他们的教程:

http://facebook.github.io/react/docs/tutorial.html

现在我想将 gulp 添加到此设置中。服务器( https://github.com/reactjs/react-tutorial/blob/master/server.js )本身工作正常，但没有浏览器同步以及当然 gulp 带来的所有额外功能。

所以我所做的是将服务器的端口更改为 9000 并代理浏览器同步。但是，代理似乎没有将 ajax 调用传递到服务器，因此它可以写入 json。我已在此处包含了我的 gulpfile。

var gulp        = require('gulp');
var sass        = require("gulp-ruby-sass");
var filter      = require('gulp-filter');
var browserSync = require('browser-sync');
var sourcemaps  = require('gulp-sourcemaps');
var server      = require('gulp-express');
var reload      = browserSync.reload;

gulp.task('server', function(){
  server.run(['app.js']);

  browserSync({
    proxy: "localhost:9000"
  });

  gulp.watch("./scss/*.scss", ['sass']);
  gulp.watch("./app/**/*.html").on('change', reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  return sass('./scss', {sourcemap: true})
    .pipe(browserSync.reload({stream:true}))
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write('maps', {
        includeContent: false,
        sourceRoot: './app/css'
    }))
    .pipe(gulp.dest('./app/css'));
});

gulp.task('html', function () {
    browserSync.reload();
});

// Watch scss AND html files, doing different things with each.
gulp.task('default', ['server'], function () {
  gulp.watch("./scss/*.scss", ['sass']);
  gulp.watch("./app/**/*.html", ['html']);
});

这是 app.js 文件。您可以看到它如何尝试处理 json。

var fs = require('fs');
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.use('/', express.static(path.join(__dirname, 'app')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.get('/comments.json', function(req, res) {
  fs.readFile('_comments.json', function(err, data) {
    res.setHeader('Content-Type', 'application/json');
    res.send(data);
  });
});

app.post('/comments.json', function(req, res) {
  fs.readFile('_comments.json', function(err, data) {
    var comments = JSON.parse(data);
    comments.push(req.body);
    fs.writeFile('_comments.json', JSON.stringify(comments, null, 4), function(err) {
      res.setHeader('Content-Type', 'application/json');
      res.setHeader('Cache-Control', 'no-cache');
      res.send(JSON.stringify(comments));
    });
  });
});

app.listen(9000);

 console.log('Server started: http://localhost:9000/');

我尝试过的其他事情

在使用代理之前。我尝试将浏览器同步的中间件切换到我拥有的快速服务器。我遇到的问题是这个文档似乎假设我知道我在做什么，并且足够明确以使其工作(我的意思是，文档几乎只显示了一个 console.logged 示例。非常无用)。

使用中间件

var gulp        = require('gulp');
var sass        = require("gulp-ruby-sass");
var filter      = require('gulp-filter');
var browserSync = require('browser-sync');
var sourcemaps  = require('gulp-sourcemaps');
var reload      = browserSync.reload;

//server shit
var fs          = require('fs');
var path        = require('path');
var express     = require('express');
var bodyParser  = require('body-parser');
var app         = express();

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync({
        server: {
          baseDir: "./app",
          middleware: function (req, res, next) {
            app.use('./', express.static(path.join(__dirname, 'app')));
            app.use(bodyParser.json());
            app.use(bodyParser.urlencoded({extended: true}));

            app.get('./comments.json', function(req, res) {
              fs.readFile('_comments.json', function(err, data) {
                res.setHeader('Content-Type', 'application/json');
                res.send(data);
              });
            });

            app.post('./comments.json', function(req, res) {
              fs.readFile('_comments.json', function(err, data) {
                var comments = JSON.parse(data);
                comments.push(req.body);
                fs.writeFile('_comments.json', JSON.stringify(comments, null, 4), function(err) {
                  res.setHeader('Content-Type', 'application/json');
                  res.setHeader('Cache-Control', 'no-cache');
                  res.send(JSON.stringify(comments));
                });
              });
            });

            next();
          }
        }
    });

    gulp.watch("./scss/*.scss", ['sass']);
    gulp.watch("./app/**/*.html").on('change', reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  return sass('./scss', {sourcemap: true})
    .pipe(browserSync.reload({stream:true}))
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write('maps', {
        includeContent: false,
        sourceRoot: './app/css'
    }))
    .pipe(gulp.dest('./app/css'));
});

gulp.task('html', function () {
    browserSync.reload();
});

// Watch scss AND html files, doing different things with each.
gulp.task('default', ['serve'], function () {
  gulp.watch("./scss/*.scss", ['sass']);
  gulp.watch("./app/**/*.html", ['html']);
});

Answer 1

答案是nodemon!当 Nodemon 看到变化时，它只会重新启动服务器。我不必搞乱中间件或任何东西。然后我只是代理浏览器同步。

gulp.task('browser-sync', ['sass'], function() {

browserSync({
  port: 7000,
  proxy: "http://localhost:5000",
  files: ["app/**", "scss/**.*.scss"]
});

  gulp.watch(sassFolder + '**/*.scss', ['sass']);
  gulp.watch(distFolder + '**/*.html').on('change', reload);
});

gulp.task('nodemon', function (cb) {
  return nodemon({
    script: 'server.js',
    ignore: [
      './bower_components/**',
      './node_modules/**',
      './build/**'
    ]
  }).on('start', function () {
    cb();
  });
});