更改 Gulp 中文件的目标路径

Question

我正在尝试创建动态 gulp 任务，它将遍历所有文件和文件夹并 concat/compile 它在相应的文件夹中。

文件夹结构例如： 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任务是

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 文件夹完整文件层次结构中创建，示例

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-rename 在这里工作得很好。我最初认为它只是用于重命名基本名称，如 'myFile.css'，但它可以忽略基本名称并且也可以操作目录路径。这就是我们在这里所做的。

我们通过 file.dirname.

更改 Gulp 中文件的目标路径

Change the destination path of files in Gulp

gulp

gulp-sass

gulp-sourcemaps