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

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

1 个答案: