Смотреть рекурсивные файлы scss в gulp - PullRequest
Новая
       32

Смотреть рекурсивные файлы scss в gulp

0 голосов
/ 05 апреля 2019

Я использую gulp для компиляции нескольких тем из базовой темы. Если я внесу изменения в подфайл, «часы» не распознают изменения. Изменения распознаются только при изменении файла этих тем.

Структура моей папки 

├── node_modules
├── src/
│   ├── base/
│   │   ├── bootstrap
│   │   └── custom
│   ├── themes/
│   │   ├── theme1.scss
│   │   └── theme2.scss
│   └── main.scss
└── gulpfile.js

theme1.scss импортирует main.scss main.scss импортирует все файлы начальной загрузки и _all.scss из пользовательского каталога.

Мой конфиг gulp: 

gulp.task('styles', function () {
    gulp.src('src/themes/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./css/themes'));
});

если я пытаюсь использовать src/**/*.scss в качестве gulp.src, он пытается скомпилировать каждый отдельный файл внутри src/base/bootstrap и src/base/custom и вылетает, потому что переменные не могут быть найдены.

Чего я хочу достичь: Наблюдатель видит изменения в src/base/custom/_header.scss и компилирует theme1.scss и theme2.scss

Может кто-нибудь помочь мне настроить мою конфигурацию соответственно?

1 Ответ

1 голос
/ 05 апреля 2019

Кажется, нет задачи наблюдателя.Вам нужно иметь другой набор файлов для просмотра и другой набор для компиляции.

Определите задачу-наблюдатель с glob файлами для просмотра:

Gulp 4

// Watch for file changes in any .scss file
gulp.task("watch-styles", function () {
    return gulp.watch(['src/**/*.scss'], gulp.series('styles'));
    //return gulp.watch(['src/base/custom/_header.scss'], gulp.series('styles'));
});

Gulp 3 

// Watch for file changes in any .scss file
gulp.task("watch-styles", function() {
  var watcher = gulp.watch(['src/**/*.scss'], ['styles']);
  //var watcher = gulp.watch(['src/base/custom/_header.scss'], ['styles']);
});

Ваша функция компиляции остается прежней.Здесь src glob указывает на файлы, которые вы хотите скомпилировать: 

gulp.task('styles', function () {
    gulp.src('src/themes/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./css/themes'));
});
...