Grunt task to inject scripts during development
Grunt task to inject scripts during development. Great for use with LiveReload via grunt-contrib-watch, web inspector remote via grunt-weinre, and Dev Tools snippets. Check out the sample script below.
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, install this plugin with this command:
npm install grunt-inject --save-dev
Then add this line to your project's
Here is a config to inject a script into a single page, and a second config to inject a script into multiple pages. You can use which ever one suits your needs:
inject:single:scriptSrc: 'build/devscript.js'files:'dist/index.html': 'src/index.html'multiple:scriptSrc: 'build/devscript.js'files:expand: truecwd: 'src'src: '**/*.html'dest: 'dist'
The path of the script to be injected into the page.
Grunt file configuration
<!-- inject -->
// Adds LiveReload script pointing at the client's hostname.// This is helpful for mobile web development where your desktop might point at localhost while// your devices point to a local IP address.document// Adds the client as a weinre(web inspector remote) debugging target at// This is used to debug every mobile browser besides Mobile Safari and Chrome for Androiddocument;
0.1.0 - Multiple script injectons can now be configured in a single task now that the Grunt file configuration is used.
htmlDestare no longer supported and must be replaced by the Grunt file configuration.
<!--inject-->comment now has spaces inside and looks like this:
<!-- inject -->.
0.0.0 - Initial release.