如何将许多样式文件（在不同目录中）连接到一个 css 文件？

Question

我使用 gulp 并且需要将我的所有 .styl 文件合并到 1 个主 css 文件而不导入到 main.styl。我怎么能做到？我不喜欢很多 css 文件，我希望只有一个 :) 感谢和抱歉我的英语。

我的 gulp 任务：

gulp.task('styl', function() {
  return gulp.src('src/helpers/styl/main.styl')
    .pipe(stylus())
    .pipe(autoprefixer({
      browsers: ['last 4 versions'],
      cascade: true
    }))
    .pipe(gulp.dest('src/css/'));
});

gulp.task('serve', ['styl'], function() {
  server.init({
    server: 'src',
    notify: true,
    open: true,
    cors: true,
    ui: false
  });
  gulp.watch('src/blocks/**/*.styl', ['styl']);
  gulp.watch('src/helpers/pug/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/pages/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/blocks/**/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/css/main.css').on('change', server.reload);
  run(
    'pretty'
  );
});

以及用于导入的 main.styl 文件：

@import 'src/blocks/block/*'
@import 'src/helpers/block/*' 

Answer 1

导入到 main 有什么问题？ 我认为批量导入可以解决您的问题。对于 .scss 文件，您可以使用 https://www.npmjs.com/package/gulp-sass-bulk-import，但对于其他预处理器，您也可以找到一些东西。

Answer 2

尝试将 src 更改为您的 src

  gulp.task( 'concatCSS', function(){
        return gulp.src( [
            'css/bootstrap.min.css',        
            'css/animate.min.css',
            'css/styles.css',
            'css/responsive.css'
        ] )
        .pipe( concat( 'styles.css' ) )
        .pipe( gulp.dest( 'dist/css/' ) );
    } );