在sass之后喝了一口气

Question

我想把sass输出并连接到另一个css常规文件.

例:

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

任何想法怎么做？

*******IDEA

也许是可以从sass生成css文件到临时位置,然后用css文件连接它们,然后简单地删除它.任何想法如何做,在一个单一的任务？

Answer 1

gulp-concat将仅连接gulp.src当前流中指定的文件.如果您只指定了app.scss,则无法在该流上连接其他文件.

这并不意味着您无法创建包含已编译输出的新流,app.scss也包括animate.css.

要做到这一点,你需要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/'));
});

Answer 2

为什么不在主Sass文件中包含animate.css？

@import "animate";

然后将animate.css重命名为_animate.css

您还可以更好地控制css编译的方式/位置.