M
M
miha00182019-10-03 18:42:46
JavaScript
miha0018, 2019-10-03 18:42:46

Live compilation of sass does not work (Browsersync, Gulp 4), explain to the fool what is wrong?

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

When you run the watch task, gulp has to watch for changes in html, js and sass files, then js files are concatenated, sass is compiled to css, and then browser-sync reloads the browser based on these changes. Everything works with JS files, but sass does not compile, despite the fact that the sass task itself (which compiles) works correctly. Help me please

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question