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?

Rabbinical

Have you considered just importing the css into the sass directly? – Cass

yes checked it, by it says it is not supported to import css from sass file – Rabbinical

Ah, I thought that Sass had that feature (LESS does). You can work around it. Otherwise, from what i can see in the docs, gulp-concat doesn't allow you to specify additional files to concat, it just concatenates the files specified from gulp.src`. – Cass

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

Cass

Before I found this answer I tried to use gulp-merge, which is apparently not the same as merge-stream. Confusing. This answer clarified for me. – Garcon

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.

Thallium

I have the animate file from bower folder, and I dont want to rename it, I want make this automated easilly – Rabbinical

What about bringing in animate.css from the CDN instead? <link rel="stylesheet prefetch" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css"> – Thallium

This method is deprecated and will be removed. See github.com/sass/node-sass/issues/2362 – Monastery

All valid CSS is also valid Sass so rename animate.css to _animate.scss – Lefton