grunt usemin:是否可以有一个dist缩小的*.js源映射文件，它指向原始文件，而不是连接的文件

Question

我不知道这是否可能，但我希望我的usemin任务生成原始文件的SourceMap。

假设我在index.html页面中有以下*.js文件作为一个块：

<!-- build:js scripts/app.js -->
<script src="scripts/s1.js"></script>
<script src="scripts/s2.js"></script>
...
...
<!-- endbuild -->

usemin的默认行为，我喜欢，是一个两步过程：

1. concat-连接块中的所有文件，并将生成的app.js文件放在.tmp/concat/scripts/app.js中
2. uglify-缩小上面的app.js文件，并将其放入dist/scripts/app.js中

使用它，我能够生成app.js.map文件，一个用于实际的原始文件，位于.tmp/concat/scripts文件夹中，另一个用于dist/scripts文件中的连接文件。

问题是，我需要使用原始块的s1.js、s2.js文件(也许还有其他文件)调试dist的app.js文件，但我在.tmp.中引用了usemin生成的串联app.js

即

.tmp
|
concat
|
scripts
app.js
app.js.map (references to s1.js, s2.js, etc...)
– application
|– index.html
|– scripts
s1.js
s2.js
..
– dist
|- scripts
app.js
app.js.map (references to .tmp's app.js only, but I need it to take me to original s1.js, s2.js files)

我希望我做错了什么，我可以生成一个指向原始文件的源映射文件，但如果不是，其他程序员是如何使用这样的usemin并能够在生产中调试minimied.js的？

Answer 1

是！使用sourceMapIn选项。

我的做法：

useminPrepare: {
options: {
...
flow: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['concat', 'cssmin']
},
post: {
js: [{
name: 'concat',
createConfig: function (context, block) {
context.options.generated.options = {
sourceMap: true
};
}
}, {
name: 'uglify',
createConfig: function (context, block) {
context.options.generated.options = {
sourceMapIn: '.tmp/concat/' + block.dest.replace('.js', '.js.map'),
mangle: false,
beautify: {
beautify: true
}
};
}
}]
}
}
}

}

Answer 2

我在@wilenx解决方案中尝试过，但没有成功，因为sourceMap:true缺少uglify配置。

对我来说，这是最低限度的工作解决方案：

useminPrepare: {
html: 'app/index.html',
options: {
dest: 'dist',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {
js: [{
name: 'concat',
createConfig: function (context) {
context.options.generated.options = {
sourceMap: true
};
}
}, {
name: 'uglify',
createConfig: function (context, block) {
context.options.generated.options = {
sourceMap : true,
sourceMapIn: '.tmp/concat/' + block.dest.replace('.js', '.js.map')
};
}
}]
}
}
}
}
},