Gulp-Task für Sass aus mehreren Dateien

html.de-Forum JavaScript
1

Hallo Forum ich bin auf der Suche nach einem Gulp-Task der aus mehreren Sass-Dateien (in einer bestimmten Reihenfolge) eine einzige erstellt also bspw.:

[CODE]/scss/
cg-panel-filter.scss
cg-panel-color.scss

/css/
main.css[/CODE]

Bisher sieht es bei mir so aus (gekürzt):

[CODE]var sass = require(‚…/node_modules/gulp-sass‘);
var cssDirectory = „app/css/“;

gulp.task(‚sass‘, function() {
return gulp.src(„app/scss/*.scss“)
.pipe(sass())
.pipe(gulp.dest(cssDirectory))
.pipe(reload({stream: true}));
});[/CODE]

Gulp Concat habe ich schon probiert aber kann es nicht so richtig auf meinen Fall anpassen weil ich Gulp immer etwas schwierig zu verstehen finde. Als Bonus wäre es noch schön die main.css minifiziert zu haben.

Hoffe jemand kann mir helfen und mir erklären was ich warum ändern müsste (und welches Gulp-Plugin ich brauche)

Danke!

2

Den Thread habe ich spät gesehen. Falls die Frage noch aktuell ist:

Die Konfigurationsmöglichkeiten und das Globbing in Gulp sind nach meiner bisherigen Erfahrung nicht so komfortabel wie in Grunt. Um ein Array zu übergeben, oder bestimmte Files auszuschließen, braucht es ein extra Modul.
https://github.com/gulpjs/glob-stream

Alternativ dazu lässt sich ein Array natürlich auch durch eine Schleife schicken, wie ich es hier gemacht habe.
https://github.com/Tronjer/angular2-movie-app/blob/master/gulpfile.js

In deinem speziellen Fall ist es aber einfach. Du importierst alle .scss files als partials (_cg-panel-filter.scss) in der gewünschten Reihenfolge in eine main.scss und schickst letztere durch Gulp.

3

Entschuldige das späte Antworten. Der Tipp mit den partials war genau richtig. Ich hab das sogar mit meiner _variables.scss schon so gemacht, mir war nur nicht bewusst, dass Sass diese nicht weiter beachtet. Mein Task sieht genauso wie vorher aus, nur dass ich statt dem Pfad jetzt main.scss übergebe. Super!