Gulp：将输出文件写入相对于 src 路径的子文件夹答案

【问题标题】：Gulp: write output files to subfolder relative of src pathGulp：将输出文件写入相对于 src 路径的子文件夹
【发布时间】：2015-09-30 06:03:43
【问题描述】：

我试图弄清楚如何使用PostCSS 编写Gulp 任务，以便它在原始路径的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'))
});

事实上，使用 abive 配置，Gulp 会在项目根目录下的一个 postcss 文件夹中输出所有文件及其相关子目录。

知道如何解决吗？谢谢！！

【问题讨论】：

标签： node.js stream automation gulp

【解决方案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，请发布。谢谢！干杯

【讨论】：