更改Gulp中文件的目标路径

我尝试创建动态 gulp 任务，它将循环遍历所有文件和文件夹，并将其连接/编译到相应的文件夹中。

文件夹结构例如：主题/框架/模块/module-1/assets/css/scss/scss-file-1.scss and 主题/框架/模块/module-2/assets/css/scss/scss-file-2.scss etc.

gulp 任务是

gulp.task('modules-sass', function () {
    return gulp.src([
        '../../framework/modules/**/assets/css/scss/*.scss'
    ])
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sassGlob())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot: function(file) {
            return '../css';
        }
    }))
    .pipe(gulp.dest('../../framework/modules'));
});

结果是：

theme/framework/modules/module-1/assets/css/scss/scss-file-1.css
theme/framework/modules/module-1/assets/css/scss/scss-file-1.css.map
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css.map

但我想将 css 和地图文件放在 css 文件夹中而不是放在 scss 中！

例如，我还尝试设置目的地的绝对路径

gulp.task('theme-modules-sass', function () {
    return gulp.src([
        '../../framework/modules/**/assets/css/scss/*.scss'
    ])
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sassGlob())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot: function(file) {
            return '../css';
        }
    }))
    .pipe(gulp.dest(function(file){
        var filePath = file.path;
        var module = filePath.substring(filePath.indexOf('\\modules'), filePath.indexOf('\\assets'));
        var moduleName = module.replace('\\modules\\', '');

        return '../../framework/modules/'+moduleName+'/assets/css/';
    }));
});

但然后 gulp 在 css 文件夹内创建完整的文件层次结构，例如

主题/框架/模块/module-1/assets/css/module-1/assets/css/scss/scss-file-1.css

感谢您提供解决方案

此致， 内纳德

我相信这就是你想要的。 [看起来你的 gulpfile.js 位于模块目录中。]

// theme / framework / modules / module-1 / assets / css / scss / scss-file-1.scss
// theme / framework / modules / module-2 / assets / css / scss / scss-file-2.scss

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

gulp.task('modules-sass', function () {
  return gulp.src([
      '../../framework/modules/**/assets/css/scss/*.scss'
  ])
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sassGlob())
  .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
  .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: function(file) {
          return '../css';
      }
  }))

  .pipe(rename(function (file) {
      // this removes the last parent directory of the relative file path
      file.dirname = path.dirname(file.dirname);
      console.log("file.dirname = " + file.dirname);
  }))

  .pipe(gulp.dest('../../framework/modules'));
});

gulp重命名 https://www.npmjs.com/package/gulp-rename在这里工作得很好。我最初认为它只是为了重命名基本名称，例如“myFile.css”，但它可以忽略基本名称并只操作目录路径。这就是我们在这里所做的。

我们通过获取 file.dirname 的目录名来去掉最后一个目录名。