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

有什么想法吗？

******* 想法

也许可以从 sass 生成 css 文件到一个临时位置，然后将其与 css 文件合并，然后他们将其删除。任何想法如何在一个任务中做到这一点？

Answer 1

为什么不将 animate.css 作为部分内容包含在您的主 Sass 文件中？

@import "animate";

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

您还可以更好地控制 how/where 您的 css 编译。

Answer 2

gulp-concat 只会连接当前流中 gulp.src 指定的文件。如果您只指定了 app.scss，则无法在 that 流上连接其他文件。

这并不意味着您不能创建包含 app.scss 编译输出并包含 animate.css 的 new 流。

为此，您需要 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/'));
});

gulp 在 sass 之后连接

gulp concat after sass

concat

sass

gulp

gulp-concat