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'))
});

事实上，使用abive配置，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外部插件，只需通过Gulp基本API，请发布它。谢谢！干杯

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

1 个答案: