Переходим на официальный сайт browser-sync, на главной странице увидим команду.
Клманду нужно прописать в окно команд в проекте npm I browser-synс --save-dev.
После успешной установки увидим, что плагин появился в package.json.
Открываем gulpfile.js и подключаем browser-sync. Пишем.
1 |
browserSync = require('browser-sync') |
Создаем task
Дальше создаем таск для browser-synс, с функцией которую задали в переменную browsersynk.
Определяем параметры. Первый это папка app.
1 2 3 4 5 6 7 8 |
gulp.task('browser-sync', function() { browserSync({ server: { baseDir: 'app' }, notify: false, }); }); |
Для отключения уведомлений пропишем notyfy: false.
Это все что надо для работы релоадера.
Прописываем команду в окне gulp browser-synс и видим, что запустился броузер.
Добавим новый pipe, в котором будем инджектить наши стили.
1 2 3 4 5 6 |
gulp.task('sass', function() { return gulp.src('app/sass/**/*.sass') .pipe(sass({outputStyle: 'expand'}).on("error", notify.onError())) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({stream: true})); }); |
Модифицируем task.watch.
Открываем квадратные скобки и делаем запятую.
В кавычках мы перечисляем таски, которые необходимо выполнить до запуска task.watch.
Чтобы следить за всеми файлами, которые меняются воспользуемся функцией reload
1 2 3 4 5 |
gulp.task('watch', ['sass', 'js', 'browser-sync'], function() { gulp.watch('app/sass/**/*.sass', ['sass']); gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['js']); gulp.watch('app/*.html', browserSync.reload); }); |