Ändern Sie den Zielpfad von Dateien in Gulp

Question

Ich versuche dynamische Schluckaufgabe erstellen, die durch alle Dateien und Ordner durchlaufen und concat/compilieren es in entsprechenden Ordnern.

Ordner-Struktur sind zum Beispiel: Thema/Rahmen/modules/Modul-1/assets/css/SCSS/SCSS-file-1.scss und Thema/Rahmen/modules/Modul-2/assets/css/SCSS/SCSS-file-2.scss usw.

Und schluck Aufgabe ist

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

Ergebnisse sind:

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 

Aber ich möchte CSS-und Kartendateien in CSS-Ordner nicht in scss!

Auch habe ich versucht, für das Ziel absoluten Pfad zu setzen zum Beispiel

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

Aber dann innerhalb css Ordner voller Dateihierarchie schluckte erstellen, Beispiel

Thema/Rahmen/modules/Modul-1/assets/css/Modul-1/assets/css/SCSS/SCSS-file-1.css

Dank für Lösungen

Mit freundlichen Grüßen, Nenad

Answer 1

Ich glaube, das ist, was Sie wollen. [Es sieht aus wie Ihre gulpfile.js im 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 schön hier funktioniert. Ich dachte zuerst, es wäre nur für das Umbenennen von Basisnamen, wie 'myFile.css', aber es kann Basisnamen ignorieren und nur den Verzeichnispfad manipulieren. Was machen wir hier?

Wir entfernen den letzten Verzeichnisnamen, indem wir den Namen der Datei.dirname nehmen.