Gulp: Compiling Stylus and concat with pure CSS

Question

I have a bunch of Stylus files in './styles/stylus/**.styl' and a bunch of CSS files in './styles/css/**.css' .

How to use Gulp to compile Stylus files, execute the result with all CSS files and output it to './styles/out.css' ?

Answer 1

You can use gulp-filter , for example:

 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

You should be able to create two separate file streams and combine them with 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

In your Stylus files, you can simply @require CSS files:

 @require 'something.css' 

Then there is no need for concatenation or any other complexity in Gulp, and your file upload order is set explicitly in .styl files.

Answer 4

I just found a great solution: use @require for each of the other .styl files in your main.styl file and just see gulp.src ('src / css / main.styl')