Question

现在，我正在使用Gulp进行一个基本上是CSS框架的项目。我现在这样做的方式是，我@import所有其他.less文件在一个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中的通配规则，并使用Glob online tester

测试您的模式

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

如何从gulp编译较少的css时导出多个文件？

1 个答案: