无法使用浏览器同步刷新一个快速服务器和JSON gulp
我正在学习反应，我想要的第一件事就是可以为我处理重新加载和刷新的开发环境。 我在这里跟随他们的教程：
http://facebook.github.io/react/docs/tutorial.html
现在我想在这个设置中joingulp。 服务器（ https://github.com/reactjs/react-tutorial/blob/master/server.js ）可以正常工作，但没有浏览器同步，当然还有一些额外的东西。
所以我所做的是将服务器的端口更改为9000，并代理浏览器同步。但是，代理似乎不会将ajax调用传递给服务器，因此可以写入json。 我在这里包含了我的大文件。
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']); });
答案是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(); }); });