Last week I tried writing a gulpfile from scratch for a small javascript project. I chose to use BrowserSync to pile my code and reload the browser (Chrome). It was working well throughout the weekend and I got the done. However, I feel like I opened up the project yesterday and now when I run the 'gulp' mand it doesn't connect to the browser, give the "Connected to BrowserSync" message, and provide the autoreload functionality. However in the console, I still get notified that my files are getting updated and piled.

Does anyone have any idea how this could happen?

Here's the gulpfile I'm using:

var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');

gulp.task('browser-sync', function() {
  var files = [
    'app/**/*/.html',
    'app/assets/css/**/*.css',
    'app/assets/js/**/*.js'
    ];

  browserSync.init(files, {
    server: {
      baseDir: './app'
    }
  });
});

// process JS files and reload all browsers when plete.
gulp.task('js', function () {
    return gulp.src('app/assets/js/*js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest('app/assets/js'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('sass', function() {
  return gulp.src('app/assets/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/assets/css'))
    .pipe(reload({stream: true}));
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function() {
  gulp.watch('app/assets/js**/*.js', ['js']);
  gulp.watch('app/assets/sass/*.scss', ['sass']);
  gulp.watch('app/*html', ['bs-reload']);
});

Thanks for any advice!

Last week I tried writing a gulpfile from scratch for a small javascript project. I chose to use BrowserSync to pile my code and reload the browser (Chrome). It was working well throughout the weekend and I got the done. However, I feel like I opened up the project yesterday and now when I run the 'gulp' mand it doesn't connect to the browser, give the "Connected to BrowserSync" message, and provide the autoreload functionality. However in the console, I still get notified that my files are getting updated and piled.

Does anyone have any idea how this could happen?

Here's the gulpfile I'm using:

var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');

gulp.task('browser-sync', function() {
  var files = [
    'app/**/*/.html',
    'app/assets/css/**/*.css',
    'app/assets/js/**/*.js'
    ];

  browserSync.init(files, {
    server: {
      baseDir: './app'
    }
  });
});

// process JS files and reload all browsers when plete.
gulp.task('js', function () {
    return gulp.src('app/assets/js/*js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest('app/assets/js'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('sass', function() {
  return gulp.src('app/assets/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/assets/css'))
    .pipe(reload({stream: true}));
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function() {
  gulp.watch('app/assets/js**/*.js', ['js']);
  gulp.watch('app/assets/sass/*.scss', ['sass']);
  gulp.watch('app/*html', ['bs-reload']);
});

Thanks for any advice!

• javascript
• browser
• synchronization
• gulp
• browser-sync

Share Improve this question Follow edited Nov 15, 2014 at 18:35 Armel Larcier 16k77 gold badges6969 silver badges8989 bronze badges asked Jul 24, 2014 at 14:53 jeremiahkonradjeremiahkonrad 4111 silver badge44 bronze badges 1

• 4 It sounds like the script tag is not getting injected into your pages. Can you view source and check if the browser-sync script tag is there. – shane Commented Nov 4, 2014 at 8:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It looks like the browsersync 'script' tag is not being injected in the html file you are serving from, re-check your html file , Sometimes i forget the body tag , If there is no body tag the script tag won't be injected.

when you run gulp , and your page loads up check out the source code (view page source) while it's opened up and check the html structure.

You can copy the tag from other project that you have working fine , run it and copy the script tag injected and paste it on your current project page.

the script tag looks like this (might be diffrent depending on BrowserSync version)

<body>
   <script id="__bs_script__">
     //<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.5'><\/script>".replace("HOST", location.hostname));//]]>
   </script>

Notice: In the above <script> tag browser-sync version is 2.18.5 make sure to replace that with your installed version of browser-sync

I had similar problem and it turned out that menting out body tag before actual body tag causes browsersync to stop injecting the script tag and hence refreshing the page. See examples:

THIS DOES NOT WORK:

<!-- <body> -->
<body class="modal_on">

THIS WORKS:

<body class="modal_on">
<!-- <body> -->

I'm using browsersync version 2.26.14