CODEWITHSUNDEEP
cssgulpstylus
damd
damd

Reputation: 6957

Gulp: Compile Stylus and concat with pure CSS

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

Upvotes: 7

Views: 5464

Answers (4)

coma
coma

Reputation: 16649

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

Upvotes: 9

MaxRocket
MaxRocket

Reputation: 992

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

Upvotes: 0

Geoffrey Booth
Geoffrey Booth

Reputation: 7366

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.

Upvotes: 3

Ben
Ben

Reputation: 10104

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

Upvotes: 3

Related Questions