gulp 任务不做 concat

Question

我正在尝试首先构建我的 scss，最后将结果与 css 文件合并。

这是我的任务

gulp.task('styles', function () {
    gulp.src('../scss/styles.scss')
        .pipe($.sass({
            errLogToConsole: true
        }))
        .pipe($.autoprefixer('last 2 versions'))
        .pipe(gulp.dest('../public/styles/'))
        .pipe($.filelog())
        .pipe($.size());

   gulp.src([
               '../public/bower_components/animate.css/animate.css',      
               '../public/styles/styles.css'
            ], {base: '.'})
        .pipe($.concat('../public/styles/styles.css'))
        .pipe($.filelog())
        .pipe($.size());
});

现在最终结果是一个仅包含我的 scss css 的 css 文件，似乎忽略了动画 css。有什么建议我在这里做错了吗？

Answer 1

我建议你看看event-stream，你可以用更简洁的语法为你的styles任务最终得到类似的东西：

es = require('event-stream');

gulp.task('styles', function () {

  var _css = gulp.src(['../public/bower_components/animate.css/animate.css',      
                      '../public/styles/styles.css'], {base: '.'});

  var _sass = gulp.src('../scss/styles.scss')
               .pipe($.sass({ errLogToConsole: true }))
               .pipe($.autoprefixer('last 2 versions'));

  return es.merge(_sass, _css)
           .pipe($.concat('styles.css'))
           .pipe($.filelog())
           .pipe($.size())
           .pipe(gulp.dest('./public/styles/'));

});