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?

Have you considered just importing the css into the sass directly? — zzzzBov, Jun 11 '15 at 13:29
yes checked it, by it says it is not supported to import css from sass file — Tzook Bar Noy, Jun 11 '15 at 13:34
Ah, I thought that Sass had that feature (LESS does). [You can work around it](http://stackoverflow.com/a/8802999/497418). 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`. — zzzzBov, Jun 11 '15 at 13:38

score 31 · Accepted Answer · answered Jun 11 '15 at 14:01

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

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. — isapir, Sep 27 '17 at 18:53

score 15 · Answer 2 · answered Jun 11 '15 at 13:37

15

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.

answered Jun 11 '15 at 13:37

Lisa

161
1
7

2

I have the animate file from bower folder, and I dont want to rename it, I want make this automated easilly – Tzook Bar Noy Jun 11 '15 at 13:50
What about bringing in animate.css from the CDN instead? `` – Lisa Jun 11 '15 at 14:03
3

Ah! Thank you, you just saved my ass. – Mr Washington Nov 12 '15 at 10:06
3

This method is deprecated and will be removed. See https://github.com/sass/node-sass/issues/2362 – jontro Nov 06 '18 at 16:59
All valid CSS is also valid Sass so rename `animate.css` to `_animate.scss` – Rick Davies Dec 06 '18 at 09:11

gulp concat after sass

2 Answers2