Компиляция нескольких SCSS с Gulp - PullRequest
Новая
       29

Компиляция нескольких SCSS с Gulp

6 голосов
/ 27 июня 2019

Я пытаюсь адаптировать конфигурационный Gulpfile для компиляции файлов SCSS путем создания нескольких связанных файлов, относящихся к их каталогам. То, что я имею в качестве записи, выглядит примерно так: 

scss/
   folder-1/
       file1.scss
       file2.scss
       ...
   folder-2/
       file1.scss
       file2.scss
       ...
   ...

И что я ожидаю получить в качестве вывода: 

css/
   folder1.bundle.css // Containing only all files inside folder 1
   folder2.bundle.css // Containing only all files inside folder 2

Нужно ли многократно запускать задачу Gulp-Sass с разными конфигурациями, или есть лучший способ сделать это?

Я уже тестировал что-то вроде: 

gulp.task('sass', () => {
    let tasks = sassConfig.map(config => {
        return gulp.src(config.sass.src)
            .pipe(sass().on('error', sass.logError))
            .pipe(rename(config.buildLocations.filename))
            .pipe(gulp.dest(config.buildLocations.css))
            .pipe(browserSync.reload({ stream: true }));
    });

    return merge(tasks);
});

И мой массив конфигурации выглядит так: 

const sassConfig = [
    global: {
        // Global styles configuration
        sass: {
            src: ['./scss/style.scss']
        },
        buildLocations: {
            css: './css/',
            filename: 'commons.bundle.css'
        }
    },
    pdp: {
        sass: {
            src: ['./scss/pdp/_pdp.scss']
        },
        buildLocations: {
            css: './css/pdp/',
            filename: 'pdp.bundle.css'
        }
    },
    plp: {
        sass: {
            src: ['./scss/plp/_plp.scss']
        },
        buildLocations: {
            css: './css/plp/',
            filename: 'plp.bundle.css'
        }
    },
    blog: {
        sass: {
            src: ['./scss/blog/_blog.scss']
        },
        buildLocations: {
            css: './css/blog/',
            filename: 'blog.bundle.css'
        }
    }
];

Когда я запускаю задачу, был скомпилирован только первый файл (commons.bundle.css), но не остальные ... Что-то не так с кодом выше?

Также, если я пытаюсь изменить порядок элементов массива sassConfig, он все равно продолжает компилировать commons.bundle.css, так что я думаю, что это не обязательно компилирует первый элемент массива ...

=====================================

РЕШЕНИЕ: Я обнаружил ошибку, вызванную подчеркиванием в начале каждого файла. Вот почему также 'styles.scss' был единственным компилятором файла. После удаления всех подчеркиваний из имен файлов, которые они скомпилировали!

...