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'));
});

实际上它会为较少的文件生成一个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'));

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

1 个答案: