如何從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。