我想获取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文件连接它们,然后简单地删除它。 任何想法如何在单一任务中完成?
答案 0 :(得分:29)
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/'));
});
答案 1 :(得分:13)
为什么不在主Sass文件中包含animate.css作为部分?
@import "animate";
然后将animate.css重命名为_animate.css
您还可以更好地控制css编译的方式/位置。