gulp building css in dependency to folder

Question

Is it possible to build an css file in dependency to my Theme folder? The problem is i have several themes in there with the same setup gulp should take Theme.scss and build an css file into Theme, Theme1 and so on.

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']);
})

Edit:

im tryed the solution below the problem i get looks like this :

but i need just the theme.css in theme folder ander theme1.css in theme1 folder and so on! any suggestions ?

 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);

});

Max · Accepted Answer · 2017-08-02 12:35:18Z

3

You can specify multiple destinations like this:

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
    }))
});

answered Aug 2, 2017 at 12:35

Max

99312 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mY777 Over a year ago

so the result would be app/Theme1/Theme1.css? cause is exactly what i need just one file per folder

mY777 · Accepted Answer · 2017-08-02 15:25:49Z

0

Got it thanks guys!

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))
});

});

answered Aug 2, 2017 at 15:25

mY777

2593 gold badges7 silver badges19 bronze badges

Collectives™ on Stack Overflow

gulp building css in dependency to folder

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related