Come compilare i file SASS in diverse directory usando Gulp?

Question

Sto usando gulp-ruby-sass per compilare my js e sass.

mi sono imbattuto in questo errore prima TypeError: Arguments to path.join must be strings

Trovato this answer ed era perché stavo usando sourcemaps con gulp-sass e la risposta raccomandato utilizzando gulp-ruby-sass invece.

Poi ho provato a compilare tutti i miei file SASS utilizzando questa sintassi:

gulp.task('sass', function() { 
    return sass('public/_sources/sass/**/*.scss', { style: 'compressed' }) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('bitage_public.css')) 
     .pipe(sourcemaps.write('./maps')) 
     .pipe(gulp.dest('public/_assets/css')) 
     .pipe(livereload()); 
}); 

che ha prodotto questo errore: gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss

Ho poi notato nella risposta che ho trovato l'autore ha scritto che globi ** aren 't supportato ancora:

Inoltre, al momento della scrittura di gulp-ruby-sass 1.0.0-alpha, i globi non sono ancora supportati.

ho fatto più di scavo e trovato un modo per utilizzare un array per specificare i percorsi dei miei file SASS, così poi ho provato la seguente:

gulp.task('sass', function() { 
    return sass(['public/_sources/sass/*.scss', 
      'public/_sources/sass/layouts/*.scss', 
      'public/_sources/sass/modules/*.scss', 
      'public/_sources/sass/vendors/*.scss'], { style: 'compressed' }) 
    // return sass('public/_sources/sass/**/*.scss', { style: 'compressed' }) 
    .pipe(sourcemaps.init()) 
    .pipe(concat('bitage_public.css')) 
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest('public/_assets/css')) 
    .pipe(livereload()); 
}); 

Ma ancora mi sto Errno::ENOENT: No such file or directory ed elenchi tutte le cose che ho messo in quell'array.

Come si compila SASS in più directory con gulp?

SASS struttura della cartella principale:

_sources 
    layouts 
     ...scss 
    modules 
     ...scss 
    vendors 
     ...scss 
    main.scss 

Answer 1

figured it out!

Beh, non al 100%, ancora non sono sicuro del motivo per cui l'array di percorsi multipli non ha funzionato.

Comunque così ho dimenticato che nel mio file web.scss principale ho già avuto più di impostazione istruzioni di importazione:

@import "vendors/normalize"; // Normalize stylesheet 
@import "modules/reset";  // Reset stylesheet 
@import "modules/base";   // Load base files 
@import "modules/defaults";  // Defaults 
@import "modules/inputs";  // Inputs & Selects 
@import "modules/buttons";  // Buttons 
@import "modules/layout";  // Load Layouts 
@import "modules/svg";   // Load SVG 
@import "modules/queries";  // Media Queries 

Quindi non ho davvero bisogno di provare l'uso Gulp il modo in cui stavo cercando, ho solo necessario indirizzare direttamente il file 1 .scss. Così ho fatto che qui:

// Compile public SASS 
gulp.task('sass', function() { 
return sass('public/_sources/sass/bitage_web.scss', { style: 'compressed' }) 
    .pipe(sourcemaps.init()) 
    .pipe(sourcemaps.write('./maps')) 
    .pipe(gulp.dest('public/_assets/css')) 
    .pipe(livereload()); 
}); 

Ora funziona perché vede un file specifico per indirizzare e compilare

Answer 2

stavo avendo problemi con l'uso '* .scss' troppo

Nella documentazione git (https://github.com/sindresorhus/gulp-ruby-sass) usano questa sintassi:

gulp.task('sass', function(){ 
    return sass('public/_sources/sass/', 
    { style: 'compressed'}) 
.pipe(sourcemaps.init()) 
}); 

ho provato e funziona, compila tutti i file all'interno della cartella.

Solo nel caso qualcuno ha lo stesso problema