Gulp: compile Stylus e concat con puro CSS

Question

Ho un mucchio di file Stylus in './styles/stylus/**.styl' e un mucchio di file CSS in './styles/css/**.css'.

Come utilizzare Gulp per compilare i file Stylus, concatenare il risultato con tutti i file CSS e inviarlo a './styles/out.css'?

Answer 1

È possibile utilizzare gulp-filter come:

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

Dovreste essere in grado di creare due flussi separati di file e li fondono con 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

Entro i file stilo, si può solo @require File CSS:

@require 'something.css' 

Il n non c'è bisogno di concatenazione o di qualsiasi altra complessità in Gulp e l'ordine di caricamento dei file è impostato esplicitamente all'interno dei file .styl.

Answer 4

Ho appena trovato una grande soluzione a questo: utilizzare @require per ciascuno degli altri file .styl nel file main.styl, e basta guardare gulp.src ('src/css/main.styl')