如何在从 gulp 编译 less 到 css 的同时导出多个文件？

Question

现在，我正在将 Gulp 用于一个基本上是 CSS 框架的项目。我现在的做法是，我将所有其他 .less 文件@import 到一个 app.less 中，然后将其传递给 Gulp 任务：

// Compile
gulp.task("compile", function() {
    return gulp
        .src("source/app.less")
        .pipe(less())
        .pipe(concat("framework.edge.css"))
        .pipe(gulp.dest("./dist"))
        .pipe(
            autoprefixer({
                browsers: ["last 4 versions"],
                cascade: false
            })
        )
        .pipe(concat("framework.css"))
        .pipe(gulp.dest("./dist"))
        .pipe(sourcemaps.init())
        .pipe(
            uglify({
                maxLineLength: 80,
                UglyComments: false
            })
        )
        .pipe(concat("framework.min.css"))
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest("./dist"));
});

这完全符合预期。样式表首先被编译并导出为 app.edge.css，然后通过 autoprefixer，导出 framework.css，然后是缩小过程。

问题是，现在我想将每个样式表导出为一个单独的模块，例如

grids.css
scaffolding.css
等等...

我怎样才能做到这一点？我实际上没有得到应用什么逻辑。

Answer 1

使用 globbing

如果 gulp 任务的 src 是 x/**/*.less，该任务将处理 x 或 x 的任何子文件夹中的所有 LESS 文件，并将输出每个文件分别在 dest 中，保留 src 的文件结构。

要排除一个或多个文件，请使用 !...。

了解 Glob Primer, and test your pattern with the Glob online tester

中的 globbing 规则

根据您的需要，您可能需要两项任务，一项用于输出单个文件，一项用于构建完整的 framework.css。

如何在从 gulp 编译 less 到 css 的同时导出多个文件？

How can I export multiple files while compiling less to css from gulp?

css

less

gulp