Hi. Although I am not new to roots as such, clearly things are a bit different since the last couple of updates and I want to take full advantage of the benefits roots brings.
What I am struggling to understand is the purpose of the gruntfile. My understanding is that anything referenced within the ‘jsFileList’ array will be validated and minified, is this correct? So by adding a file to this array, all that means is that that file will be validated and minified, correct?
Where, then, do you reference a javascript file - for example I am trying to use a jquery plugin - scrollReveal.js. Do I just reference in the head or is there another place to put it? The reason I am so confused is if I view the source, and search for ‘bootstrap’ for example, nothing is being referenced, meaning there must be something else going on.
You are missing a few steps there. This task concats and then 'uglify’s the files found in jsFileList so that it is one minified script, so thats why you don’t see the expected bootstrap.js file. Beyond that, the grunt file is also responsible for LESS compiling, autoprefixing, building modernizr, and can also do LiveReloading with the grunt watch command.
So, in reference to scrollReveal.js, one option is to place it in your assets/js/plugins folder and then it should actually automatically be picked up by the grunt command, concatenating it just before _main.js where you can write the javascript needed to use it.
…and the other, more modern, preferred option—the option Roots intends to leverage in its quest for a modern WordPress development workflow—is to install scrollReveal using Bower. You then still need to add its JS file to jsFileList (unless you’re using the Roots gulp branch).
Thanks for the replies. I am trying to install using bower, but am struggling.
So I launch command promt, enter ‘bower install scrollReveal.js’, I get a cached statement, and then a validate statement - all seems well (it even states the git path).
Yet the plugin does not work. If I reference in the footer (doesn’t work in the head) then it works.
Add the plugin’s main JS file to jsFileList. Always check a Javascript plugin’s bower.json (if one is available) for the main property which will tell you the location of the main scripts.
Installing Javascript pluggins with bower is the way to go, I recently used bower to ad Masonry to a project I’m developing and was very seamless. Also after installing with bower and adding to jsFileList I think you need to run a Grunt Dev command