Gulp:将输出文件写入src路径的相对子文件夹

Question

我想弄清楚如何写一个Gulp任务，使用PostCSS，使其输出结果文件在postcss子文件夹的原始路径。

假设你有这些文件:

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

你想让Gulp输出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'))
});

实际上，使用上述配置，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('./'))
});

这工作完美。如果有人知道不使用额外的外部插件，只通过Gulp基本API的方法，请发布它。谢谢!欢呼声