我的前端应用程序上 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 文件时解决此问题的最佳做法是什么?
最佳答案
您可以使用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/
关于javascript - 在本地调试期间移出捆绑的 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37842210/