使用多级源映射调试Javascript

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

Ex.

a、 js，b.js，c.js

->

Uglify

->

a.min.js、b.min.js、c.min.js

->

concat

->

bundle.min.js

---

使用开发工具和源代码映射，从bundle.min.js，我只能追溯到a.min.js/b.min.js/c.min.js我的目标是使用源代码映射追溯到a.js/b.js/c.js。

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

---

a.js、b.js、c.js

-->

-->

---

注意：任务的顺序已更改为在生成结果输出之前连接单个

.js

文件

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

因为提供了选项，而实际上没有。此外，在丑化文件之前连接文件是典型的做法

sourceMapIn

选项描述如下：

sourceMapIn

类型：

字符串函数

默认值：

未定义

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

grunfile.js

您的

grunfile.js

可以进行如下配置：

module.exports=函数（grunt）{
grunt.loadNpmTasks（“grunt-contrib-uglify”）；
grunt.loadNpmTasks（“grunt-contrib-concat”）；
grunt.initConfig({
康卡特：{
选项：{
// ...
sourceMap:true，
sourceMapName:'dist/js/bundle.map'//指定sourceMap的路径/名称
},
我的目标：{
src:['src/js/a.js'，'src/js/b.js'，'src/js/c.js']，
dest:'dist/js/bundle.js'，
},
},
丑陋的：{
选项：{
// ...
源地图：{
包括来源：正确
},
sourceMapIn:'dist/js/bundle.map'，//指定与相同的路径/名称
//`sourceMapName`值
//在“concat”任务中
},
我的目标：{
档案：{
'dist/js/bundle.min.js'：['dist/js/bundle.js']
}
}
}
});
//注意，我们先运行'concat'任务，再运行'uglify'任务。
registerTask（'default'，['concat:my_target'，'uglify:my_target']）；
};

注意事项：

为

concat.options.sourceMapName

和

uglify.options.sourceMapIn

指定的路径值必须相同，例如

dist/js/bundle.map

concat

任务必须在

uglify

任务之前运行

这两个任务的

src

和

dest

路径都需要根据您的项目要求定义

---

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

---

a.js、b.js、c.js

-->

-->

---

注意：任务的顺序已更改为在生成结果输出之前连接单个

.js

文件

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

因为提供了选项，而实际上没有。此外，在丑化文件之前连接文件是典型的做法

sourceMapIn

选项描述如下：

sourceMapIn

类型：

字符串函数

默认值：

未定义

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

grunfile.js

您的

grunfile.js

可以进行如下配置：

module.exports=函数（grunt）{
grunt.loadNpmTasks（“grunt-contrib-uglify”）；
grunt.loadNpmTasks（“grunt-contrib-concat”）；
grunt.initConfig({
康卡特：{
选项：{
// ...
sourceMap:true，
sourceMapName:'dist/js/bundle.map'//指定sourceMap的路径/名称
},
我的目标：{
src:['src/js/a.js'，'src/js/b.js'，'src/js/c.js']，
dest:'dist/js/bundle.js'，
},
},
丑陋的：{
选项：{
// ...
源地图：{
包括来源：正确
},
sourceMapIn:'dist/js/bundle.map'，//指定与相同的路径/名称
//`sourceMapName`值
//在“concat”任务中
},
我的目标：{
档案：{
'dist/js/bundle.min.js'：['dist/js/bundle.js']
}
}
}
});
//注意，我们先运行'concat'任务，再运行'uglify'任务。
registerTask（'default'，['concat:my_target'，'uglify:my_target']）；
};

注意事项：

为

concat.options.sourceMapName

和

uglify.options.sourceMapIn

指定的路径值必须相同，例如

dist/js/bundle.map

concat

任务必须在