CODEWITHSUNDEEP
gruntjsgrunt-usemin
dror
dror

Reputation: 3946

grunt-usemin: Is it possible to have a dist minified *.js sourcemap file that points to the original files and not the concatenated one?

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?

Upvotes: 1

Views: 813

Answers (2)

Marcel Amsler
Marcel Amsler

Reputation: 11

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')
                  };
                }
              }]
            }
          }
        }
      }
    },

Upvotes: 1

dror
dror

Reputation: 3946

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

}

Upvotes: 3

Related Questions