I'm learning react and the first thing I wanted was a development environment that could handle the reloading and refreshing for me. I'm following along with their tutorial here:
Now I wanted to add gulp into this setup. The server ( http://ift.tt/1CjPQj6 )works fine on its own but doesn't have browser-sync and all the extras that come along with gulp of course.
so what I did was change the server's port to 9000 and proxy the browser-sync in. However, the proxy doesn't seem to pass ajax calls to the server so it can write the json. I've included my gulpfile here.
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']);
});
Other things I've tried
Before using a proxy. I tried to switch browser-sync's middleware to the express server I had. The problem I ran into is the documentation for this seems to assume I know what I'm doing with express enough to make it work (I mean, the documentation pretty much just shows a console.logged example. Pretty useless).
Aucun commentaire:
Enregistrer un commentaire