I’ve been using Roots for a while without Grunt–manually making changes to app.css and the .less files (compiling via CodeKit). But with the new build, it looks like I need to use Grunt and I’m stuck trying to get it installed.
I’m on a mac and installed node.js
Then in terminal typed:
sudo npm install -g grunt-cli
It ran a bunch of stuff and seemed to install fine. No errors.
The next instruction in Roots 101 is to “install the dependencies for Roots contained in package.json:”
What am I missing here? And once installed, how do I invoke Grunt? Always from within terminal? I’m totally baffled. A down and dirty screencast of this might be helpful…
Looks like you’re not running npm install from the theme root directory. After that’s done, you’ll run grunt watch from terminal (from your theme root directory) to have it watch changes and run the tasks.
Making a note now to update the site to mention the theme directory - sorry about that!
Screencast is coming!
edit: by ‘theme root’ I mean your roots directory (e.g. wp-content/themes/roots/)
Grunt has some tips on installing for Windows in their FAQ http://gruntjs.com/frequently-asked-questions
It involves installing Git for Windows then node.js (which includes npm)
Worked for me
I’ve been aswell trying to configure grunt. I did install this dependencies:
grunt-contrib-jshint, grunt-contrib-uglify, grunt-contrib-clean, grunt-contrib-watch and grunt-recess.
When I run grunt on my terminal I got the following errors:
>> Tasks directory "tasks" not found.
Warning: Task "version" not found. Use --force to continue.
Do I need to create a folder tasks ?? and is any dependency that manages version ??
not sure if you have found a solution yet but i had the same problem and managed to finally work it out. you have to get your terminal to run from the folder where the gruntfile.js are package.json are located.
type in:
cd
then either copy your roots folder path or just drag the folder into the terminal. after you run it your terminal name should change to your folder name.
then after that you run:
npm install
then:
grunt watch
anyway. this solution worked for me on my mac. maybe the cd command will be different on windows. not too sure.
Grunt is looking for a tasks directory in the same location as your project. You are most likely missing this directory there is a roots file in there called version.js that does various things with the enqueue of scripts…
I am thoroughly confused. Also, I am quite out of my element. I am new to node.js, grunt, git and not very great at command line. I want to learn and start using LESS in tandem with Roots. Typically I download a theme and install and then I am off and running. I am good with WP structure, templates, html, CSS, etc. I am a front end man. However I really want to learn these other elements as well.
That being said I am confused on where all this is happening. I am developing on a live server that is hosted by Host Monster. Do I need to install node, grunt, etc. on there via the command line. I have shell access and have found a few tutorials on the matter but find myself stuck. Am I over complicating and should I be doing this all locally. Any direction, documentation or better yet tutorials that could walk me through A-Z to get Roots up and running would be appreciated. I really have enjoyed Roots and look forward to the enhancements of this version once I get past these hurdles. Thanks for the time.
I’m finishing up a screencast that will address all of these things and hope to have it up soon.
You don’t want to install node/grunt on your server - you need to setup a local development environment to work off of, and install node and grunt locally.
Looking forward to the screencast! Thanks for putting in that time. So quickly to clarify. If I am developing on a live site and server I don’t have to go through this process and things will work so that I can use LESS on the fly. My goal is really to be able to learn and start utilizing LESS as I have not been tapping into the full power of Roots, Bootstrap and LESS. This is what compiles that code, correct? Something in my process may be broken and I am just trying to figure out what that is. Developing on a live site may where I am going wrong and to be honest it is more due to lack of knowledge to get that piece right.
Anyways I wanted to say thanks Ben for all your work as well as the contributors to the project. I have enjoyed using Roots immensely over the past year and we exclusively use it as a starting point for all our clients themes. Even not being a hard core programmer I am able to grasp and utilize it’s many features to really help me produce better custom themes.
If you are developing on a live server you need to not be doing that! Stop right now and get a local development environment setup along with some sort of version control (we recommend git)
Ben, I am on Mac. I have been wanting to learn GIT for a while now and I will try and dive in based on your recommendation. Always have had a bit of a hard time with versioning when it comes to WP but I am positive that is more on my end than anyone else’s fault. Any recommendations in terms or documentation, tutorials, etc. that could help me get up to speed. Kind of dreading it but know that there is high value there. Thanks for pushing me that direction and giving me a bit of a slap on the wrist! Looking forward to working through the screen cast.
The easiest way to setup a dev environment locally on your mac is to use mamp. This will setup php, mysql and all the stuff you need to get a dev server up and running with a local wordpress install. Smashing has a good article on this.
I’m actually developing on both so I have mamp on my mac & xampp on my pc. You will want to tweak a few security settings if you use any of these packages. There is a slight learning curve. After you get this up and running it’s just a matter of setting up a new directory under htdocs/test - and then setting up your grunt and roots install from that directory. Then you can go into wordpress and apply the theme. Then develop super fast:)