Hi guys, I purchased the screencast on how to set up theme development with gulp and bower, but for some reason I am having installation issues.
I have installed Git (Git-1.9.5-preview20150319.exe) and node.js seemingly without issue. I ran the following command successfully: npm install -g gulp bower
Then changed to my theme folder (using Xampp): cd /c/xampp/htdocs/wp/wp-content/themes/sage
I then run “npm install” and it just sits there for a while and then does nothing.
I then run “bower install”, and get: sh.exe": bower: command not found
I then run “gulp” and get the following screen:
Any ideas? I am running Windows 8.1, with Xampp as my server.
Edit: just out of curiosity, does it make any difference what i run this in - I am using the Git Bash, but I see that node also includes a command line interface.
Thanks for the reply Ben. I’m not saying there is anything wrong with the screencast, but there is something wrong with my install as I follow the screencast.
I have rerun numerous times npm install -g bower etc, but still nothing.
The link below is a screencast I have done of my entire process - perhaps you might see something amiss (it looks like bower fails to install right from the start). Please note i changed directory into an incorrect “sage” folder initially, hence me going into another “sage” folder afterward.
Sorry for the length of video, but it seems i did it during a busy period of internet activity.
I really want to get this going, but do not have enough knowledge of these scripts to see where it may be falling over.
I’m up late, or early? Maybe I can help. I remember how frustrating it was and still can be when your diving into unchartered territory! When I just first dabbled into development, it was like chinese… but I like chinese lol. And it still happens to me today.
Here is some detail on the steps that should get you started:
Open terminal and $ cd into your WordPress themes directory in terminal. So you should be in the “wp-content/themes” directory of your current Wordpress Development Install. (It’s a pain to type it in, but you can drag and drop the folder right into terminal! I was clueless for way more time than I’d like to admit)
Now, we want to clone the sage repo into your themes directory and specify what your custom theme name will be, too: $ git clone https://github.com/roots/sage.git theme-name <---- change “theme-name” to your choosing and that will create a folder inside of your themes directory with that name.
Now, let’s cd into that new directory: $ cd theme-name so you should now be in your theme folder in terminal which would have the path of something like wp-content/themes/theme-name
Before installing your dependencies, you’ll want to make sure you to definite your WP_ENV in your wp-config.php file if you aren’t using Bedrock (yet!). You’ll just want to add this line to the wp-config.php file of your development Wordpress Installation you are currently working in:
wp-config.php define('WP_ENV', 'development');
Now, you can make other custom configurations for your theme using your lib/config.php and lib/init.php files, but the theme works great out of the box and I wouldn’t worry about that for now. You can always make changes later.
Go back to your terminal, and open a new window which can be done in terminal menu. Leave your other terminal window open that is opened in your theme folder, you’ll be coming right back! But first, we need to install npm and gulp globally in your new default shell terminal which makes future projects easier to configure.
You shouldn’t have typed any commands in your new window yet, if you did and aren’t sure if you are in the right place just type $ cd and you’ll be back in the right location.
Start by making sure your running the latest version of npm, which is always good bye typing $ npm install -g npm@latest and once that has finished install gulp and Bower globally with $ npm install -g gulp bower.
After that has finished you can close out of that terminal window, and return to your other terminal window that is opened in your theme folder.
All that is left to do is install your dependencies by running: $ npm install in your theme folder, which can take a few seconds to complete. Once that’s finished up, let’s run $ bower install to get those front-end packages working.
If that went off without a hitch, you are now ready to run the build process and start diving in. Running $ gulp will compile your assets and $ gulp watch will let compile your assets as they are being made while developing.
Let me know if that works for you. That will hopefully get you started!
I’d be happy to do a quick video if you need, too. But, I’m doing a battery and keyboard replacement today on my Air and an HD and RAM replacement on my iMac! But, I’ll be free tomorrow if I can help further.
Thanks Jessica, but I just cannot get bower installed. Well, it seems to install, as I do not see any errors, but when I type bower -v, all I get is sh.exe: bower: command not found. I checked my path variables and it has my npm folder there so that does not appear to be it.
I had already looked at the posts you linked to, except the one that mentions adding the following line to the paths file: C:\Program Files (x86)\Git\local
All the other posts were only talking about adding the npm path: C:\Users\Jason\AppData\Roaming\npm;
