How to put the file compiled by gulp-compass into gulp's stream?

Question

I am a newbie to gulp and gulp-compass. IMHO, gulp-compass doesn't work in the gulp's stream paradigm.

Normally, gulp's task should be something like:

gulp.src('path/to/src')
.pipe(doSth)
.pipe(gulp.dest('path/to/dist'));

But the following code works for gulp-compass:

gulp.src('') // <-Empty source is OK
.pipe(compass({
  css: 'path/to/dist/css' // <- This is the output dir
  scss: 'path/to/src/scss' // <- This is the input scss file glob
}));
// No dest is needed!

This results in my following problem.

|- dist
|- scss
    |- app.scss
|- css
    |- bootstrap.css

I want to use gulp-compass to compile app.scss into app.css, then bundle app.css with bootstrap.css, then minify and output as app-release.css.

I want to finish this task in ONE gulp.task.

function buildCss(inputStream) { // minify and output to dist.
    return inputStream
        .pipe(cssnano())
        .pipe(gulp.dest('dist'));
}

gulp.task('css-build', function() {
    var stream = gulp.src('scss/app.scss')
        .pipe(compass({
            css: 'css',
            sass: 'scss'
        }))
        .pipe(gulp.src('css/*.css')); // <-- **HERE** 
    return buildCss(stream);
});

However, The compiled app.css file is not included in stream of HERE.

What is the solution?

Answer 1

I could fix this problem using merge-stream.

gulp.task('css', function() {
    var scss = gulp.src('scss/*.scss')
    .pipe(compass({
        css: 'css',
        sass: 'scss'
    }));
    var css = gulp.src('css/bootstrap.css');
    var stream = merge(scss, css)
    .pipe(concat('app-release.css'));
    return buildCss(stream);
});