minification, optimization & source maps

[cniaulin]

Hi,

I am using mimosa to handle my project and I am really happy of this choice. Thanks for your awesome work on this project ! I set up minification & optimisation and had to use require.optimize.overrides to get it working. Now I am struggling to get source maps working. I end up with my mapped files appearing minified when I use mimosa build -om (I use require.optimize.overrides.generateSourceMaps = true).

What is the state of source maps feature with Mimosa ? Could you provide more information about source maps within mimosa ? Maybe do you have an hint for my issue of mapped files appearing minified ?

[dbashford]

There have been a few folks struggling to figure out source maps and requirejs lately. There's a good chance at some point they were broken. Source maps + mimosa-minify + mimosa-require is something I need to take a hard look at to make sure that things are working great.

[dbashford]

Had a chance to dig in. One thing I did was release a new version of mimosa earlier today with an upgraded version uglify. It was reporting warnings when it should not have and it should be good now.

Few things:

• If you run mimosa build no source maps are generated from uglify. The conceptual difference between watch and build is watch is for dev andbuildis for... making builds. Many mimosa modules treat the commands that way. source maps are definitely a dev time thing, somimosa build` by default doesn't create them. Some modules don't allow from varying from that default.
• If you run optimize AND minify, what happens is the code gets minified (with source maps) and then optimized by requirejs. requirejs does NOT take input source maps. So essentially source maps don't work when requirejs isn't doing the minification.
• If you run just optimize or just minify, source maps should be good. requirejs, if IT is doing the minifying, will create a source map.
• uglify takes input source maps. So if you have source maps from coffeescript, uglify will allow you to map from minified javascript => javascript => coffeescript. mimosa wires those things all together.

Unfortunately the requirejs piece is missing. It would be fairly magical to go from coffee => js => min js => concat js, all while preserving maps back to the coffee.

If any of that is not working let me know. Haven't been able to run through all the scenarios.

[cniaulin]

Thanks for having a look so quick ! I think source maps should be also made when using the build command. It is very helpful to offer minified & optimised code while being able to report and trace errors in production environment. I made some experimentations and had interessant results with the following configuration:

require:
    optimize :
      inferConfig: false
      overrides:
        preserveLicenseComments: false
        optimize: 'uglify2'
        logLevel: 3
        baseUrl: 'staging/javascripts'
        wrap: true
        findNestedDependencies: true,
        mainConfigFile: 'staging/javascripts/main.js'
        include: [ 'main' ]
        insertRequire: [ 'main' ]
        name: 'almond'
        out: 'staging/javascripts/main-built.js'
        generateSourceMaps: true

[CraigCav]

I'd hit upon similar observations when working on mimosa-traceur - see https://github.com/CraigCav/mimosa-traceur/issues/1.

The holy-grail for mimosa-traceur is to be able to have es6 -> es5 => minjs => concat js while allowing for source map support to debug against the original es6 source. Something similar to this gulp-based implementation.

Although I agree that watch is for dev, more than once I've been bitten by the output of build having different run time behavior to the output of watch. In most cases, the discrepancy in behavior was due to dependencies missed by the optimizer (no fault of mimosas - just a symptom of how my project is using requirejs). This has lead me to wanting to be able to develop (with live-reload support) where the running code is the minified/optimized artifacts.

[dbashford]

Ya, I hear ya. In the case of that gulp implementation, its using browserify, so you are constantly developing with concatenated assets which I've always found less than ideal, but, bonus, browserify doesn't have the input source map issues that requirejs does.

I've been spending a lot of time lately thinking about bundling/packaging, and trying to figure out alternative-to-requirejs ways to allow me to develop with individual files and easily zip them all up, possibly something that leverages/understands es6. It would be nice to be able to flip a switch and go from developing with single files to developing with concatenated ones and not feel too much pain. I have a few other big fundamental things to work through with mimosa over the next few weeks, but besides some possible new modules (6to5, beautify, phantomcss) the bundling thing is something I hope to tackle over the next few months.