How to get javascript to work on livereload browser-sync?

Question

JavaScript

I am writing a gulpfile to build and debug a project with pug, sass and javascript. The problem is that when the watch task is launched, the script (the simplest alert) does not work at all. If you open the collected index.html with a browser, then everything works.

index.pug

doctype html
html
  head
    meta(charset = 'utf-8')
    meta(name='viewport', content="initial-scale=1.0, width=device-width")
    title Webpack app
    style
      include ../build/main.css
  body
    div
      h1 Ocean's Eleven
      ul
        li Comedy
        li Thriller
      p.
        Danny Ocean and his eleven accomplices plan to rob
        three Las Vegas casinos simultaneously.
      script(src='../build/script.js')

gulpfile.js

var gulp = require('gulp'),
  sequence = require('gulp-sequence'),
  changed = require('gulp-changed'),
  pug = require('gulp-pug'),
  sass = require('gulp-sass'),
  browser = require('browser-sync');
  
gulp.task('server', ['build'], function() { 
  browser({ 
    server: {baseDir: 'build'},	
    notify: false 
  });
});

gulp.task('sass:build', function(){ 
  return gulp.src('src/*.sass')
    .pipe(changed('build', {extension: '.css'}))
    .pipe(sass()) 
    .pipe(gulp.dest('build')) 
});

gulp.task('pug:build', function(){ 
  return gulp.src('src/*.pug') 
    .pipe(pug()) 
    .pipe(gulp.dest('build')) 
});

gulp.task('build',
  sequence(['sass:build'], 'pug:build'
));

gulp.task('watch', ['server'], function() {
  gulp.watch(['src/*.pug', 'build/*.css'], ['pug:build']);
  gulp.watch('src/*.sass', ['sass:build']);
  gulp.watch('build/*.html', browser.reload);
});

Answer 1

The browser does not reload anything because you do not follow the changes in js files.

gulp.watch(['build/*.html', 'build/*.js'], browser.reload);