Question

即使没有必要，我也希望我的开发环境尽可能干净，因此会自动从我的构建目录中删除已删除的文件。

由于我正在使用TypeScript，因此我希望将编译和静态文件放在一个目录中。我通过观看静态文件并将它们复制到构建文件夹来实现这一目标（我可能应该在将来重命名）。

然后还应从构建目录中删除已删除的文件。我试过这个，几乎成功了。 我唯一想知道的是如何将流文件名从app/tmp.html更改为build/app/tmp.html 。

到目前为止，这是我的观察任务：

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

非常感谢您的帮助！

Answer 1

好的，我休息了一会儿，挖得更深了一点。查看gulp-debug我想出了一个解决方案，使用以下其他节点模块gulp和gulp-watch：

gulp-filter 首先过滤掉已删除的文件
through2 浏览所有已过滤（已删除）的文件
path 获取相对路径
gulp-clean 实际从构建目录中删除文件

所有这一切看起来都像这样（截至撰写此答案时，我使用的是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() );
} );

我发现它不是很干净，因为我只修改了文件对象上的路径，但它确实有效，所以我很高兴。如果您有更清晰的解决方案，欢迎您发布另一个答案或将其留在评论中

我希望它在某种程度上是有用的干杯！

在gulp-watch任务中改变流文件名

1 个答案: