grunt-usemin: Defining custom flow

Question

I am using grunt-usemin plugin. I wonder how to do below.

I have two blocks of usemin config in index.html.

<!-- build:js /scripts/scriptsmin.js -->
<script src="/scripts/jquery.min.js"></script>
...
...
<!-- endbuild -->

<!-- build:js /scripts/scripts.js -->
<script src="/scripts/app.js"></script>
....
...
<!-- endbuild --> 

First block, scriptsmin.js, is minified files. Second, scripts.js, contains all files which needs minification.

I like to.

1. run minifier (uglifyjs) on second block
2. concat first block with minified version of second (step 1)

Is it possible if these blocks are in the same file. I saw a section on flow. Couldn't follow whether I can name the block of configuration, and set seperate flow on each of it. It talks about flow based on file name (index.html). How should I write the grunt useminPrepare section.

Answer 1

I had the same problem. If you'll be satisfied with two files instead of one you can use a fork of usemin here. It enables few new flows, namely

• libs
• libs2min
• void
• remove

See full descriptions. So your html would be:

<!-- build:libs2min /scripts/scriptsmin.js -->
<script src="/scripts/jquery.js"></script>
...
...
<!-- endbuild -->

<!-- build:js /scripts/scripts.js -->
<script src="/scripts/app.js"></script>
....
...
<!-- endbuild --> 

Nesting the blocks isn't probably a good idea right now unfortunately. But you could try it out.

To install the fork instead of the regular grunt-usemin change your package.json as so

"devDependencies": {
    ...
    "grunt-usemin": "Rauno56/grunt-usemin",
    ...
},

and keep an eye on the main repo - maybe the feature isn't to far from getting there too.