Gulp: Skompiluj rysik i połącz z czystym CSS

Question

Mam kilka plików rysika w './styles/stylus/**.styl' i kilka plików CSS w './styles/css/**.css'.

Jak używać Gulp do kompilowania plików rysika, konkatować wynik z wszystkimi plikami CSS i wyprowadzić je na numer './styles/out.css'?

Answer 1

Można użyć gulp-filter jak:

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

powinien być w stanie utworzyć dwa oddzielne strumienie plików i połączyć je z 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

w plikach rysika, można po prostu @require Pliki CSS:

@require 'something.css' 

The n nie ma potrzeby konkatenacji lub jakiejkolwiek innej złożoności w Gulp, a kolejność ładowania plików jest jawnie ustawiona w plikach .styl.

Answer 4

Właśnie się doskonałym rozwiązaniem do tego: używać @require dla każdego z pozostałych plików .styl w pliku main.styl, i po prostu oglądać gulp.src („src/CSS/main.styl”)