Ever wanted an easier and less tedious way to install WordPress, Grunt, jQuery and other front-end technologies? Thanks to Bower from Twitter, that is now possible! Bower is an easy to use package manager that will make downloading and installing quick. Let’s install WordPress and Grunt using Bower.
Step 1: Install node.js
The first step is to install node.js. You can download node.js by clicking here.
Click on Install and follow the instructions to install Node on your system. Once the installation has finished, we will have access to NPM, or the Node Package Manager. This will allow us to install Bower and even Grunt (if you wanted to).
Step 2: Install Bower
The next step is to install Bower. Start Terminal and run the following command:
npm install -g bower
If there’s an error, just use ‘sudo’. You may need to enter your password.
sudo npm install -g bower
Run this command to make sure that Bower has been installed correctly:
bower -version
Bower should now be installed. Let’s create a directory and add WordPress and Grunt. Bower is now also available as a command, so let’s get started!
Step 2: Install WordPress and Grunt
Let’s change to the desktop using:
cd desktop
Let’s install WordPress on our desktop:
bower install wordpress
This will create a new folder on the desktop named ‘bower_components’. Let’s move wordpress out of this folder:
mv ~/Desktop/bower_components/wordpress ~/Desktop
Let’s install Grunt. But first, let’s change into a theme directory:
cd wordpress/wp-content/themes/twentyfourteen
Install Grunt by using this command:
bower install grunt
Next, use the following command to move the grunt folder out of bower_compenents:
mv bower_components/grunt ~/Desktop/wordpress/wp-content/themes/twentyfourteen/
Finally, let’s delete the bower_compenents folder:
rm -rf bower_components
That’s all there is to it! You have just installed WordPress and Grunt using Bower! If you would like to learn more about Bower, you can click here. You can find some more commands below:
Uninstall
bower uninstall
Update Packages:
bower update
Lookup a package by name:
bower lookup
If you have any questions, feel free to leave a comment below.
