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

Question

现在，我正在使用一个基本上是CSS框架的项目的Gulp。我现在正在做它的方式是，我@import单一app.less所有其他.LESS文件，然后将它传递给咕嘟咕嘟任务：

// 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

使用通配符

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

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

了解在Glob Primer文件名匹配规则，并与Glob online tester

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