Gulp: Kompilieren Stylus und concat mit reinem CSS

Question

Ich habe eine Reihe von Stylus-Dateien in './styles/stylus/**.styl' und eine Reihe von CSS-Dateien in './styles/css/**.css'.

Wie verwende ich Gulp, um die Stylus-Dateien zu kompilieren, das Ergebnis mit allen CSS-Dateien zu verbinden und es an './styles/out.css' auszugeben?

Answer 1

Sie gulp-filter wie verwenden:

var gulp = require('gulp'); 
var stylus = require('gulp-stylus'); 
var concat = require('gulp-concat'); 
var Filter = require('gulp-filter'); 

gulp.task('css', function() { 

    var filter = Filter('**/*.styl', { restore: true }); 

    return gulp.src([ 
      './styles/stylus/**.styl', 
      './styles/css/**.css' 
     ]) 
     .pipe(filter) 
     .pipe(stylus()) 
     .pipe(filter.restore) 
     .pipe(concat('out.css')) 
     .pipe(gulp.dest('./styles')); 
}); 

Answer 2

Sie sollten in der Lage sein, zwei getrennte Ströme von Dateien zu erstellen und kombiniere sie mit event-stream:

var es = require('event-stream'); 

gulp.task('styles', function() { 
    var stylusStream = gulp.src('./styles/stylus/**.styl') 
    .pipe(stylus()); 

    return es.merge(stylusStream, gulp.src('./styles/css/**.css')) 
    .pipe(concat('out.css')) 
    .pipe(gulp.dest('./styles')); 
}); 

Answer 3

Innerhalb Stylus-Dateien, können Sie einfach @require CSS-Dateien:

@require 'something.css' 

Die Es gibt keine Notwendigkeit für Verkettung oder andere Komplexität in Gulp, und Ihre Dateiladeordnung wird explizit in den STYL-Dateien festgelegt.

Answer 4

Ich habe gerade eine großartige Lösung für dieses Problem: @require für jede der anderen .styl Dateien in Ihrer main.styl-Datei verwenden, und sieht nur gulp.src (‚src/css/main.styl‘)