Reuse the same target in multiple HTMLs?

[hanfeisun]

For example, I have a usemin target like this in index.html

<!-- build:js(.) scripts/vendor.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/vue/dist/vue.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbuild -->

Now I also need to include exactly the same libraries in listView.html and userProfile.html. And as this is not a Single Page Application. These lines may also need to be included like this:

In listView.html:

<!-- build:js(.) scripts/vendorListView.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/vue/dist/vue.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbuild -->

And in userProfile.html:

<!-- build:js(.) scripts/vendorUserProfile.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/vue/dist/vue.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbuild -->

which looks quite boring and inefficient..

Is there an easier way to do this in grunt-usemin?

[heitoralthmann]

@hanfeisun Have you found an alternative for this?

Thank you!

[heitoralthmann]

Here we go (that worked for me):

As you may know the usemin plugin has 2 tasks: useminPrepare and usemin.

The useminPrepare task is the one responsible for running all the necessary processing on your files (concatenation, minification etc) and generating the "final (js or css, for example) file".

The usemin task just replaces your block with a link to the /path/to/js.js file.

The trick is: Configure your useminPrepare task to process only one single HTML file from this "group of repetition".

This way you'll generate the concatenated/minified file only once, and when the usemin task runs, it will just replace the block content with the file declared on your block.

Here is a piece of my grunt.initConfig object:

...
useminPrepare: {
      html: ['src/index.php'],
      options: {
        dest: './'
      }
    },
    usemin: {
      html: ['index.php', 'index_v2.php'],
      options: {
        blockReplacements: {
          MaxPrestaJSBuild: function(block) {
            return '<script src="js/build.js"></script>';
          }
        }
      }
    }
...

Note that for all of your HTML files (index.html, listView.html and userProfile.html) you would use THE SAME BUILD TAG!

Instead of having:

<!-- build:js(.) scripts/vendor.js -->
and
<!-- build:js(.) scripts/vendorListView.js -->
and
<!-- build:js(.) scripts/vendorUserProfile.js -->

for each respective file, you would have:

<!-- build:js(.) scripts/vendor.js -->

for all of your HTML files, since you want to reuse it.

Does all that make sense? I hope I made myself clear.

Good luck ;)