Verwenden von Variablen in Gulp für den Zieldateinamen?

Question

Ich bin neu zu schlucken und ich frage mich, ob das, was ich erreichen möchte, praktisch oder möglich ist.

Meine Projekte Struktur:

root 
| 
components 
| | 
| component_1 
| | styles.scss 
| | actions.js 
| | template.html 
| | ... 
| component_2 
| | styles.scss 
| | template.html 
| | ... 
| 
public 
    | 
    assets 
     | 
     css (dest) 
     | component_1.css 
     | component_2.css 
     | ... 
     js (dest) 

Nun, was ich will, ist, dass Gulp speichert die kompilierte CSS-Dateien im entsprechenden CSS-Ordner in der Öffentlichkeit/Vermögen, sondern verwendet den Namen des Ordners, in dem er die SCSS Datei gefunden. Ist das möglich? Muss ich das zu einem Plugin pumpen? Danke! PS ich weiß, dass ich das erreichen könnte, indem ich nur die scss umbenenne, aber das ist, was ich gerne vermeiden würde.

Answer 1

Es wäre nicht zu schwer, je nachdem, wie dynamisch Sie es brauchen. Gulp ist reines JS, so dass Sie ganz einfach eigene Funktionen schreiben können. Sie können the gulp-rename plugin verwenden, um einen Teil oder den gesamten Dateinamen vor dem Speichern umzubenennen.

Hier ist eine grobe Idee für den Einstieg:

var rename = require('gulp-rename'), 
    path = require('path'), 
    glob = require('glob'); // npm i --save-dev glob  

var components = glob.sync('components/*').map(function(componentDir) { 
     return path.basename(componentDir); 
    }); 

components.forEach(function(name) { 
    gulp.task(name+'-style', function() { 
     return gulp.src('components/'+name+'/styles.scss') 
      .pipe(sass()) // etc 
      .pipe(rename(name + '.css')) 
      .pipe(gulp.dest('public/assets/css')) 
    }); 

    gulp.task(name+'-js', function() { 
     // similar idea for JS files 
    }); 

    gulp.task(name+'-build', [name+'-style', name+'-js']); 
}); 

// build all components 
gulp.task('build-components', components.map(function(name){ return name+'-build'; })); 

Jetzt werden Sie Aufgaben component_1-build, component_1-style, component_1-js usw. genannt haben, für jede Komponente.

Sie haben auch eine Aufgabe, die alle Komponenten erstellen kann.

Answer 2

Alte Frage Ich weiß, aber ich habe heute in diesem Bereich gespielt, und daher kam diese Frage. Dies kann jemandem helfen, wenn Sie etwas Dynamisches mit dem Zielpfad machen möchten.

Sie können eine Funktion als Argument liefern gulp.dest und damit auf dem Zielpfad wie dies einige Pre-Verarbeitung zu tun:

.pipe(gulp.dest(function (file) { 
    // file is the current file in the stream 
    // do something here    
    return pathString; 
}));