代码之家 › 专栏 › 技术社区 › Programmingjoe

如何使用grunt contrib concat和grunt contrib uglify为每个单独的js文件创建sourcemap?

grunt-contrib-concat grunt-contrib-uglify source-maps gruntjs

1

Programmingjoe · 技术社区 · 6 年前

目前,concat和uglify设置为:

concat: {
  options: {
    // options
  },
  angular: {
    src: ['public/**/*.js', '!public/**/*.min.js', '!public/lib/**/*.js'],
    dest: 'build/_main.js',
  }
},

uglify: {
  options: {
    mangle: false,
    sourceMap: true,
  },
  app: {
    files: {
      'public/js/app.min.js': ['build/_main.js']
    }
  },
  bower: {
    files: {
      'public/js/lib.min.js': ['build/_bower.js']
    }
  }
},

这将在“源”下的“开发工具”中创建一个源映射。这个源代码映射是可用的,但我更希望能够逐个文件搜索,并在开发工具中浏览每个文件。如果保留整个项目目录和文件结构,这样我就可以搜索和导航每个文件,添加调试器,等等,那就太好了。

我该怎么做?

1 回复 | 直到 6 年前

1

2

RobC Manuel Gonzalez 6 年前

这可以通过如下配置任务来实现:

注: 以下两种解决方案都需要 concat 要在 uglify 任务

1、使用默认生成的源地图名称:

concat: {
  options: {
    sourceMap: true // <-- 1. Enable source maps
  },
  angular: {
    src: ['public/**/*.js', '!public/**/*.min.js', '!public/lib/**/*.js'],
    dest: 'build/_tsbc.js',
  }
},

uglify: {
  options: {
    mangle: false,
    sourceMap: true,
    sourceMapIn: './build/_tsbc.js.map' // <-- 2. Define .map file to use.
  },
  app: {
    files: {
      'public/js/app.min.js': ['build/_tsbc.js']
    }
  },
  // ...
}

解释

在您的 康卡特 任务您需要首先设置 sourceMap 选项到 true 。根据您当前的配置,这将在以下路径创建源映射文件:

build/_tsbc.js.map

注意:生成的地图文件的位置默认为相同 dest 中定义的路径 angular 的目标 康卡特 任务-附加 .map 追加后缀。
然后在你的 丑陋的 任务添加 sourceMapIn 选项并将其值(字符串)设置为 .地图 在上述第一阶段生成的文件。即。
```
sourceMapIn: './build/_tsbc.js.map'
```

2、明确定义源映射的名称:

还可以定义由生成的源映射文件的特定名称和路径 康卡特 任务例如:

concat: {
  options: {
    sourceMap: true,  // <-- 1. Enable source maps
    sourceMapName: 'build/my_map.map'  // <-- 2. Specify output path
  },
  angular: {
    src: ['public/**/*.js', '!public/**/*.min.js', '!public/lib/**/*.js'],
    dest: 'build/_tsbc.js',
  }
},

uglify: {
  options: {
    mangle: false,
    sourceMap: true,
    sourceMapIn: './build/my_map.map'  // <-- 3. Define .map file to use.
  },
  app: {
    files: {
      'public/js/app.min.js': ['build/_tsbc.js']
    }
  },
  // ...
}

解释

与之前一样,设置 源地图 选项到 真的
这次,添加 sourceMapName 选项并指定生成的源映射的路径。

注意:生成的地图文件的位置现在设置为:

'build/my_map.map'
再一次,在你的 丑陋的 任务添加 sourceMapIn 选项,并将其值设置为上一点中指定的相同路径。即。
```
sourceMapIn: './build/my_map.map'
```

编辑

我刚刚注意到你的 bower 中的目标 丑陋的 任务不依赖于上一个 康卡特 任务对于此场景,您需要嵌套 options 对象。例如:

uglify: {
  app: {
    options: {  // <-- Specific options for `app` target 
      mangle: false,
      sourceMap: true,
      sourceMapIn: './build/my_map.map'  // <-- 3. Define .map file to use.
    },
    files: {
      'public/js/app.min.js': ['build/_tsbc.js']
    }
  },
  bower: {
    options: {  // <-- Specific options for `bower` target 
      mangle: false,
      sourceMap: true
      // <-- There's no `sourceMapIn` needed here.
    },
    files: {
      'public/js/lib.min.js': ['build/_bower.js']
    }
  }
},