var gulp        = require('gulp'), // Подключаем Gulp
    sass        = require('gulp-sass'), // Подключаем Sass
    browserSync	= require('browser-sync'), // Подключаем Browser Sync

gulp.task('sass', function() { // Создаём таск Sass
	return gulp.src('app/sass/**/*.sass') // Берём источник
		.pipe(sass()) // Преобразуем Sass в CSS
		.pipe(gulp.dest('app/css')) // Выгружаем результат в папку app/css
		.pipe(browserSync.reload({stream: true})); // Обновляем страницу при изменении
});

gulp.task('html', function() { // Создаём таск HTML
    return gulp.src('app/*.html') // Берём источник
    	.pipe(browserSync.reload({stream: true})); // Обновляем страницу при изменении
});

gulp.task('browser-sync', function() { // Создаём таск Browser Sync
	browserSync({ // Выполняем Browser Sync
		server: { // Определяем параметры сервера
			baseDir: 'app' // Директория для сервера - app
		},
		notify: false // Отключаем уведомления
	});
});

gulp.task('watch', function() { // Создаём таск watch
	gulp.watch('app/sass/**/*.sass', gulp.parallel('sass')); // Наблюдение за sass файлами
	gulp.watch('app/*.html', gulp.parallel('html')); // Наблюдение за HTML файлами в корне проекта
});

gulp.task('default', gulp.parallel('sass', 'browser-sync', 'watch')); // Создаём дефолтный таск, вызывается коммандой gulp