在针对多种类型的文件进行分别构建,再一同合并的时候,传统的方法是分别建立流进行构建,再使用 streamqueue 插件对流进行合并:

gulp.task 'css', ->
  streamqueue objectMode: true,    # source
      gulp.src 'src/css/**/*.css'  #   | css
      gulp.src 'src/css/**/*.less' #   |  | less
        .pipe less()               #   |  |  |
      gulp.src 'src/css/**/*.scss' #   |  |  | scss
        .pipe scss()               #   |  |  |  |
      gulp.src 'src/css/**/*.styl' #   |  |  |  | styl
        .pipe stylus()             #   | /  /  /  /
    .pipe concat 'style.css'       # concat
    .pipe autoprefixer()
    .pipe gulp.dest 'dist'

另外一种思路是使用 gulp-filter 插件。先建立一个整流,对流里面的文件进行分别处理:

do (filter = require('gulp-filter')) ->
  gulp.task 'css', ->
    lessFilter = filter '*.less'
    scssFilter = filter '*.scss'
    stylusFilter = filter '*.styl'
    gulp.src 'src/css/**'          # source
      .pipe lessFilter             #   | \
        .pipe less()               #   |  less
      .pipe lessFilter.restore()   #   | /
      .pipe scssFilter             #   | \
        .pipe scss()               #   |  scss
      .pipe scssFilter.restore()   #   | /
      .pipe stylusFilter           #   | \
        .pipe stylus()             #   |  stylus
      .pipe stylusFilter.restore() #   | /
      .pipe concat 'style.css'     # concat
      .pipe autoprefixer()
      .pipe gulp.dest 'dist'