Who can i append a prefix and a suffix to the URL's generated by grunt-wiredep?

Question

I am trying to utilize grunt-wiredep to alter my source-code in a spring-boot project.

Using bower works as expected by pulling down the JS/CSS and the dependencies, and grunt-wiredep will update the sourcecode, but i need to surround the URL with @{URL_GOES_HERE} due to the way i utilize thymeleaf.

Is this possible? Does grunt-wiredep have a prefix/suffix option? (I have not found this so far).

Current output:

<!-- bower-js:start -->
    <script src="bower_components\bootstrap-colorpicker\js\bootstrap-colorpicker.js">
    </script>
<!-- bower-js:end -->

Desired output:

<!-- bower-js:start -->
    <script src="@{\bower_components\bootstrap-colorpicker\js\bootstrap-colorpicker.js}">
    </script>
<!-- bower-js:end -->

Answer 1

grunt-wiredep can utilize any configuration option provided by the original wiredep.

On the above link you can see that the output format can be configured too, the github readme gives an example of appending a random class to the script tag:

fileTypes: {
fileExtension: {
  block: /match the beginning-to-end of a bower block in this type of file/,
  detect: {
    typeOfBowerFile: /match the way this type of file is included/
  },
  replace: {
    typeOfBowerFile: '<format for this {{filePath}} to be injected>',
    anotherTypeOfBowerFile: function (filePath) {
      return '<script class="random-' + Math.random() + '" src="' + filePath + '"></script>';
    }
  }
}, //...

So for example, you can override the default HTML fileExtension config block like this:

html: {
  block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
  detect: {
    js: /<script.*src=['"]([^'"]+)/gi
  },
  replace: {
    js: '<script src="@{\\{{filePath}}}"></script>'
  }
},