gulp concat after sass

Question

I would like to take the sass output and concat it to another css regular file.

example:

animate.css
app.scss

return gulp.src('app.scss')
    .pipe(sass({
        errLogToConsole: true
    }))
    .pipe(concat(['animate.css', OUTPUT_OF_THE_SASS_ABOVE]))
    .pipe(gulp.dest(paths.public+'css/'))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('css/'))
    .on('end', done);

any ideas how to do it?

******* IDEA

maybe is it possible to generate the css file from sass in to a temp location, then concat it with css files, and them simply remove it. Any ideas how to do it, in a single task?

Answer 1

gulp-concat will only concat the files that were specified by gulp.src within the current stream. If you've only specified app.scss, you can't concatenate additional files on that stream.

That doesn't mean you can't create a new stream that contains the app.scss compiled output and includes animate.css as well.

To do this you'll need merge-stream (npm install merge-stream):

var gulp,
    sass,
    merge,
    concat,
    rename;

//load dependencies
gulp = require('gulp');
sass = require('gulp-sass');
merge = require('merge-stream');
concat = require('gulp-concat');
rename = require('gulp-rename');

//define default task
gulp.task('default', function () {
    var sassStream,
        cssStream;

    //compile sass
    sassStream = gulp.src('app.scss')
        .pipe(sass({
            errLogToConsole: true
        }));

    //select additional css files
    cssStream = gulp.src('animate.css');

    //merge the two streams and concatenate their contents into a single file
    return merge(sassStream, cssStream)
        .pipe(concat('app.css'))
        .pipe(gulp.dest(paths.public + 'css/'));
});

Answer 2

Why not include animate.css as a partial in your main Sass file?

@import "animate";

And then rename animate.css to _animate.css

you also get more control over how/where your css compiles.