gulp：从输出目标路径中删除一个目录答案

【问题标题】：gulp: remove a directory from the output destination pathgulp：从输出目标路径中删除一个目录
【发布时间】：2020-03-10 09:13:21
【问题描述】：

请帮助我进行 Gulp 配置

我有两个 src scss 文件夹：

styles1/
styles2/

在每个文件夹中，我都有不同网站页面的下一个结构：

styles1/front_page/front.page.scss - root file for front page
styles1/front_page/sections/ - front page sections that are impoted in root file(front.page.scss)

我的 gulp 任务如下所示：

gulp.task('sass-dev', function(done) {
    return gulp.src(['src/scss/**/*.page.scss'])
    .pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
    .pipe(gulp.dest('./frontend/css/temp/'))
});

通过这种方式，我得到带有下一个路径的输出文件：

./frontend/css/temp/styles1/front_page/front.page.css

但我需要

./frontend/css/temp/styles1/front.page.css

更多预期结果示例：

./frontend/css/temp/styles1/about.page.css
./frontend/css/temp/styles1/contact.page.css
./frontend/css/temp/styles2/front.page.css
./frontend/css/temp/styles2/profile.page.css

可以这样配置输出吗？

谢谢！

【问题讨论】：

标签： sass gulp gulp-sass

【解决方案1】：

有很多方法可以做到这一点。以下是三个：

gulp.task('sass-dev', function (done) {

  return gulp.src(['src/scss/**/*.page.scss'], {base: 'src/scss/styles1/front_page' }) 

    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

    .pipe(gulp.dest('./frontend/css/temp/styles1'))  // use with base option, works

});

使用base 选项 - 这基本上会在最终目的地设置您不想要的内容，这就是gulp.dest 添加styles1 的原因。所以你消除了@987654326 @ 并发送到 `'./frontend/css/temp/styles1'。

我认为使用gulp-flatten 插件的操作系统更好。它允许您根据自己的选择剥离或展平目录。在你的情况下：

const flatten = require("gulp-flatten");


gulp.task('sass-dev', function (done) {

  return gulp.src(['src/scss/**/*.page.scss'])

    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)

    .pipe(flatten({ subPath: [0, -1] }))

    .pipe(gulp.dest('./frontend/css/temp'))

 });

flatten({ subPath[0, -1] }) 将删除最后一个文件夹，即“front_page”。

const rename = require("gulp-rename");
const path = require("path");

gulp.task('sass-dev', function (done) {

  return gulp.src(['src/scss/**/*.page.scss'])

    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

    .pipe(rename(function (file) {
      let temp = path.dirname(file.dirname);
      file.dirname = temp;
    }))

    .pipe(gulp.dest('./frontend/css/temp'))

});

【讨论】：