Gulp: Compile 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 do I use Gulp to compile the Stylus files, concat the result with all of the CSS files and output it to './styles/out.css'?

Answer 1

You can use gulp-filter like:

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'));
});