Gulp компилирует SASS в относительную подпапку

Question

Если у меня есть файл внутри components/root/sass/index.scss, как его скомпилировать до components/root/styles/index.css? Проще говоря, я хочу заменить sass на путь с помощью styles, т. Е. Если бы у меня был файл в components/second/sass/file.scss, он скомпилировался бы до components/second/styles/file.css.

Это мой текущий код в 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

Переименовать каждый путь, заменяющий "/ Sass" бит, и это расширение с помощью модуля "Глоток-Rename".

Я бы порекомендовал, чтобы путь, зависящий от переменной, наблюдался как независимая задача, и задание по умолчанию с задачами «сасс» и «смотреть».

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

Нет необходимости Глоток-переименованы:

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

В основном, «компоненты/корень/стили» заменит все перед вашими начинается ЦСИ Глоб или, в вашем случае, «компоненты».