无法 gulp 使用浏览器同步来刷新快速服务器和 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。我在此处包含了我的 gulp 文件。

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/');

我尝试过的其他东西

在使用代理之前。我试图将浏览器同步的中间件切换到我拥有的快速服务器。我运行遇到的问题是这个文档似乎假设我知道我在用 express 做什么足以让它工作（我的意思是，文档几乎只显示了一个 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();
  });
});

无法 gulp 使用浏览器同步来刷新快速服务器和 json

can't get gulp to use browser-sync to refresh an express server and json

ajax

node.js

express

reactjs

gulp