创建源映射的Gulp任务会影响所有文件，而不仅仅是那些已经更改的文件。

Question

我正在尝试提出一个gulp任务，每当相应的.js文件更改时，它就会生成新的源代码映射，到目前为止，这就是我所拥有的：

gulp.task('maps', [ 'compile:ts' ], function () {
   return gulp.src([
         'app/**/*.js'
     ])
  .pipe(newer({ dest: 'app', ext: '.js.map' }))
  .pipe(print(function (filepath) {
     return 'Creating source map for ' + filepath + '...';
  }))
  .pipe(sourcemaps.init())
  .pipe(sourcemaps.write('./'))
  .pipe(print(function (filepath) {
     return 'Writing source map for ' + filepath + '...';
  }))
  .pipe(checkout())
  .pipe(gulp.dest('app'))
  ;
});

现在有两件奇怪的事情发生了：

• gulp-newer返回所有.js文件，不管它们是否被更改(关于.map.js文件的时间戳)。
• gulp-sourcemaps同时发出.js和.js.map文件。

有人能给我一个提示吗？

Answer 1

gulp-sourcemaps同时发出.js和.js.map文件。

这是意料之中的，因为这就是源代码映射的工作方式。每个.js文件都包含一个指向.js.map文件的sourceMappingURL注释，以便浏览器知道在哪里可以找到它。

您可以通过使用选项将其排除在外。

.pipe(sourcemaps.write('./'), {addComment:false})

当然，这意味着您的HTTP服务器必须为每个X-SourceMap文件发送一个.js头。

gulp-newer返回所有.js文件，不管它们是否被更改(关于.map.js文件的时间戳)。

这可能是由于gulp-sourcemaps同时发出.js和.js.map文件，从而有效地覆盖了现有的.js文件。使用相同的源目录和目标目录通常是个坏主意，所以使用不同的dest目录可以解决这个问题。

(它也可能是由checkout()管道引起的，但您没有描述它的作用。我会尝试移除这个，看看它是否有效。)

不过，我不认为上述任何一件事都很重要，因为您的一般方法和使用gulp-sourcemaps的方式都可能完全错误。我假设您希望原始.ts文件中的源代码映射到已编译的.js文件中。在这种情况下，您需要在compile:ts任务中使用它。现在使用它的方式只会产生一个空的源图文件。