更改 Gulp 中文件的目标路径

Question

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

文件夹结构例如：theme/framework/modules/module-1/assets/css/scss/scss-file-1.scss 和 theme/framework/modules/module-2/assets/css/scss/scss-file-2.scss 等。

吞咽任务是

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

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

theme/framework/modules/module-1/assets/css/

module-1/assets/css/scss/scss-file-1.css

感谢您的解决方案

此致敬意内纳德

Answer 1

我相信这就是你想要的。 [看起来你的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重命名在这里效果很好。 我最初认为它只是为了重命名基本名称，例如"myFile.css"，但它可以忽略基本名称并仅操作目录路径。 这就是我们在这里所做的。

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