Как объединить много стилевых файлов (в разных каталогах) в один 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

Попробуй это изменение foreach css от 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/' ) );
    } );

Answer 2

Что не так с импортом на главную?Я думаю, что массовый импорт может решить вашу проблему.Для файлов .scss вы можете использовать https://www.npmjs.com/package/gulp-sass-bulk-import,, но для других препроцессоров вы также можете найти что-то.