在针对多种类型的文件进行分别构建,再一同合并的时候,传统的方法是分别建立流进行构建,再使用 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'