node.js - 如何将 gulp-compass 编译的文件放入 gulp 的流中？

Question

我是 gulp 和 gulp-compass 的新手。恕我直言，gulp-compass 在 gulp 的流范式中不起作用。

通常，gulp 的任务应该是这样的：

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

但以下代码适用于 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!

这导致了我的以下问题。

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

我想用gulp-compass编译app.scss成app.css，然后捆绑app.css，bootstrap.css然后缩小并输出为app-release.css.

我想在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);
});

但是，编译后的 app.css 文件不包含在HERE的流中。

解决办法是什么？

Answer 1

我可以使用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);
});