Question

我的前端应用上的 gulpfile.js 上的当前任务包括serve任务，它执行以下操作：

处理较少的文件
将所有javascripts捆绑成dist / bundle.js
Uglified 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>

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

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

Answer 1

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

这看起来像是：

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

1 个答案: