Installing using bower and grunt

sage
1

Hi guys, aplogies as I am a bit of a beginner to grunt/bower etc, but I am really keen to use them to assist my workflow. I have searched for hours trying to find a solution to my problem!

I am simply trying to install a jquery plugin, the roots way, which as far as I can tell is to use bower.

Here are the steps I have taken so far and my questions with them…

Install node.js and then grunt and bower
Q1. With grunt and bower, do I need to navigate to my roots theme directory first, or does it not matter where I install?

Run 'bower install ’ from command promt.
Q2. Again, should I do this from my roots theme directory?

Now - the plugin is not installed. When I run the install command, everything seems fine - it states the git path and shows no errors.

The plugin does not work (and it is not running, I have checked with firebug).

Q3.So what is supposed to have happened here? I read that files such as package.json, bowercc are involved, but how? Does it plonk the plugin somewhere?

Q4.Am I still suppoed to reference my plugin, I assume not as otherwise surely it is quicker just to drag and drop the file into assets/js.

Q5.Do I still HAVE to reference the script in the gruntfile, or is that just for validation/minification (which obviously I want and will use).

I would really, really appreciate an explanation as to the process, as I am banging my head against the wall here!

Thanks in advance.

2

Install node.js and then grunt and bower
Q1. With grunt and bower, do I need to navigate to my roots theme directory first, or does it not matter where I install?

A1. You need all three installed globally. NPM is the package manager for Node.js modules. NPM installs the dependencies listed in your package.json file. This includes Bower, Grunt, and Grunt modules (by default). You need to run $ npm install inside the directory that contains package.json or NPM will throw an error because it won’t know which modules to install.

Run 'bower install ’ from command promt.
Q2. Again, should I do this from my roots theme directory?

A2. Yes, because much like NPM, Bower is a package manager that relies on bower.json to install Javascript package dependencies. Running $ bower install will only install packages listed in bower.json. If you then want to install additional packages just use the $ bower install <pkg> command. The optional flags --save and --save-dev will save your new package as a dependency into bower.json if you want to keep the dependencies as part of your Git repo (recommended).

Q3. So what is supposed to have happened here? I read that files such as package.json, bowercc are involved, but how? Does it plonk the plugin somewhere?

A3. What’s supposed to have happened is that Bower should’ve installed the dependencies in bower.json. By default, Bower installs new modules into the bower_components/ directory. This behavior can be overridden by .bowerrc file. Roots does currently change the destination directory. More info on .bowerrc here.

Q4.Am I still suppoed to reference my plugin, I assume not as otherwise surely it is quicker just to drag-and-drop the file into assets/js.

A4. In this iteration of Roots, yes, you must add your plugin’s main scripts to jsFileList inside your Gruntfile.js. There are Grunt (and gulp) modules that will automatically lint, contcat, and minify packages’ Javascript without the need for any manual tinkering. Roots with gulp will use one of those modules, but Grunt isn’t part of the future of Roots so the Roots + Grunt + Bower workflow has not been updated to accommodate Bower + Grunt automation (but it’s a relatively trivial step to accomplish if you wanted to, see main-bower-files). Of course you can always drag-and-drop, but command line install is actually faster, keeps everything organized, and makes version updates or rollbacks faster and easier. Installing (and saving) packages via Bower also means that anyone else who might work on your project only has to clone your repo, install NPM modules, and install Bower modules with two simple commands and their theme directory will then match yours. Doing it the drag-and-drop way means a collaborator would need to go out and manually find and download each Javascript plugin, then drag-and-drop it into place and enqueue the assets… all before they even begin any dev work. Of course you could include those packages in your repo, but then you’d need to keep them updated manually and your repo could end up being very large if you use many packages.

Q5. Do I still HAVE to reference the script in the gruntfile, or is that just for validation/minification (which obviously I want and will use).

A5. No, you don’t have to, but if you use Bower to install Javascript plugins and you’re using Roots + Grunt then yes, you do. Grunt doesn’t just lint and minify your Javascript, it also concatenates all of your scripts together into one file—scripts.min.js—to reduce the number of server requests your site needs to make on page loads. This is all part of the Roots mission to modernize WordPress theme development workflow. If you want to drag-and-drop like it’s 1999 then knock yourself out!

1 Like
3

Thanks so much for the thorough answers, I certainly have a better understanding of what is going on now!

Unless I run bower install with ‘–save’ the dependencies in bower.json are not updated, is this normal?

Also A4 and A5 confuse me slightly as A4 suggests I do HAVE to include the script in the grunt file, but A5 says I don’t.

I have now got to the point where dependencies in bower.json show my plugin, and the code even seems to be in the scripts file, but still the plugin does not work at all.

Any suggestions?

Thanks again.

4

You must include the script in your Grunt file if you want Grunt to run its tasks on it. Those tasks are linting, concatenating, and minifying. If those are not important to you then feel free in enqueue the file manually.

If you added the script to your Grunt file and you’re calling the plugin’s functions properly and it’s not working without any console errors then you should consult the plugin’s documentation.

5

Ok i think I see now. So by adding it to my grunt file, I then don’t need to enqueue the script in the head for example.

Couple more things (you’ve been so helpful thank you!)…

Without ‘–save’ on the bower install, the file does not get added to bower.json dependencies in my roots theme directory, does this mean the plugin won’t work?

And finally, is the only place I need to reference the file in the gruntfile in the jsFileList array?

Thanks again!

6

This shouldn’t have any effect on the plugin, what that does is it adds it to the items that get installed you to run bower install, which is helpful if you store the code in a repo and don’t want to store the dependencies.

This should be sufficient for JS, yes. Any code you write using the plugin should go in _main.js such as initialization calls for the plugin.

7

Ok i think I see now. So by adding it to my grunt file, I then don’t need to enqueue the script in the head for example.

Correct.

Without ‘–save’ on the bower install, the file does not get added to bower.json dependencies in my roots theme directory, does this mean the plugin won’t work?

No, the plugin will still work (assuming the install succeeds). By saving it to bower.json (which you really should), you’re ensuring that if your assets/vendor/ dir is ever lost then it can be fully restored with a simple $ bower install and Bower will re-install not only the defaults, but any additional packages you may have added. Otherwise, any modules you install that aren’t saved to bower.json would need to be manually re-installed.

The more likely use case is if someone wants to collaborate on your project then they only need to run $ bower install after cloning your repo. Then their Javascript libraries will match yours exactly without having to hunt down every Javascript package you used. Remember, you’re also adding a reference to a third party file inside Gruntfile.js, so if anyone clones your repo and runs $ bower install and then they run Grunt, they will end up with a file not found error from Grunt if the third party file wasn’t installed.

And finally, is the only place I need to reference the file in the gruntfile in the jsFileList array?

That is the only place you’ll need to reference the file, yes. However, keep in mind you will still need to add any necessary markup and call the plugin’s functions within your _main.js.

8

Guys. Honestly, thank you so much. I think it would have been working had I included the instatiation code in _main.js (will try later), but you have given me a thorough understanding of the whole process!

So helpful (both stack overflow and stack overflow wordpress just blocked my questions!). Thanks a lot!