使用Gulp

Question

我正在尝试通过生成与目录相关的多个捆绑文件来使配置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”也是唯一的文件编译原因。从文件名中删除所有下划线后，它们就会被编译！