Gulp sass將不同的文件夾整合到一個CSS文件中

Question

我知道GULP-SASS應該是微不足道的，但如果我們可以使事情複雜化，爲什麼不行？

好吧，看來我工作的項目有一個「特定」的結構，我必須習慣它。它是這樣的：

-static 
    -app 
    -components 
     -component1 
     -styles 
      -component1.scss 
     -component2 
     -styles 
      -component2.scss 
    ... 

在與應用程序相同的水平我揮手的一個子項目...可以稱之爲網絡：

-static 
    -web 
    -res 
     -static 
     -app 
      -components 
       -component3 
       -style 
        -component3.scss 

現在到了最有趣的部分：黑客如何創建一個來自這個混亂的單個CSS文件？我試過沒有任何運氣：

// Setting up the sass task 
gulp.task('sass', function(){ 
// Taking the path from the above object 
    var sassApp = gulp.src(paths.styles.filesApp) 
    // Sass options - make the output compressed and add the source map 
    // Also pull the include path from the paths object 
    .pipe(sass({ 
     outputStyle: 'compact', //compressed 
     //sourceComments: 'map', 
     includePaths : [paths.styles.srcApp] 
    })) 
    // If there is an error, don't stop compiling but use the custom displayError function 
    .on('error', function(err){ 
     displayError(err); 
    }) 
    // Pass the compiled sass through the prefixer with defined 
    .pipe(prefix(
     'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' 
    )) 
    // Funally put the compiled sass into a css file 
    .pipe(gulp.dest(paths.styles.dest)); 

    var sassWeb = gulp.src(paths.styles.filesWeb) 
    // Sass options - make the output compressed and add the source map 
    // Also pull the include path from the paths object 
    .pipe(sass({ 
     outputStyle: 'compact', 
     //sourceComments: 'map', 
     includePaths : [paths.styles.srcWeb] 
    })) 
    // If there is an error, don't stop compiling but use the custom displayError function 
    .on('error', function(err){ 
     displayError(err); 
    }) 
    // Pass the compiled sass through the prefixer with defined 
    .pipe(prefix(
     'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' 
    )) 
    // Funally put the compiled sass into a css file 
    .pipe(gulp.dest(paths.styles.dest)); 

    return 
     gulpMerge(sassApp, sassWeb) 
     .pipe(concat('all-css.css')) 
     .pipe(gulp.dest(paths.styles.dest)); 
}); 

Answer 1

這是我如何設置我的CSS的gulp文件。

我有多個目的地，我在我的項目中使用，但這應該有助於指向正確的方向。

您還可以使用SassGlob從主目錄中的所有scss/sass/css文件中進行循環。

gulp.task('scss', function() { 

    return gulp.src('src/sass/styles.scss') 
     .pipe(plumber()) 
     .pipe(sourcemaps.init()) 
     .pipe(sassGlob()) 
     .pipe(sass({ 
      compass: false, 
      includePaths: [ 
       './bower_components/susy/sass', 
       './bower_components/susy/lib', 
       './bower_components/susy/sass/susy', 
       './bower_components/breakpoint-sass/stylesheets', 
       require('node-bourbon').includePaths 
      ], 
      outputStyle: 'compressed' 
     }).on('error', sass.logError)) 
     .pipe(prefix()) 
     .pipe(sourcemaps.write('./maps')) 
     .pipe(gulp.dest('dist/assets/css')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(reload({ 
      stream: true 
     })); 
});