Gulp: Jak utworzyć zadanie kompilujące wiele plików SASS?

Question

Mam następujący sass zadania, które kompiluje app.scss do app.css i przeładowuje stronę:

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

Teraz chcę skompilować inny plik, a mianowicie ui-toolkit.scss do ui-toolkit.css.

Czy to najlepszy sposób na zaktualizowanie zadania?

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

Wystarczy określić glob(s) pasujących do wielu plików SCSS. Te przykłady zakładają, że chcesz zapisać wyniki w tym samym katalogu, co plik źródłowy.

zestawienia każdy plik SCSS (w node_modules zbyt):

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

zestawienia SCSS pliki w konkretnych katalogów:

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

zestawienia tylko określonych plików (opcja baza potrzebna jest tutaj do zapisania ten sam katalog co plik źródłowy):

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