Grunt Wiredep - How To Inject Custom JavaScript

Do you like this?

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


Content:

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": [
        "app/**/*.js"
      ]
    }		
    		
  4. Assume we have a few javascript file under wiredep-testing/app folder
  5. In Gruntfile.js, add the following task.
    grunt.registerTask('test','',function(){
    	console.log('test');
    	require('wiredep')({
    		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