6

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...

Command prompt output for netstat -ab before running gulp task

And after...

Command prompt output for netstat -ab after running gulp task

2
  • Did you manage to resolve this? Jul 12, 2018 at 20:49
  • Hi. Nope, it's still not working. Jul 15, 2018 at 18:22

4 Answers 4

5

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!

5
  • 1
    It was MalwareBytes. You're my hero! Jul 25, 2018 at 21:08
  • 1
    It looks like its Malwarebytes web protection specifically. An update is on the way, which may fix the problem. Aug 3, 2018 at 6:50
  • Latest Malwarebytes beta seems to fix the problem. Aug 12, 2018 at 5:01
  • 2
    OMFG You've just put and end to a week of misery! It was malwarebytes all along. Thank you so much
    – Marco
    Aug 16, 2018 at 11:12
  • How did you disable MalwareBytes on Mac? Just turning off real-time protection? That didn't help me.
    – Ryan
    Sep 11, 2018 at 17:57
1

I've set up gulp + browsersync as a test and I think – after some messing about and doc reading – you can change this:

gulp.task('browserSync', function() {
    browserSync.init({
        proxy: "experiments"
    });
});

to this:

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: 'experiments',
        host: 'experiments',
        open: 'external'
    });
});

...and it'll work.

Notes:

  • If unset, host defaults to null.
  • open is the browser action to take and defaults to true. Other options include false to NOT open a browser, and external as used here to open the URL specified in host.
  • I'd also suggest you use an extension, even if it is just for organisation in your Filesystem, vhosts setup and/or WAMP lists etc. .dev is useless over http in chrome these days, and .local messes with Multicast DNS services. I use .mere, you could use .pix ;) - your safest most future-proof bet is to use .test as per RFC 6761
1
  • No luck with that either. Thanks though. Jun 29, 2018 at 9:03
1

After installing new windows I had the same issue where the browser keep loading without initialising the project.

the issue was Browser Sync package needed an update so I had done the following

run the terminal as administrator 
cd into the project folder
rm -rf node_modules (if you already have the package.json file)
npm install

also you might need to rebuild the node-sass so you could use the following

npm rebuild node-sass

then run the gulp project and everything should work fine

0

when you go to experiments in the browser does it work?

It could be a browser update rather than gulp

I would try changing your host to dev.experiments.co.uk

then change the proxy to dev.experiments.co.uk

1
  • Hi. No luck with that. Thanks for the suggestion though. Jun 27, 2018 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.