Question

目前，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']
    }
  }
},

这会在Sources下的开发工具中创建一个源地图。这个源映射是可用的，但我宁愿能够逐个文件地搜索并浏览开发工具中的每个文件。如果保留整个项目目录和文件结构会很好，这样我就可以搜索并浏览每个文件并添加调试器等。

我该怎么做？

Answer 1

这可以通过按如下方式配置任务来实现：

注意：以下两个解决方案都需要在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']
    }
  },
  // ...
}

<强>解释

在concat任务中，您需要先将sourceMap选项设置为true。根据您当前的配置，这将在以下路径中创建源映射文件：

build/_tsbc.js.map

注意：生成的地图文件的位置默认为dest任务的angular目标中定义的concat路径 - 附加{{1附加后缀。
然后在.map任务中添加sourceMapIn选项并将其值（字符串）设置为上面第一阶段生成的uglify文件的路径。即。
```
.map
```

2。源地图的明确定义名称：

还可以定义sourceMapIn: './build/_tsbc.js.map'任务生成的源映射文件的特定名称和路径。例如：

concat

<强>解释

与之前相同，将sourceMap选项设为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选项并指定生成的源地图的路径。

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

true
同样，在'build/my_map.map'任务中添加sourceMapIn选项并将其值设置为上一点中指定的相同路径。即。
```
uglify
```

修改

我刚刚注意到sourceMapIn: './build/my_map.map'任务中的bower目标不依赖于之前uglify任务的输出。对于此场景，您需要在每个目标中嵌套concat对象。例如：

options

如何使用grunt-contrib-concat和grunt-contrib-uglify为每个单独的js文件创建源图？

1 个答案:

1。使用源映射的默认生成名称：

2。源地图的明确定义名称：