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

时间:2015-07-11 15:08:11

标签: node.js stream automation gulp

我正在尝试使用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文件夹中。

知道怎么解决吗?谢谢!

1 个答案:

答案 0 :(得分: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,请发布它。谢谢!干杯