grunt-usemin
grunt-usemin copied to clipboard
yeoman
Replace non-minified library with minified library with usemin?
Is there a way to have your html file include non-minified versions of external libraries but during the useminPrepare/usemin phase have them substituted for their minified equivalents?
Before:
<!-- build:js js/third_party.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/lodash/lodash.js"></script>
<script src="components/angular/angular.js"></script>
<!-- endbuild -->
After:
<script src="components/jquery/jquery.min.js"></script>
<script src="components/lodash/lodash.min.js"></script>
<script src="components/angular/angular.min.js"></script>
Reasons this would be useful:
- Able to use the non-minified version for dev build (where no usemin step exists)
- No need to re-minify code that's already minified
- Saves precious build time
- Reduces risk of breaking something during uglify - i.e. let the author do that because they know the code the best
Assuming this use case isn't already covered, a suggestion for how to do this via an optional additional comment after each item, eg:
<script src="components/jquery/jquery.js"></script>
<!-- minified:components/jquery/jquery.min.js -->
Consideration would have to be taken to exclude these files from the uglify step.
Thoughts?
I don't quite follow what you are trying to do? Are you just wanting reference a non minified version in your dev then build out to a minified version??
This is what usemin already does. Unless I'm misunderstanding what you are saying. In your example your before code would result in a concatenated minified file called third_party.js containing the 3 scripts you passed into the build block. If you want them output as per your after code then you would just put each in its own build block for example;
<!-- build:js components/jquery/jquery.min.js -->
<script src="components/jquery/jquery.js"></script>
<!-- endbuild -->
Will give you your non minified version in your dev, the when usemin is run it will output a minified version called jquery.min.js in your build
Yes but then usemin is re-minifying libraries like jquery that already provide minified versions. It slows build time - that's the main thing. But also without knowledge of a library's internals, minifying it yourself could break it (eg: some libraries need to have certain options for mangle). I'd rather leave it to the library authors to produce a minified version.
I see what you mean. V2 is in dev at the moment but not sure anything like this is being looked at. It can probably be achieved using some combo of grunt copy and another task perhaps. The build speed in v2 is improved quite a bit also.
There is also options to control the flow in v2 which might help tackle this. Take a look at the docs on the v2 branch. You could essentially tell it not to minify those file then use a copy task perhaps.
+1 to this. We could kludge it together with https://github.com/yeoman/grunt-usemin/issues/128 when that gets in, but a magical "look for xxxx.min.xxx in the same directory as xxxx.xxx, and concat that after concatting and uglifying all other scripts in the block" would be sweet. With the order of the current Yeoman tasks we'd need to add an extra concat though: useminprepare -> concat -> mini/uglify -> (concat:mins) -> rev -> usemin.
+1
I googled for this feature and ended up here, so I guess I'd like it to exist also. ;-)
Would love to have this. Build times are slowing down as we re-minify 3rd party libraries. Even a special comment or attribute tag to note that uglify shouldn't be run on a particular file would help.
I've implemented this feature as a custom flow step. For those interested: https://github.com/rubenv/grunt-usemin-uglifynew
I would say have an option like:
<!-- build:js:usemin js/third_party.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/lodash/lodash.js"></script>
<script src="components/angular/angular.js"></script>
<!-- endbuild -->
The flag (haha see the usemin option there) would look for the name.min.js version of the file next to the non-minned version and then merely concat all the files together to the third_party.js file. So it doesnt include the uglify step or passes in custom config for uglify that turns off all the options
Don't assume that all libraries follow the basename.min.js convention. Maybe that's the default, but you should be able to override that.
Assuming the .min.js convention seems reasonable, as the user can change the file name to this easily.
What if a dependency system like Bower is bring used? Then the user has do a bower install and then manually rename a bunch of files? Also makes it difficult to automate this for a CI system.
I don't think it has to be that complicated to support overridden file names. Just an optional comment that gets parsed.
the optional comment actually makes it more complicated. that makes it even harder to automate.
As for it the the user is using bower install, i would think that works in favor of the .min. spec as a good bower package will have non-minified files as well as minified files (hopefully following the .min. convention)
perhaps something like <!-- build:js:lib --> would be more appropriate?
and only concatenate when a target is set? e.g <!-- build:js:lib js/third_party.js -->
I would be happy to assume the min naming scheme, and process all without. Fix non-conforming repos upstream :smile:.
An option with a map to minified libraries could be good too.
Is anyway doing anything with this? If not I'll take a look over the weekend
@zeppocreative It doesn't look like anyone has taken ownership of this one yet
@timelf123 Hi Tim been super busy with other projects. Not really had time to look. But I'm wondering if usemin in conjunction with grunt-inject might be a good combo to achieve this??
I was thinking about using https://github.com/tactivos/grunt-htmlrefs as a workaround for now
As long as it is not supported in the main one you could use a fork which enables it. See this. The fork adds some new flows. Logic for adding custom flows is a bit broken if you ask me. Especially the block replacement part which added "undefined" to my html before I went into the sourcecode to "fix" it.
@Rauno56 Any plan to request a pull from your repo? It seems promising and would be great to have it included in official repo.
I would be more than happy to contribute that to the module. I implemented it in somewhat "hacky" way so I didn't want to litter the official code. Besides that, the flow logic seemed broken or WIP at the time and it felt that I was only one who needed these flows or thought it would be reasonable. I'm away for some weeks but after that would gladly look into how the module have changed and how the same logic would fit into the picture now.
My fork does that, like I think I stated before, @highvoltag3. Look for commits for more detailed description. On Jul 17, 2014 7:50 PM, "Dario J Novoa V." [email protected] wrote:
@marplesoft https://github.com/marplesoft did you ever find a work around for this?
— Reply to this email directly or view it on GitHub https://github.com/yeoman/grunt-usemin/issues/171#issuecomment-49340549.
@Rauno56 I was looking at libs2min. It seems very useful, however are there any options to have it use the .min.js version if it exists, and if not minify it itself? I'm using bower and some libs have a .min.js and others don't. Ideally, I don't want to have to manage it myself; basically want usemin to automatically use the lib's minified version if it exists and if not minify it.
From what I understand from the lib2min target, it will use the minified version if it exists, but the docs say nothing about minifying it if it doesn't.
Can you confirm please?
