Gulp: come creare un'attività che compila più file SASS?

Question

Ho la sass compito seguente che compila app.scss-app.css e ricarica la pagina:

gulp.task('sass', function() { 
    return gulp.src('./app/app.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('./app')) 
    .pipe(livereload()); 
}); 

ora, voglio compilare un altro file, vale a dire ui-toolkit.scss-ui-toolkit.css.

È questo il modo migliore per aggiornare l'attività?

gulp.task('sass', function() { 
    gulp.src('./ui-toolkit/ui-toolkit.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('./ui-toolkit')); 

    return gulp.src('./app/app.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('./app')) 
    .pipe(livereload()); 
}); 

Answer 1

Basta specificare glob(s) che corrispondono più file SCSS. Questi esempi presuppongono che si desidera salvare i risultati nella stessa directory del file sorgente.

Partite ogni file SCSS (in node_modules troppo):

gulp.task('sass', function() { 
    return gulp.src('./**/*.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('.')); 
}); 

Partite file SCSS in dirs specifici:

file

gulp.task('sass', function() { 
    return gulp.src('./{foo,bar}/*.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('.')); 
}); 

corrisponde solo specifici (opzione di base è necessario qui per il salvataggio in stessa directory del file sorgente):

gulp.task('sass', function() { 
    return gulp.src(['./foo/foo.scss', './bar/bar.scss'], { base: '.' }) 
    .pipe(sass()) 
    .pipe(gulp.dest('.')); 
});