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

有什么办法吗

*******意念

也许可以将css文件从sass中生成到一个临时位置，然后使用css文件对其进行压缩，然后将其删除。

---

如何在单个任务中完成此任务，有什么想法吗？

为什么不将animate.css作为一部分包含在主Sass文件中

@import "animate";

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

---

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

gulp-concat

将只在当前流中concat由

gulp.src

指定的文件。如果只指定了

app.scss

，则无法在该流上连接其他文件

这并不意味着您不能创建一个包含

app.scss

编译输出并包含

animate.css

的新流

为此，您需要（

npm安装合并流

）：

---

你考虑过直接将css导入到sass中吗？是的，检查过了，它说不支持从sass文件导入css啊，我认为sass有这个功能（很少有）。否则，从我在文档中看到的情况来看，

gulp-concat

不允许您为concat指定其他文件，它只是连接从gulp.src`.指定的文件。我有bower文件夹中的动画文件，我不想重命名它，我想使其自动化。改为从CDN中引入animate.css怎么样<代码>啊！谢谢你，你刚刚救了我一命。这个方法已被弃用，将被删除。查看所有有效的CSS也是有效的Sass，因此将

animate.CSS

重命名为

\u animate.scss

，在找到此答案之前，我尝试使用

gulp merge

，这显然与

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