如何将不同目录下的多个.styl文件合并为单个CSS文件？

没问题！我帮你调整Gulp配置，这样就能跳过手动维护main.styl的导入列表，直接把所有目标.styl文件合并成单个CSS文件，完全符合你的需求。

步骤1：安装合并文件所需的插件 #

首先需要安装gulp-concat，它能帮我们把多个.styl文件合并成一个：

npm install gulp-concat --save-dev

步骤2：修改Gulp任务代码 #

把你原来的styl任务和相关配置改成下面这样，我标注了关键变化：

// 记得先引入gulp-concat插件
const concat = require('gulp-concat');

gulp.task('styl', function() {
  // 直接匹配所有需要的.styl文件，保持和你原来@import一致的顺序
  return gulp.src([
    'src/blocks/**/*.styl',
    'src/helpers/styl/**/*.styl'
  ])
  // 先把所有.styl文件合并成一个临时文件（命名为main.styl方便后续处理）
  .pipe(concat('main.styl'))
  // 编译stylus到CSS
  .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
  });

  // 监听所有.styl文件的变化，触发编译任务
  gulp.watch(['src/blocks/**/*.styl', 'src/helpers/styl/**/*.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');
});

关键说明 #

• 我们通过gulp.src直接指定所有要合并的.styl文件路径，并且保持了和你原来@import一致的顺序（先blocks再helpers），避免样式优先级错乱的问题。
• 使用concat('main.styl')把所有文件合并成一个.styl文件，再交给stylus编译，最终输出单个main.css文件。
• 同时更新了watch的监听路径，确保任何.styl文件修改都会触发重新编译。

这样你就可以删掉原来的main.styl文件，不用再手动维护导入列表啦，所有.styl文件会自动合并成单个CSS输出。

内容的提问来源于stack exchange，提问作者Dmitry Volkov