javascript - 在本地调试期间移出捆绑的 Javascript

Question

我的前端应用程序上 gulpfile.js 的当前任务包括一个 serve 任务，它执行了以下操作:

• 处理的文件较少
• 将所有 javascript 捆绑到 dist/bundle.js
• 丑化的 dist/bundle.js

由于这使得本地调试变得困难，因此我创建了一个新的 serve:debug 任务，该任务一开始并没有丑化 dist/bundle.js。

gulp.task('serve:debug', ['less', 'bundle', 'watch'], function () {
    runServer('http://localhost/app/login.html')
});

这很有效，让我至少能够调试人类可读的 JavaScript 代码。但所有文件仍然捆绑在一起，因为我的应用程序在 index.html 上显式导入 dist/bundle.js:

<script src="dist/bundle.js"></script>

如果我删除 serve:debug 上的 bundle 任务，应用程序将无法再访问 dist/bundle.js。

问题:导入 javascript 文件时解决此问题的最佳做法是什么？

Answer 1

您可以使用gulp-sourcemaps将内联源映射写入您的包中。这将导致浏览器的开发人员工具显示源代码，就像它在原始源文件中一样，尽管实际上是在 bundle 中提供的。

这看起来像:

var sourcemaps = require('gulp-sourcemaps');

gulp.task('bundle', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(bundle())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

这里有关于源映射如何工作的很好的总体概述:http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/