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

Вот как я настраиваю свой файл gulp для своего CSS.

У меня есть несколько пунктов назначения, которые я использую в своих проектах, но это должно помочь указать вам в правильном направлении.

Вы также можете использовать SassGlob для glob во всех файлах 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 
     })); 
});