Gulp kompilieren SASS in relativen Unterordner

Question

Wenn ich eine Datei innerhalb von components/root/sass/index.scss habe, wie kompiliere ich es zu components/root/styles/index.css? Einfach gesagt, ich möchte sass in dem Pfad mit styles ersetzen, d. H. Wenn ich eine Datei unter components/second/sass/file.scss hätte, würde es zu components/second/styles/file.css kompilieren.

Dies ist mein aktueller Code in gulpfile.js:

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

gulp.task('sass', function() { 
    return gulp.src('components/**/sass/*.scss', {base: "./"}) 
    .pipe(sass()) 
    .pipe(gulp.dest('../styles/')); 
}) 

gulp.task('default', function() { 
    gulp.watch('components/**/sass/*.scss', ['sass']); 
}); 

Answer 1

jeden Pfad Benennen Sie den "/ sass" Bit ersetzt und es ist Verlängerung über "schlucke-Umbenennungs" -Modul.

Ich würde empfehlen, den Pfad globbing in einer Variablen, die Uhr als unabhängige Aufgabe, und die Standardaufgabe mit den beiden Aufgaben "sass" und "watch".

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var rename = require("gulp-rename"); 

var componentsGlob = './components/**/sass/*.scss'; 

gulp.task('sass', function() { 
    return gulp.src(componentsGlob) 
    .pipe(sass()) 
    .pipe(rename (function(path) { 
     path.dirname = path.dirname.replace('/sass', '/styles'); 
     path.extname = ".css"; 
    })) 
    .pipe(gulp.dest('./components/')); 
}); 

gulp.task('watch', function() { 
    gulp.watch(componentsGlob, ['sass']); 
}); 

gulp.task('default', ['sass', 'watch']); 

Answer 2

Keine Notwendigkeit für Schluck-Umbenennungs:

gulp.task('sass', function() { 
    return gulp.src('components/**/sass/*.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('components/root/styles')); 
}) 

Grundsätzlich sind die 'Komponenten/root/Stile' alles vor Ihrer src glob beginnt oder in Ihrem Fall ersetzen wird, 'Komponenten'.