4 Август 2017

Автор: mastweb Рубрика: Верстка Комментариев нет

livereload страниц в browsersync

Переходим на официальный сайт browser-sync, на главной странице увидим команду.

Клманду нужно прописать в окно команд в проекте npm I browser-synс --save-dev.

После успешной установки увидим, что плагин появился в package.json.

Открываем gulpfile.js и подключаем browser-sync. Пишем.

browserSync = require('browser-sync')

1	browserSync = require('browser-sync')

Создаем task

Дальше создаем таск для browser-synс, с функцией которую задали в переменную browsersynk.

Определяем параметры. Первый это папка app.

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

gulp.task('browser-sync', function() {

browserSync({

server: {

baseDir: 'app'

notify: false,

});

Для отключения уведомлений пропишем notyfy: false.

Это все что надо для работы релоадера.

Прописываем команду в окне gulp browser-synс и видим, что запустился броузер.

Добавим новый pipe, в котором будем инджектить наши стили.

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}));
});

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

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);
});

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);

});