var gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const del = require('del');
const browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
//Порядок подключения js файлов
const jsFiles = [
'./src/js/lib.js',
'./src/js/main.js'
]
gulp.task('sass', function () {
return gulp.src('./src/sass/**/*.sass')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./build/css'))
.pipe(browserSync.stream());
});
//Таск на скрипты JS
function scripts() {
//Шаблон для поиска файлов JS
return gulp.src(jsFiles)
.pipe(concat('script.js'))
.pipe(uglify({
toplevel: true
}))
//Выходная папка для скриптов
.pipe(gulp.dest('./build/js'))
.pipe(browserSync.stream());
}
//Удалить всё в указанной папке
function clean() {
return del(['build/*'])
}
function watch() {
browserSync.init({
server: {
baseDir: "./"
}
});
//Следить за JS и SASS файлами
gulp.watch('./src/js/**/*.js', scripts)
gulp.watch('./src/sass/**/*.sass', sass)
//При изменении HTML запустить синхронизацию
gulp.watch("./*.html").on('change', browserSync.reload);
}
gulp.task('scripts', scripts);//Таск вызывающий функцию scripts
gulp.task('del', clean); //Таск для очистки папки build
gulp.task('watch', watch); //Таск для отслеживания изменений
//Таск для удаления файлов в папке build и запуск sass и scripts
gulp.task('build', gulp.series(clean, gulp.parallel(scripts,sass)));
Когда запускаешь таск watch, gulp должен следить за изменением html, js и sass файлов, потом конкатенируются js файлы, компилируется sass в css и потом browser-sync перезагружает браузер на основе этих изменений. С JS файлами все работает, а sass не компилируется, при том, что сам таск sass (который компилирует) работает правильно. Помогите, пожалуйста