Как сделать автообновление страницы через Gulp?

Question

[Tempest99]

Видел ранее как люди запускали автообновление страницы при изменении в редакторе кода просто в командной строке прописывая gulp, вместо длинного browser-sync...подскажите как это реализовать, я просто начинающий и может быть вопрос задал не совсем верно

Answer 1

[Denis Michurin]

https://browsersync.io/docs/gulp

Answer 2

[coderxx]

устанавливаете модуль browser-sync
в галпфайл добавляете:

let browserSync   = require('browser-sync');
gulp.task('browser-sync', function() {
	browserSync({
		server: {
			baseDir: 'app'
		},
		notify: false,
	})
});

Comments

[Tempest99]

так а как потом запускать?

[coderxx]

Tempest99, запускаете командой gulp browserSync из консоли.
Но чаще данная команда запускается в рамках команды watch, примерная конфигурация:

gulp.task('watch', ['styles', 'js', 'browser-sync'], function() {
	gulp.watch('app/scss/**/*.scss', ['styles']);
	gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['js']);
	gulp.watch('app/*.html', browserSync.reload)
});

здесь отслеживаются изменения в файлах стилей и скриптов, браузер автоматически перезагружается. Именно в таком формате browserSync имеет смысл.

[Alexon Classic]

coderxx, А с PHP страницами так же?

[coderxx]

Alexon Classic, конечно. Не забудьте в таске 'watch' добавить мониторинг файлов *.php:

gulp.watch('app/*.html', 'app/*.php', browserSync.reload)