Enable Minification

[MatthewVita]

I'm going to be sending a PR for this (hopefully) by the end of the week 🎅

[DavidSouther]

The biggest issue I have run into is getting Uglify to handle sourcemaps sanely. This will be "complete" when the sourcemap returned with the minified file correctly maps to the original script files (in Chrome).

[MatthewVita]

Thanks for the heads up.

[MatthewVita]

Okay, sorry I'm starting on this so late >.<

If I am understanding the code correctly, https://github.com/RupertJS/stassets/blob/master/lib/Watchers/Script.coffee#L54-#L60 isn't being called at the moment. If that is the case, what's the best way to invoke it?

Also, are we only concerned with JavaScript sourcemaps or do we want coffee as well?

[DavidSouther]

https://github.com/RupertJS/stassets/blob/master/lib/Watchers/Script.coffee#L64

Stassets Watchers are map/reduce, in this case we call them render/concat. Each file in the list of patterns (the thing you create when you specify script: types: [...] gets passed individually through the render function, then the array of all the render results get passed to the concat function. The render function returns an object {content: string, sourceMap: object, path: string} where content is the rendered content for that file type (eg js -> js w/ immediately invoked function, coffee -> js, es6 -> js with System module), sourceMap is an object representation of the source map for that file (eg has field version with value 3, has field mappings with array of mappings, etc), and path is just the string path as a convenience / nonce value. Finally, the concat method returns {content: string, sourceMap: object} where content is the single resulting file content, and sourceMap is a sourceMap object (not string).

minify will get called if {scripts: {compress: true}} is set, the same place you set the types array. The base approach to concatenating files with sourcemap is to do something like compiledFiles.pluck('content').join('\n'), while simultaneously adding each sourceMap to a master sourceMap using the sourceMap Sections mechanism (see "Index map: supporting post processing" in https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.535es3xeprgt

The issue I had with my first attempt at uglify was with trying to use an in-memory sourceMap; uglify wanted the sourceMap to be on disk and referenced using the sourceMap comment in the generated file.

[MatthewVita]

David,

Thanks for that wealth of information, it should help me get started.

I do have a few questions/things for us to consider, but I'll hold off until I can get this thing running (even if "running" at the moment means "half working").

Here's my Script.coffee method:

minify: ({content, sourceMap})->
    console.log 'here!!!'
    content = ngmin.annotate content
    result = UglifyJS.minify content,
        fromString: true
        inSourceMap: sourceMap
        outSourceMap: "app.js.map"
    {content: result.code, sourceMap: result.map}

Here's my server.json:

{
  "stassets": {
    "verbose": true,
    "root": "./src/client",
    "vendors": {
      "prefix": [],
      "js": [],
      "css": [],
      "scripts": {
        "compress": true
      }
    }
  },
  "tls": false,
  "routing": [
    "./src/server/allow.coffee",
    "./src/server/**/route.coffee"
  ]
}

(This is rupert w/ Angular, BTW.)

It doesn't minify and it doesn't say 'here' in stdout :(

[DavidSouther]

scripts goes under stassets, not under vendors. I'll update the docs.

[MatthewVita]

ughh, I knew that... my bad!!!

[MatthewVita]

dang, still not compressing, generating a sourcemap or writing a message to stdout. I'll keep debugging and will update you

[DavidSouther]

You know, I might have missed this but why are you using a rupert config object? You should be testing this using ./test/server/app.js and add the compress value in ./test/server/config.js

[MatthewVita]

https://gist.github.com/MatthewVita/dba72f48970fa391b457

[MatthewVita]

Looks like I'm going to give this a try https://github.com/mishoo/UglifyJS2#the-hard-way ...did you try that path ever?

[DavidSouther]

Looks like it's using Mozilla's source maps under the hood, which don't support sections

[MatthewVita]

how do you feel about trying out the closure compiler for this? Here's a JRE-free one: https://github.com/dcodeIO/ClosureCompiler.js

[DavidSoutherTravis]

Bounced the idea around a few times. Go for it. Using the jar is fine, I
can point out dibs techniques projects use to keep the local jar up to date.

On Wed, Jan 7, 2015, 22:22 Matthew Vita notifications@github.com wrote:

how do you feel about trying out the closure compiler for this? Here's a
JRE-free one: https://github.com/dcodeIO/ClosureCompiler.js

—
Reply to this email directly or view it on GitHub
#23 (comment).

[MatthewVita]

We can switch to the jar once we're sure this is the direction to go, no?

Here's a minify implementation with the CC. It seems that FILES are the only way for this to work, not in memory values... do you know any way around this? Have you experienced this in the past?

minify: ({content, sourceMap}) ->
    unix = unixTime.now()
    tmpFiles =
        minFile: unix + '.min.js'
        mapFile: unix + '.map.js'
        minData: ''
        mapData: ''

    try
        fs.writeFileSync tmpFiles.minFile, content, 'utf-8'
    catch
        return err

    ClosureCompiler.compile tmpFiles.minFile,
        compilation_level: "ADVANCED_OPTIMIZATIONS",
        create_source_map: tmpFiles.mapFile,
    , (err, result) ->
        if err
            return err

        tmpFiles.minData = result

        try
            tmpFiles.mapData = fs.readFileSync(tmpFiles.mapFile).toString()
        catch err
            return err

        [tmpFiles.minFile, tmpFiles.mapFile].forEach (file) ->
            try
                fs.unlinkSync(file)
            catch err
                return err

        return {content: tmpFiles.minData, sourceMap: tmpFiles.mapData}

...which results in

{
    content: 'angular.a("stassets.main",["stassets.main.controller","main.template"]);angular.a("stassets.main.nav.service",[]).e("NavSvc",function(){});(function(){var a;a=function(){return function(){}}();angular.a("stassets.main.controller",[]).b("MainCtrl",a)}).call(this);angular.a("stassets.main.nav.directive",["main.nav.template","main.nav.service"]).c("stassetNav",function(){return{d:"AE",f:"main/nav"}});\n',

    sourceMap: '{\n"version":3,\n"file":"",\n"lineCount":1,\n"mappings":"AACEA,OAAAC,EAAA,CAAe,eAAf,CAAgC,CAAC,0BAAD,CAA6B,eAA7B,CAAhC,CAMFD,QAAAC,EAAA,CAAe,2BAAf,CAA4C,EAA5C,CAAAC,EAAA,CACW,QADX,CACqBC,QAAe,EAAE,EADtC,CAOC,UAAQ,EAAG,CACV,IAAIC,CAEJA,EAAA,CAAY,QAAQ,EAAG,CAGrB,MAFAA,SAAiB,EAAG,EADC,CAAZ,EAOXJ,QAAAC,EAAA,CAAe,0BAAf,CAA2C,EAA3C,CAAAI,EAAA,CAA0D,UAA1D,CAAsED,CAAtE,CAVU,CAAX,CAADE,KAAA,CAYQ,IAZR,CAeEN,QAAAC,EAAA,CAAe,6BAAf,CAA8C,CAAC,mBAAD,CAAsB,kBAAtB,CAA9C,CAAAM,EAAA,CAAmG,YAAnG,CAAiH,QAAQ,EAAG,CAC1H,MAAO,CACLC,EAAU,IADL,CAELC,EAAa,UAFR,CADmH,CAA5H;",\n"sources":["1420772603.029.min.js"],\n"names":["angular","module","service","NavSvc","MainCtrl","controller","call","directive","restrict","templateUrl"]\n}\n'
}