gulp 依赖于文件夹构建 css答案

【问题标题】：gulp building css in dependency to foldergulp 依赖于文件夹构建 css
【发布时间】：2017-08-02 23:25:49
【问题描述】：

是否可以构建一个依赖于我的主题文件夹的 css 文件？问题是我在那里有几个主题具有相同的设置 gulp 应该使用 Theme.scss 并将 css 文件构建到 Theme、Theme1 等中。

gulp.task('sass', function () {
    return gulp.src('Css/Clients/**/theme.scss') // Gets all files ending with .scss
    .pipe(sass({outputStyle: 'compact'}))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
        stream: true
    }))
});

gulp.task('watch', ['browserSync', 'sass', 'php'], function () {
    gulp.watch('Css/**/*.scss', ['sass']);
})

编辑：

我尝试了下面的解决方案，我得到的问题如下所示：

但我只需要主题文件夹中的theme.css 和theme1 文件夹中的theme1.css 等等！有什么建议吗？

 gulp.task('sass', function () {
    var folders = getFolders(scriptsPath);

    var tasks = folders.map(function(folder) {
        return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
        .pipe(sass({outputStyle: 'compact'}))
        // concat into foldername.js
        .pipe(concat(folder + '.css'))
        // write to output
        .pipe(gulp.dest(scriptsPath))
        // write to output again
        .pipe(gulp.dest(scriptsPath));
    });


   return merge(tasks);
    console.log(folders);

});

【问题讨论】：

标签： node.js sass gulp

【解决方案1】：

您可以像这样指定多个目的地：

gulp.task('sass', function () {
    return gulp.src('Css/Clients/**/theme.scss') // Gets all files ending with .scss
    .pipe(sass({outputStyle: 'compact'}))
    .pipe(gulp.dest('app/css'))
    .pipe(gulp.dest('app/Theme'))
    .pipe(gulp.dest('app/Theme1'))
    .pipe(browserSync.reload({
        stream: true
    }))
});

【讨论】：

所以结果会是 app/Theme1/Theme1.css？原因正是我每个文件夹只需要一个文件

【解决方案2】：

知道了，谢谢大家！

gulp.task('sass', function () {
var folders = getFolders(scriptsPath);

var tasks = folders.map(function(folder) {
    return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
    .pipe(sass({outputStyle: 'compact'}))
    // concat into foldername
    .pipe(concat(folder + '.css'))
    // write to output
    .pipe(gulp.dest(scriptsPath+folder))
});

});

【讨论】：