When I run Gulp the UI page works on http://localhost:3001, but on http://localhost:3000 the browser serves a blank page that is stuck loading, no console errors.
I'm using WAMP on Windows 10, Gulp version 3.9.1, BrowserSync version 2.24.4.
This setup was working fine until recently, this has me stumped.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
gulp.task('sass', function(){
return gulp.src('sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('compress', function () {
gulp.src('scripts/js/*.js')
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '-min' }))
.pipe(gulp.dest('scripts/minified/'));
});
gulp.task('browserSync', function() {
browserSync.init({
proxy: "experiments"
});
});
gulp.task('watch',['browserSync', 'sass', 'compress'], function(){
gulp.watch('sass/*.scss', ['sass']);
gulp.watch('scripts/js/*.js', ['compress']);
gulp.watch('*.php', browserSync.reload);
gulp.watch('*.html', browserSync.reload);
gulp.watch('scripts/minified/*.js', browserSync.reload);
})
Terminal output
[17:24:44] Using gulpfile ~\Documents\Web Design Local\host\experiments\gulpfile.js
[17:24:44] Starting 'browserSync'...
[17:24:44] Finished 'browserSync' after 9.99 ms
[17:24:44] Starting 'sass'...
[17:24:44] Starting 'compress'...
[17:24:44] Finished 'compress' after 2.2 ms
[Browsersync] 1 file changed (universal.css)
[17:24:45] Finished 'sass' after 174 ms
[17:24:45] Starting 'watch'...
[17:24:45] Finished 'watch' after 17 ms
[Browsersync] Proxying: http://experiments
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://redacted:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://redacted:3001
--------------------------------------
Also looks like the ports are established correctly? Here's before the gulp task is run...
And after...
This problem was driving me nuts too because recently my proxys stopped working as well. I was trying to think what I changed - finally I realized I upgraded MalwareBytes to the latest version and it's firewall settings were messing with my ports. I disabled it and now it is working.
I hope this can help someone!