grunt-usemin：是否有可能有一个 dist 缩小的 *.js 源映射文件指向原始文件而不是连接的文件？答案

【问题标题】：grunt-usemin: Is it possible to have a dist minified *.js sourcemap file that points to the original files and not the concatenated one?grunt-usemin：是否有可能有一个 dist 缩小的 *.js 源映射文件指向原始文件而不是连接的文件？
【发布时间】：2015-04-27 12:04:43
【问题描述】：

我不知道这是否可能，但我希望我的 usemin 任务为 original 文件生成一个 SourceMap。

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

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

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

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

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

问题是我需要使用原始块的 s1.js、s2.j2 文件（也许还有其他文件）来调试 dist 的 app.js 文件，但我被引用回 usemin 生成的串联 app.js 文件.tmp.

即

.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 并能够在生产中调试缩小的 .js ?

【问题讨论】：

标签： gruntjs grunt-usemin

【解决方案1】：

Yes!使用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
                        }
                    };
                }
            }]
        }
    }
}

}

【讨论】：

【解决方案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')
                  };
                }
              }]
            }
          }
        }
      }
    },

【讨论】：