Grunt Wiredep - How To Inject Custom JavaScript

Do you like this?

This short tutorial shows you how to inject your custom javascript using Wiredep in a Grunt-based project.


Let's consider a test project named wiredep-testing

  1. cd wiredep-testing
  2. npm install wiredep
  3. create a file named app_bower.json with the following content.
      "name": "wiredep-testing",
      "main": [
  4. Assume we have a few javascript file under wiredep-testing/app folder
  5. In Gruntfile.js, add the following task.
    		src: 'test.html',
    		bowerJson: require('./app_bower.json'),
    		includeSelf: true,
    		fileTypes: {
    			html: {
    			  block: /(([ \t]*)<!--\s*app_bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
  6. Under wiredep-testing folder, create a file called test.html with the following content.
    <!-- app_bower:js -->
    <!-- endbower -->
    <!-- app_bower:css -->
    <!-- endbower -->		
  7. In console prompt, type: grunt test

comments powered by Disqus