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任务是

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

主题/框架/模块/模块-1 /资产/ CSS /模块-1 /资产/ CSS / SCSS / SCSS-文件1.CSS

感谢您提供解决方案

祝你好运，雷纳德

Answer 1

我相信这就是你想要的。 [看起来你的gulpfile.js在modules目录中。]

// 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中文件的目标路径

1 个答案: