Ändern Sie die Datei an Ort und Stelle (gleiches Ziel) mit Gulp.js und einem Globbing-Muster

Ich habe eine gulp-Aufgabe, die versucht, .scss-Dateien in .css-Dateien zu konvertieren (mit gulp-ruby-sass) und dann die resultierende .css-Datei an der Stelle abzulegen, an der sie die Originaldatei gefunden hat. Das Problem ist, da ich ein Globbing-Muster verwende, weiß ich nicht unbedingt, wo die Originaldatei gespeichert ist.

Im folgenden Code versuche ich, mit gulp-tap auf den Stream zu tippen und den Dateipfad der aktuellen Datei herauszufinden, aus der der Stream gelesen wurde:

gulp.task('convertSass', function() {
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t){
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        }))
        .pipe(gulp.dest(fileLocation));
});

Basierend auf der Ausgabe von console.log(fileLocation)scheint dieser Code gut zu funktionieren. Die resultierenden CSS-Dateien scheinen jedoch ein Verzeichnis höher zu liegen, als ich erwartet habe. Wo es sein sollte project/sass/partials, ist der resultierende Dateipfad nur project/partials.

Wenn es einen viel einfacheren Weg gibt, würde ich diese Lösung definitiv noch mehr schätzen. Vielen Dank!

Wie Sie vermutet haben, machen Sie dies zu kompliziert. Das Ziel muss nicht dynamisch sein, da der Globbed-Pfad auch für das verwendet wird dest. Leiten Sie einfach in dasselbe Basisverzeichnis, aus dem Sie den Quellcode löschen, in diesem Fall "sass":

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

Wenn Ihre Dateien keine gemeinsame Basis haben und Sie eine Reihe von Pfaden übergeben müssen, reicht dies nicht mehr aus. In diesem Fall möchten Sie die Basisoption angeben.

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));

Dies ist einfacher als die Nummern 1311407. Sie müssen den Zielordner überhaupt nicht angeben, verwenden Sie einfach .. Stellen Sie außerdem sicher, dass Sie das Basisverzeichnis festlegen.

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

Ursprünglich hier gegebene Antwort: https://stackoverflow.com/a/29817916/3834540 .

Ich weiß, dass dieser Thread alt ist, aber er wird immer noch als erstes Ergebnis bei Google angezeigt. Ich dachte, ich könnte den Link genauso gut hier posten.

Das war sehr hilfreich!

gulp.task("default", function(){

    //sass
    gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) {
         console.log("Compiling SASS File: " + file.path)
         return gulp.src(file.path, { base: "./" })
        .pipe(sass({style: 'compressed'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))         
        .pipe(gulp.dest(".")); 
    });

    //scripts
    gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) {
        console.log("Compiling JS File: " + file.path)
        gulp.src(file.path, { base: "./" })
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))       
        .pipe(gulp.dest(".")); 
    });
})