創建源映射的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文件。

這是可以預料的，因爲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任務中使用它。你現在使用它的方式只會產生一個空的源映射文件。