Script tag/list maintenance module?

[ken...@baltrinic.com]

I am working on an angular JS application which has its own DI mechanism so I don't need require JS. However, require js provides more that just DI, it also provides a means of loading all the JS files that one needs w/o having explicitly maintain a list of what to load. All things equal, I like how mimosa sets things up with require.js where you either get all the individual files loaded via require or all the files consolidated into a single file. Either way, I never have to go adding script tags to my page and which approach gets used is controlled by a command line option.

Now with Angular, the normal thing to do is just add a long list of script tags to the index page and let angular worry about wiring them all together. That's fine as long as I don't h ave to maintain the list.'

So what I am hoping exists out there is a module that will manage that long list of script tags such that any file under my assets/javascript folder gets load as an individual files for debugging and can be consolidated and minified into a single file for production.

Is there already a similar solution in place for CSS that consolidates and minifies all ones CSS into a single file? Could it be leveraged?

Sorry that was a bit rambling. Hope I was clear on what I am looking for. Any ideas or suggestions?

--Ken

[Ken Carpenter]

You can use the mimosa-combine module: https://github.com/dbashford/mimosa-combine

The above page includes an example for CSS.  I haven't tried it for JS though, but I expect it would work.

You'll have to have some other mechanism for changing the list of files included in the HTML page though.

You could render a template that includes all the files or just the minified one depending on the current server setting, or you could have two separate static pages and have your code return one or the other based on app configuration.

If you create a default mimosa skeleton with "mimosa new testproj", then choose 5, 2, 9, 2, 3 to the list of questions, then Mimosa will create an index.html page and an index_optimized.html page in the views folder.  Also under routes/index.html, you can see the server chooses the optimized or the non-optimized file based on the configuration.

If you create a default mimosa skeleton with "mimosa new testproj2", then choose 5,2,4,2,5, then Mimosa will use Handlebars templates to differentiate between optimized and non-optimized mode.  See the views/index.hbs where it selects which files to include in the generated HTML.

Ken

[David Bashford]

mimosa-combine might get you part of the way there.  You can point it at a directory and have it bundle all the files together.  We use it mostly for CSS since requirejs manages our javascript, but it should work there too.

I have seen angular apps wrapped in requirejs such that the "main.js" just reads like this...

var controllers = ["array", "of", "amd", "paths];

var directives = ["another", "array"]

require(controllers);

require(directives);

And so on...

In this case your actual files don't need to be wrapped in AMD (I don't believe) since order doesn't matter.  As you said, Angular wires it all up later.

This doesn't save you a huge amount, other than having something a liiittttle bit more sane to reason about other than a long list of scripts.  And require.js should bundle that up just fine.

--
You received this message because you are subscribed to the Google Groups "mimosajs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mimosajs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ken...@baltrinic.com]

David, Ken,

Thanks for the quick reply. I am aware of the combine module. Didn't realize that was what was handling CSS. Makes sense tough.

@Ken, FYI, odd that your message only posted here once. It did spam my inbox 10 time tough. :)

--Ken