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文件。

这是可以预期的，因为that's how source maps work。每个.js文件都包含sourceMappingURL条评论，该评论指向.js.map文件，以便您的浏览器知道在哪里找到它。

您可以使用addComment option：

将其删除

.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任务中使用它。您现在使用它的方式只会生成一个空的源映射文件。

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

1 个答案: