Подтвердить что ты не робот

gulp concat after sass

Я хотел бы сделать вывод 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

возможно, это возможно, чтобы сгенерировать файл css из sass in в временное местоположение, затем выполнить его с помощью css файлов, и они просто удаляют его. Любые идеи, как это сделать, в одной задаче?

Ответ 1

gulp-concat будет только конкат файлов, указанных gulp.src в текущем потоке. Если вы указали только приложение app.scss, вы не можете конкатенировать дополнительные файлы в этом потоке.

Это не означает, что вы не можете создать новый поток, который содержит app.scss скомпилированного производство и включает в себя animate.css, а также.

Для этого вам потребуется поток слияния (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/'));
});

Ответ 2

Почему бы не включить animate.css в качестве частичного в ваш основной файл Sass?

@import "animate";

Затем переименуйте animate.css в _animate.css

вы также получаете больше контроля над тем, как/где компилируется ваш css.