如何导出多个文件，同时从 gulp 编译较少到 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，然后通过自动前缀器传递，导出framework.css然后是缩小过程。

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

• 网格.css
• 脚手架.css
• 等等...

我怎样才能做到这一点？我实际上不知道要应用什么逻辑。

Answer 1

使用通配

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

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

了解 Glob 入门中的通配规则，并使用 Glob 在线测试仪测试您的模式

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