如何使用 Grunt 为 Uglified 文件生成源映射？

Question

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

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 文件，但它不再具有在浏览器化之前存在的源映射中的原始源。

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

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

我已尝试对 Browserify 使用 uglifyify 转换，但生成的文件似乎不像 Uglify 任务那么小。

我也将所有依赖项都升级到了最新版本，但我无法解决这个问题。

Answer 1

grunt-contrib-uglify 有一个 sourceMapIn 选项，可让您从早期编译中指定输入源映射文件的位置 - 在您的场景中是 browserify 任务。

然而，虽然在 browserify 任务中设置 browserifyOptions: { debug: true } 确实会在生成的 .js 文件中（即在 build/myapp.js 中）生成内联源映射，但问题的症结在于双重：

1. 我们没有可以配置后续grunt-contrib-uglify 任务的sourceMapIn 选项以使用的外部源映射文件。

2. grunt-browserify 不提供创建外部.map 文件的功能，它只内联创建它们（参见here）

要解决上述问题，请考虑在生成后使用grunt-extract-sourcemap 从build/myapp.js（即从您的browserify 任务生成的输出文件）中提取内联源映射。

Gruntfile.js

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

module.exports = function (grunt) {

  grunt.initConfig({

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

      extract_sourcemap: {
        myapp: {
          files: {
            'build': ['build/myapp.js']
          }
        }
      },

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

  });

  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-extract-sourcemap');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Note the order of the tasks in your task list is important.
  grunt.registerTask('default', ['browserify', 'extract_sourcemap', 'uglify']);
};

说明

1. 首先调用browserify 任务，该任务输出一个新文件（即build/myapp.js），其中包含您捆绑的JavaScript 和“内联” 源映射信息。如果您要在此阶段检查 build/myapp.js 的内容，它的末尾会包含以下内容：

   //# sourceMappingURL=data:application/json;charset=utf-8;base64, ...
   

2. 接下来调用extract_sourcemap 任务。这实质上是从build/myapp.js 中提取"inlined" 源映射信息并将其写入一个名为myapp.js.map 的新文件，该文件保存在您的build 目录中。

   build/myapp.js 中的原始 "inlined" 源映射信息被替换为新生成的源映射文件的链接，即myapp.js.map。如果您检查 build/myapp.js 的内容，您现在会在文件末尾注意到以下内容：

   //# sourceMappingURL=myapp.js.map
   

3. 最后调用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 的任何文件或require()'d