Как добиться работы javascript при livereload browser-sync?

Question

[LCLR]

Пишу gulpfile для сборки и отладки проекта с pug, sass и javascript. Проблема в том, что при запуске таска watch скрипт (простейший алерт) не работает вообще. Если открыть собранный index.html браузером, то все работает.

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

[nakree]

Браузер ничего не перезагружает потому что Вы не следите за изменениями в js файлах.

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

Comments

[LCLR]

На данном этапе нет задачи обновлять страницу при изменении js. Браузер перезагружает страницу, если изменить pug, html, sass, css, но скрипт не выполняется.

[nakree]

LCLR, попробуйте вместо alert(1) написать сonsole.log(1).
Встроенные модальные окна криво работают когда браузер или вкладка находится в фоновом режиме.

[LCLR]

Вариант с сonsole.log(1) тоже не работает.

[nakree]

LCLR, ну тогда дело не в gulp, а в чем то другом. Вот один из моих конфигов, где все работает:

gulpfile.js

//main
var gulp = require('gulp');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
//css
var autoprefix = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var csso = require('gulp-csso');
var uncss = require('gulp-uncss');
var media = require('gulp-group-css-media-queries');
//other
var browserSync = require('browser-sync');
var rename = require('gulp-rename');

gulp.task('sass', function() {
	return gulp.src('scss/*.scss')
		.pipe(plumber())
		.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
		.pipe(rename({suffix: '.min'}))
		.pipe(gulp.dest('css/'))
		.pipe(browserSync.reload({stream: true}));
});

gulp.task('build', function() {
	return gulp.src('scss/*.scss')
		.pipe(plumber())
		.pipe(sass({outputStyle: 'default'}).on('error', sass.logError))
		.pipe(media())
		.pipe(uncss({
			html: ['index.html']
		}))
		.pipe(autoprefix([
      'Android 2.3',
      'Android >= 4',
      'Chrome >= 50',
      'Firefox >= 24',
      'Explorer >= 6',
      'iOS >= 6',
      'Opera >= 12',
      'Safari >= 6']))
		.pipe(csso({
			debug: true
		}))
		.pipe(rename({suffix: '.min'}))
		.pipe(gulp.dest('css/'))
		.pipe(browserSync.reload({stream: true}));
})

gulp.task('build-themes', function() {
	return gulp.src('scss/colors/*.scss')
		.pipe(plumber())
		.pipe(sass({outputStyle: 'default'}).on('error', sass.logError))
		.pipe(csso({
			debug: true
		}))
		.pipe(gulp.dest('css/colors/'))
		.pipe(browserSync.reload({stream: true}));
})



gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: "./",
            notify: false
        }
    });
});

gulp.task('watch', ['browserSync', 'sass'], function() {
	gulp.watch('scss/*.scss', ['sass']);
	gulp.watch(['index.html','js/*.js'], browserSync.reload);
});

[LCLR]

Исправил 2 ошибки и заработало:
1) В pug вместо script(src='../build/script.js') должно быть

script
				include ../build/script.js

2) В js вместо alert(message); должно быть alert('message');