Gulp：將輸出文件寫入src路徑的子文件夾相對位置

Question

我想弄清楚如何使用PostCSS編寫Gulp任務，以便它在原始路徑的postcss子文件夾中輸出結果文件。

假設你有這些文件：

/app/styles/index.css 
/app/elements/pages/home.css 
/app/elements/pages/profile.css 

而你要咕嘟咕嘟輸出postCSS過程：

/app/styles/postcss/index.css 
/app/elements/pages/postcss/home.css 
/app/elements/pages/potcss/profile.css 

這是我目前的配置，但它不工作：

gulp.task('css', function() { 
    return gulp.src([ 
    'app/styles/index.css', 
    'app/elements/**/*.css' 
    ], {base: './'}) 
    .pipe(gulp.postcss([require('cssnext')()])) 
    .pipe(gulp.dest('postcss')) 
}); 

事實上，使用abul配置Gulp會輸出所有文件及其相關的子目錄在項目根目錄下的一個postcss文件夾中。

任何想法如何解決它？謝謝！！

Answer 1

我找到了一個可行的解決方案，使用gulp-rename。這是更新的任務配置：

gulp.task('css', function() { 
    return gulp.src([ 
    'app/styles/index.css', 
    'app/elements/**/*.css' 
    ], {base: './'}) 
    .pipe($.postcss([require('cssnext')()])) 
    .pipe($.rename(function (path) { 
     path.dirname += "/postcss"; 
    })) 
    .pipe(gulp.dest('./')) 
}); 

這很好。如果有人知道如何使用additinal external plugins，只需通過Gulp基本API，就可以發佈。謝謝！歡呼聲