Question

我有一个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文件，但是它不再具有在浏览器版本化之前就存在的原始地图中的原始资源。

以下是结果源映射文件包含的内容：

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

我尝试对Browserify使用uglifyify转换，但是似乎没有生成与Uglify任务一样小的文件。

我也将所有依赖关系提高到了最新水平，但是我无法解决此问题。

Answer 1

grunt-contrib-uglify具有一个sourceMapIn选项，该选项使您可以从较早的编译中指定输入源映射文件的位置-在您的方案中是browserify任务。

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

我们没有一个外部源映射文件，可以配置后续sourceMapIn任务的grunt-contrib-uglify选项以供使用。
grunt-browserify不提供创建外部.map文件的功能，它仅是内联创建的（请参见here）

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

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']);
};

说明

首先调用browserify任务，该任务将输出一个新文件（即build/myapp.js），其中包含您捆绑的JavaScript和“内联” 源地图信息。如果您现阶段要检查build/myapp.js的内容，则最后应包含以下内容：
```
//# sourceMappingURL=data:application/json;charset=utf-8;base64, ...
```
接下来，将调用extract_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或require()

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

1 个答案: