1

I don't know if it's possible, but I want my usemin task to generate a SourceMap to the original files.

Say I have the following *.js files as a block in my index.html page:

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

usemin's default behavior, which I like, is a two step process:

  1. concat - concatenation of all the files in the block, and putting the resulting app.js file in .tmp/concat/scripts/app.js.
  2. uglify - minify the above app.js file and putting it in dist/scripts/app.js.

Playing with it, I was able to generate app.js.map files, one for the actual original files, which resides in the .tmp/concat/scripts folder, and the other for the concatenated file in the dist/scripts folder.

The problem is that I need to debug dist's app.js file using the original block's s1.js, s2.j2 files (perhaps others as well), but I'm referenced back to usemin's produced concatenated app.js file in .tmp.

i.e

.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)

I hope I'm doing something wrong and I can produce a source map file that points to the original files, but if not, how all the other programmers are using usemin like this and able to debug the minified .js in production?

Dror Weiss
  • 3,286
  • 6
  • 27
  • 41

2 Answers2

3

Yes! Use the sourceMapIn option.

The way I did it:

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

}

Community
  • 1
  • 1
Dror Weiss
  • 3,286
  • 6
  • 27
  • 41
1

I tried it with @wilenx solution, but it didn't work, because the sourceMap: true was missing the uglify config.

For me this was the minimal working solution:

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')
                  };
                }
              }]
            }
          }
        }
      }
    },
Marcel Amsler
  • 11
  • 1