Ändern Sie Stream-Dateinamen unterwegs in gulp-watch-Task

Question

Obwohl es nicht so notwendig ist, möchte ich meine Dev-Umgebung so sauber wie möglich haben und daher automatisch gelöschte Dateien aus meinem Build-Verzeichnis entfernen.

Da ich TypeScript verwende, möchte ich die kompilierten und statischen Dateien in einem Verzeichnis im laufenden Betrieb haben. Ich erreiche dies, indem ich statische Dateien ansehe und sie in einen Build-Ordner kopiere (das sollte ich in Zukunft wahrscheinlich umbenennen).

Gelöschte Dateien sollten dann auch aus dem Build-Verzeichnis entfernt werden. Ich habe es versucht und es ist fast gelungen. Die einzige Sache, die ich herausfinden möchte, ist, wie man einen Stromdateinamen von app/tmp.html zu build/app/tmp.html ändert.

Dies ist meine Uhr-Aufgabe so weit:

let gulp = require('gulp'); 
let watch = require('gulp-watch'); 
let filter = require('gulp-filter'); 
let clean = require('gulp-clean'); 

gulp.task('watch', function() { 
    let deletedFilter = filter(file => { 
    return file.event !== 'unlink' && file.event !== 'deleted'; 
    }, { restore: true }); 

    let newFilter = filter(file => { 
    return file.event !== 'add'; 
    }); 

    watch('./app/**/*.{html,css,js,map,svg,png,jpg}') 
    .pipe(deletedFilter) 
    .pipe(gulp.dest('./build/app/')) 
    .pipe(newFilter) 
    .pipe(deletedFilter.restore) // this line here 
    .pipe(clean());    // and that line there still make 
            // some trouble 
}); 

Vielen Dank für jede Hilfe!

Answer 1

Okay, ich machte eine kleine Pause und grub mich etwas tiefer ein. Mit Blick auf gulp-debug kam ich mit einer Lösung auf, mit dem folgenden, zusätzlichen Knotenmodule zu gulp und gulp-watch:

• gulp-filter gelöschte Dateien in erster Linie, um herauszufiltern
• through2 durch alle gehen gefiltert (gelöscht) Dateien
• path den relativen Pfad zu erhalten
• gulp-clean entfernen tatsächlich die Dateien aus dem Build-Verzeichnis

Alle zusammen, um es so etwas wie diese sieht (Stand: Schreiben Sie diese Antwort, ich bin NodeJS 5.10.1 verwenden):

'use strict'; 

let staticFilePattern = `./app/**/*.{html,css,js,map,svg,png,jpg}`; 
let buildDirectory = 'build'; 

let gulp = require('gulp'); 
let watch = require('gulp-watch'); 
let filter = require('gulp-filter'); 
let clean = require('gulp-clean'); 
let through = require('through2'); 
let path = require('path'); 

let changeToBuildDirectory = function() { 
    return through.obj(function(file, enc, cb) { 
    file.path = process.cwd() + `/${buildDirectory}/` + path.relative(process.cwd(), file.path); 
    cb(null, file); 
    }); 
}; 

gulp.task('watch', function() { 
    let deletedFilter = filter(file => { 
    return file.event !== 'unlink' && file.event !== 'deleted'; 
    }, { restore: true }); 

    let newFilter = filter(file => { 
    return file.event !== 'add'; 
    }); 

    watch(staticFilePattern) 
    .pipe(deletedFilter) 
    .pipe(gulp.dest(`./${buildDirectory}/app/`)) 
    .pipe(newFilter) 
    .pipe(debug({ title: 'Foo' })) 
    .pipe(deletedFilter.restore) 
    .pipe(changeToBuildDirectory()) 
    .pipe(clean()); 
}); 

Ich finde es nicht sehr sauber, da ich gerade den Pfad auf dem Dateiobjekt verändere, aber es funktioniert, also freue ich mich. Wenn Sie eine sauberere Lösung haben, können Sie gerne eine andere Antwort schreiben oder in den Kommentaren

Ich hoffe, es ist in gewissem Maße nützlich.
Prost!