Gruntjs 如何使用Grunt为丑陋的文件生成源地图？

我有一个Grunt项目，它同时使用Browserify和Uglify。以下是它的核心部分：

browserify: {
  myapp: {
    options: {
      transform: ['babelify'],
      browserifyOptions: {
        debug: true
      },
    },
    src: 'src/index.js',
    dest: 'build/myapp.js'
  }
},

uglify: {
  options: {
    sourceMap: true,
    banner: bannerContent
  },
  target: {
    src: 'build/myapp.js',
    dest: 'build/myapp.min.js'
  }
},

它似乎生成了一个

myapp.min.js.map

文件，但它不再具有Browserification之前存在的源映射中的原始源

以下是生成的源映射文件包含的内容：

{
  "version":3,
  "sources":[
    "myapp.js"
  ],
  "names":[
    ...
    ...
    ...
  ],
  "mappings":".........",
  "file":"myapp.min.js"
}

我曾尝试使用

uglifyify

转换来进行Browserify，但这似乎不像Uglify任务那样生成小文件

---

我还将所有依赖项更新为最新版本，但我无法解决此问题。

grunt contrib uglify

有一个选项，允许您指定早期编译中输入源映射文件的位置，在您的场景中，这是

browserify

任务

但是，在

browserifyOptions:{debug:true}

任务中设置

browserifyOptions:{debug:true}

时，会在生成的

.js

文件（即

build/myapp.js

中）中生成一个内联源代码映射，问题的症结有两个：

我们没有可以配置后续

grunt contrib uglify

任务的

sourceMapIn

选项使用的外部源映射文件

---

grunt-browserify

不提供创建外部

.map

文件的功能，它只创建内联文件（请参阅）

为了解决上述问题，考虑利用它从代码< >构建/MyApp.js<代码>（即，从生成的输出文件生成代码> > BRSSERISTITY < /COD>任务）。 grunfile.js

以下要点显示了应如何配置Gruntfile.js：

module.exports=函数（grunt）{
grunt.initConfig({
浏览：{
myapp：{
选项：{
转换：['babelify']，
浏览选项：{
调试：正确
},
},
src:'src/index.js'，
dest:'build/myapp.js'
}
},
提取源地图：{
myapp：{
档案：{
'build'：['build/myapp.js']
}
}
},
丑陋的：{
选项：{
sourceMap:true，
sourceMapIn:'build/myapp.js.map'
},
目标：{
src:'build/myapp.js'，
dest:'build/myapp.min.js'
}
}
});
grunt.loadNpmTasks（“grunt-browserify”）；
loadNpmTasks（'grunt-extract-sourcemap'）；
grunt.loadNpmTasks（“grunt-contrib-uglify”）；
//请注意，任务列表中任务的顺序很重要。
registerTask（'default'，['browserify'，'extract_sourcemap'，'uglify']）；
};

解释

首先调用

browserify

任务，该任务输出一个新文件（即

build/myapp.js

），其中包含绑定的JavaScript和“内联”源地图信息。如果您要在本阶段检查

build/myapp.js

的内容，那么它最后包括以下内容：

/#sourceMappingURL=data:application/json；字符集=utf-8；base64。。。

接下来调用

extract\u sourcemap

任务。这实际上是从

build/myapp.js

中提取“内联”源映射信息，并将其写入名为

myapp.js.map

的新文件中，该文件保存在

build

目录中

build/myapp.js

中的原始“内联”源地图信息被替换为指向新生成的源地图文件的链接，即

myapp.js.map

。如果检查

build/myapp.js

的内容，您现在会注意到文件末尾的以下内容：

/#sourceMappingURL=myapp.js.map

最后调用

uglify

任务。注意它的

sourceMapIn

选项是如何配置为读取

build/myapp.js.map

，即我们在步骤2生成的源映射文件的

此任务创建所需的

build/myapp.min.js

文件，其中包含：；缩小的JS，以及指向新生成的源映射文件

build/myapp.min.JS.map

的链接

---

注意最终生成的文件（即

build/myapp.min.js

）现在正确映射回原始的

src/index.js

文件，并且

index.js

本身可能有

import

'ed或

require（）

grunt browserify

不创建外部src映射文件的任何文件-请参阅。尝试：1）使用从

myapp.js

读取内联src映射并创建外部src映射文件（注意：在当前browserify任务之后和uglify任务之前运行此任务）。2） 在

uglify

任务中设置选项以使用在步骤1中创建的src映射。@RobC当脚本使用uglify步骤缩小时，生成的脚本文件是否仍具有到源映射文件的正确映射？如果我理解正确，Unglify步骤只会缩小JS文件，但不会更改source-map。这似乎是从map文件中删除源。中间文件有，但结果文件没有。我添加了

sourcemaincludesources:true

，但它不起作用。Rob有什么建议吗？显然它已经改变了：有趣的是，我得到了

“sources”：[..]

在生成的

build/myapp.min.js.map

文件中列出，使用我的答案中显示的配置。如果将

sourceMap:{includeSources:true}

添加到

uglify

tasks

options

对象，会发生什么情况？如果做不到这一点，也许可以尝试使用grunt-contrib-uglify的早期版本。sourceMap:{includeSources:true}不走运@RobC-您知道您使用的grunt contrib uglify的哪个版本吗？回滚到grunt contrib uglify的^2.0.0也不起作用。我得到一个警告错误：丑化失败。无法读取“dist/index.js.map”文件（错误代码：enoint）。