使用多级源映射调试Javascript

Question

我有很多javascript文件，它们通过grunt uglify并逐个缩小，而且，我正在对这些文件进行grunt concat以获得带源映射的单个捆绑缩小文件。

前。

  

a.js，b.js，c.js ->    Uglify -> a.min.js，b.min.js，c.min.js -> concat -> bundle.min.js

使用dev工具和源映射，来自bundle.min.js，我只能追溯到a.min.js / b.min.js / c.min.js。 我的目标是使用源地图追溯到a.js / b.js / c.js。

Answer 1

您的要求可以实现，但您需要将任务的顺序更改为以下内容：

a.js, b.js, c.js --> concat --> bundle.js --> uglify --> { {1}}

注意：在 uglifying 结果输出之前，任务的顺序已更改为连接各个bundle.min.js文件。

为什么需要更改任务的顺序？

由于grunt-contrib-uglify提供了sourceMapIn选项，而grunt-contrib-concat却没有提供选项。除了 uglifying 之前连接文件的典型做法。

.js选项描述如下：

  

<强> sourceMapIn

     

输入：sourceMapIn

     

默认值：String Function

     

来自早期编辑的输入源地图的位置，例如来自CoffeeScript。如果提供了函数，则将uglify源作为参数传递，并将返回值用作sourceMap名称。这只有在有一个源文件时才有意义。

<强> Gruntfile.js

您的undefined可以配置如下：

Gruntfile.js

备注：

1. 为module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.initConfig({ concat: { options: { // ... sourceMap: true, sourceMapName: 'dist/js/bundle.map' // Specify path/name for sourceMap }, my_target: { src: ['src/js/a.js', 'src/js/b.js', 'src/js/c.js'], dest: 'dist/js/bundle.js', }, }, uglify: { options: { // ... sourceMap: { includeSources: true }, sourceMapIn: 'dist/js/bundle.map', // Specify the same path/name as // the `sourceMapName` value // in the `concat` task }, my_target: { files: { 'dist/js/bundle.min.js': ['dist/js/bundle.js'] } } } }); // Note we run the `concat` task before the `uglify` task. grunt.registerTask('default', ['concat:my_target', 'uglify:my_target']); }; 和concat.options.sourceMapName指定的路径值必须相同，例如uglify.options.sourceMapIn。

2. dist/js/bundle.map任务必须在concat任务之前运行。

3. 这两项任务的uglify和src路径都需要根据您的项目要求进行定义。