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文件，似乎忽略了animate 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/'));

});

gulp任务不会结束

1 个答案: