Gulp less 合并几个文件，让其他文件分开

Question

说我有

main1.less
main2.less
main3.less
other1.less
other2.less
other3.less

我需要输出

main.css
other1.css
other2.css
other3.css

我愿意

gulp.task('less', function () {
    return gulp.src(['./Content/css/**/*.less'])
        .pipe(less({
            paths: [path.join(__dirname, 'less', 'includes')]
        }))
        .pipe(gulp.dest(paths.webroot + 'css'));
});

实际上它为一个 less 文件生成了一个 css...有没有一种方法可以将多个文件合并为一个，而让其他文件放在单独的文件中？

Answer 1

您可以使用 gulp-concat 来完成此操作将您想要的样式从一项单独的任务合并到一个文件中。

const gulp   = require('gulp4');
const less   = require('gulp-less');
const concat = require('gulp-concat');
const path   = require('path');
const config = {
  paths: [ path.join(__dirname, 'less', 'includes') ]
};

gulp.task('less:separate', () => gulp
  .src(path.join(__dirname, 'Content', 'css', '**', 'other*.less'))
  .pipe(less(config))
  .pipe(gulp.dest(paths.webroot + 'css')));

gulp.task('less:together', () => gulp
  .src(path.join(__dirname, 'Content', 'css', '**', 'main*.less'))
  .pipe(less(config))
  .pipe(concat('main.css')) // combine them into one file
  .pipe(gulp.dest(paths.webroot + 'css')));

gulp.task('less', gulp.parallel('less:separate', 'less:together'));