Не обновляется styles в сборке gulp?

Question

[lera_nelera]

сделала такую сборку Gulp. и не обновляется файл style.min.css. хотя на аналогичной сборке в предыдущем проекте все работает. ошибок не выдает. в чем может быть проблема?

const { src, dest, watch, parallel } = require('gulp');
const concat = require('gulp-concat');
const scss = require('gulp-sass')(require('sass'));
var browserSync = require('browser-sync').create();

function browsersync(){
   browserSync.init({
      server: {
          baseDir: "app/"
      },
      notify: false
  });
}

function styles(){
    return src('app/scss/style.scss')
     .pipe(scss({outputStyle:'compressed'}))
     .pipe(concat('style.min.css'))
     .pipe(dest('app/css'))
     .pipe(browserSync.stream())
}

function scripts(){
    return src([
       'node_modules/jquery/dist/jquery.js',
       'node_modules/slick-carousel/slick/slick.js',
       'app/js/main.js'
    ])
    .pipe(concat('main.min.js'))
    .pipe(dest('app/js'))
    .pipe(browserSync.stream())
 }

 function watching(){
    watch(['app/scss/**/*.scss'],styles);
    watch(['app/js/**/*.js', '!app/js/main.min.js'], scripts);
    watch(['app/**/*.html']).on('change', browserSync.reload);
 }

exports.styles = styles;
exports.watching = watching;
exports.browsersync =browsersync;
exports.default = parallel(styles, scripts, browsersync, watching);

Comments

[Froggyweb]

в путях к файлам?

[lera_nelera]

Froggyweb, ошибка в путях к файлам?

[lera_nelera]

lera_nelera, там все верно

[Михаил Ливач]

lera_nelera, а js минифицируется? Если да, может, должно быть так:

return src(['app/scss/style.scss'])
     .pipe(scss({outputStyle:'compressed'}))
     .pipe(concat('style.min.css'))

либо вместо concat() что-то другое, для работы с одним файлом

Answer 1

[alex1nd]

Проверьте, правильно ли указан путь к файлам SCSS (app/scss/style.scss). Возможно, файл лежит в другой папке или имеет другое имя. Можно попробовать сделать путь более универсальным:

return src('app/scss/**/*.scss')

Хотя ошибок не выводится, возможно, ошибки есть, но они не отображаются. Чтобы убедиться, что SCSS компилируется правильно, можно добавить обработку ошибок с помощью gulp-plumber:

const plumber = require('gulp-plumber');

Затем обернуть SCSS-компиляцию:

return src('app/scss/**/*.scss')
  .pipe(plumber())
  .pipe(scss({ outputStyle: 'compressed' }))
  .pipe(concat('style.min.css'))
  .pipe(dest('app/css'))
  .pipe(browserSync.stream());

Убедитесь, что файлы действительно обновляются в папке app/css. Проверьте, создается ли файл style.min.css в нужной папке. Если файл создается, но не обновляется автоматически, возможно, проблема в BrowserSync. Попробуйте перезапустить сборку Gulp и убедиться, что BrowserSync работает корректно.

Проверьте версии установленных плагинов (Gulp, Gulp-sass, BrowserSync). Иногда конфликты между версиями могут вызывать проблемы. Убедитесь, что все пакеты актуальны и совместимы друг с другом.