Gulp: Wie erstellt man eine Aufgabe, die mehrere SASS-Dateien kompiliert?

Question

Ich habe folgende sass Aufgabe, die app.scss-app.css und die Seite neu geladen kompiliert:

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

Nun, ich möchte eine andere Datei kompilieren, nämlich ui-toolkit.scss-ui-toolkit.css.

Ist dies der beste Weg, um die Aufgabe zu aktualisieren?

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

Geben Sie einfach glob(s), die mehrere SCSS Dateien entsprechen. In diesen Beispielen wird davon ausgegangen, dass Sie die Ergebnisse in demselben Verzeichnis wie die Quelldatei speichern möchten.

Spiele jede SCSS Datei (in node_modules auch):

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

Spiele SCSS Dateien in bestimmten Verz:

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

Spielen nur bestimmte Dateien (Basisoption ist hier erforderlich, um für die Rettung das selbe Verzeichnis wie die Quelldatei):

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