Для настройки browser-sync в Gulp.js версии 4 и указания правильного пути к изображениям (img) вы можете использовать следующий код:
1. Установите необходимые зависимости:
npm install gulp browser-sync
2. Создайте файл gulpfile.js и подключите необходимые модули:
const gulp = require('gulp'); const browserSync = require('browser-sync').create();
3. Определите задачу для browser-sync:
gulp.task('browser-sync', function() { browserSync.init({ server: { baseDir: "./" }, notify: false }); });
4. Определите задачу для слежения за изменениями файлов и перезапуска browser-sync:
gulp.task('watch', function() { gulp.watch('./img/**/*', gulp.series('reload')); }); gulp.task('reload', function(done) { browserSync.reload(); done(); });
5. Определите основную задачу, которая будет запускаться по умолчанию:
gulp.task('default', gulp.series('browser-sync', 'watch'));
6. Запустите Gulp:
gulp
7. Теперь, если вы перемещаете или изменяете изображения в папке "./img", browser-sync будет автоматически обновлять страницу каждый раз, когда происходят изменения.
Обратите внимание, что в данном примере предполагается, что ваши изображения находятся в папке "./img". Если у вас другая структура папок, вам нужно будет указать правильный путь в соответствии с вашей файловой структурой.