Change stream file names on the go in gulp-watch task - gulp

Question

Even though it is not that necessary I want to have my dev-environment as clean as possible and therefore automatically remove deleted files from my build directory.
Since I'm using TypeScript I want to have the compiled and static files in one directory on the fly. I'm achieving this with watching static files and copying them to a build folder (I probably should rename that in the future).
Deleted files should then also be removed from the build directory. I tried this and almost succeeded. The only thing I'm trying to find out is how to change a stream file name from app/tmp.html to build/app/tmp.html.
This is my watch-task so far:
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
} );
Thank you so much for any help!

Answer 1

Okay, I was taking a little break and dug into a little deeper. Looking at gulp-debug I came up with a solution, using the following, additional node modules to gulp and gulp-watch:
gulp-filter to filter out deleted files in the first place
through2 to go through all filtered (deleted) files
path to get the relative path
gulp-clean to actually remove the files from the build directory
All together it looks something like this (as of writing this answer, I'm using NodeJS 5.10.1):
'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() );
} );
I don't find it very clean, since I'm just modifying the path on the file object, but it works, so I'm pleased. If you got a more clean solution, you are welcome to post another answer or leave it in the comments
I hope it is useful to some extend.
Cheers!