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'?

Parotitis

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

Bulgar

Answer 2

You should be able to create two separate streams of files and merge 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'));
});

Mithridatism

This is the best solution when you need to concat a lot of legacy css stylesheets and simply using @require legacy/* won't work since the globbing import works only for .styl source files. – Congruous

Answer 3

Within your Stylus files, you can just @require CSS files:

@require 'something.css'

Then there’s no need for concatenation or any other complexity in Gulp, and your file load order is set explicitly within the .styl files.

Nonparticipating

This should be followed. In some cases we may need above solution. – Tompion

Can you please expand on this a little? I'm not clear how this solves the issue...? stackoverflow.com/users/223225/geoffrey-booth – Deoxyribose

If the end result is one CSS file that includes both the source .css and .styl files, you could use your Stylus files to include both. That way there's just one build path: compile Stylus, without having to concatenate/merge files later. – Nonparticipating

Answer 4

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

Deoxyribose