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

Question

我正在尝试弄清楚如何编写 Gulp task, using 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，请 post 它。谢谢！干杯

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

Gulp: write output files to subfolder relative of src path

automation

stream

node.js

gulp