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 
     })); 
});