Gulp sass différents dossiers dans un fichier CSS

Question

Je sais que GULP-SASS devrait être trivial et facile, mais si nous pouvons compliquer les choses pourquoi non à droite?

Eh bien, il semble que le projet que je travaille a une structure «particulière» et que je dois m'y habituer. Il est comme ceci:

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

Sur le même niveau avec application I vague un sous-projet ... Appelons Web:

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

Maintenant vient la partie amusante: comment le hack peut-je créer un fichier CSS unique de ce gâchis? J'ai essayé ceci sans aucune chance:

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

Voici comment j'ai configuré mon fichier gulp pour mon CSS.

J'ai plusieurs destinations que j'utilise dans mes projets, mais cela devrait vous aider à vous orienter dans la bonne direction.

Vous pouvez également utiliser SassGlob pour glob dans tous les fichiers scss/sass/css à partir d'un répertoire principal.

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