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，就可以发布。谢谢！欢呼声