Grunt fails on initial run after npm install

I just installed WordPress 3.9.1 clean and activated the Roots 7 theme.

Ran the npm install from the theme folder, and then typed “grunt.”

It gives me the following error:

Execution Time (2014-07-10 15:23:03 UTC)
loading tasks   4ms  ▇▇ 3%
jshint:all     74ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 54%
less:dev       57ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 42%
Total 136ms

root@galaxy-one:/srv/www/ grunt
Running "jshint:all" (jshint) task
>> 2 files lint free.

Running "less:dev" (less) task
>> FileError: '../vendor/bootstrap/less/variables.less' wasn't found in assets/less/_bootstrap.less on line 8, column 1:
>> 7 // Variables
>> 8 @import "../vendor/bootstrap/less/variables";
>> 9 @import "_variables"; // Bootstrap variable overrides and custom variables
Warning: Error compiling assets/less/main.less Use --force to continue.

Aborted due to warnings.

If I go to less/main.less and remove everything from that file, Grunt runs okay.

Also, the custom.php file is gone from the lib folder. That’s what I used to do things like add app.css back. I’m kind of lost on the new Roots.

Basically, I’m just trying to remove Bootstrap and use normal CSS styling in a stylesheet like before in 6.*

It’s returning a file not found error. Have you checked to see whether the file/dir is actually present? Did you follow the (new for 7.0) setup steps?

No, I haven’t followed new 7.0 steps…I’ll try and find those.

Try running bower install from the theme root.

Bower install says: -bash: bower: command not found

CFX / Foxaii - where are the new 7.0 installation steps mentioned above? I can’t find them in docs.

I’ve built about 35 sites with Roots 6.* and very used to that. Just need to know what changed.

I don’t use LESS. Just prefer to have the app.css, and with 6.* I’d enqueue it back using custom.php. Now not sure how to properly remove Bootstrap and add manual app.css styling back.



I just modified the below and replaced main.min.css with app.css. This is in the lib/scripts.php file. Now the site is taking the styling…is this the right way to do it? I’ve also emptied the main.less file of all Boostrap stuff. Now I just run Grunt again?

   * The build task in Grunt renames production assets with a hash
   * Read the asset names from assets-manifest.json
  if (WP_ENV !== 'development') {
    $get_assets = file_get_contents(get_template_directory() . '/assets/manifest.json');
    $assets     = json_decode($get_assets, true);
    $assets     = array(
      'css'       => '/assets/css/app.css' . '?' . $assets['assets/css/main.min.css']['hash'],
      'js'        => '/assets/js/scripts.min.js' . '?' . $assets['assets/js/scripts.min.js']['hash'],
      'modernizr' => '/assets/js/vendor/modernizr.min.js',
      'jquery'    => '//'

Please run npm install -g grunt-cli (in theme root), then remove the node_modules/ directory and perform npm install again (in theme root). Then your grunt task should complete without errors.

The Roots Docs have been updated in a few spots.


You should also undo the changes you made to scripts.php.

1 Like

Thanks cfx. I’ve cleared out the main.less file and did your steps above. Grunt is running fine now.

If I undo my change to script.php, then it doesn’t use my app.css file.

And even though it looks like scripts.php is supposed to go to main.css next, any styling I place in there is ignored.

*** Update ***

I created a main.min.css file in assets, and then that is now working.

So… for anyone who used to remove Bootstrap and use your own CSS, here’s what I’m doing now:

  1. Go to the theme root on a command line and run npm install -g grunt-cli
  2. Remove the newly added node_modules directory
  3. Run npm install (in theme root)
  4. Delete everything out of assets/less/main.less (to remove Bootstrap)
  5. Comment out add_theme_support(‘bootstrap-gallery’); in /lib/config.php
  6. Run grunt from the command line
  7. Create the assets/css/main.min.css file

Once you do those things, Roots should be free of the excess weight of the Bootstrap bloat, and also be ready to accept your own styling in assets/css/main.min.css.

If any of you Roots pros see an error in my steps, I’d sure like to know. Thanks!

You do not need step 7 and you do not need to modify scripts.php at all. If you place your CSS/LESS in assets/less/main.less instead of app.css then everything will compile as needed.

If you have define('WP_ENV', 'development'); in your wp-config.php file then WordPress will not use your minified CSS and JS. So on your live server, without WP_ENV defined, WordPress will use minified assets. See scripts.php line 22. Depending on when/how you downloaded Roots your file might also look like this (they do the same thing, just organized slightly differently).

I downloaded Roots this morning from Github…downloaded the zip file via the link on the right.

I’m not changing anything in scripts.php anymore, but regardless of how many times I run grunt, it will not pick up anything in main.css. I always have to move main.min.css back into assets.

Also, I checked my WPCONFIG.PHP file and it didn’t have the development thing you mentioned.

I don’t mind using main.min.css, but if this is a problem brewing I need to figure it out.

Please elaborate on what you mean by

grunt… will not pick up anything in main.css

You should be adding CSS/LESS to a file named assets/less/main.less using the default configuration.

I apologize for not being clear.

Here’s what I mean: in assets after activating Roots and running Grunt I had a main.css file.

But if I place any styling in that file, the site doesn’t recognize it. So I looked in scripts.php at the original configuration, and saw that it was pointing to main.min.css first, and there was some type of if then statement pointing to main.css afterwards.

So, I just added main.min.css to assets, and boom. That works. It seems to ignore anything in main.css.

You should be adding CSS/LESS to a file named assets/less/main.less and undo any changes you made regarding main.css and scripts.php.

The reason you see a file called assets/css/main.css is because Roots 7.0’s new Gruntfile.js specifies two sets of JS/CSS assets for Grunt to build: one set is minified for use on live sites (e.g., main.min.css and scripts.min.js) and a second set is not minified for development and debugging purposes (e.g., main.css and scripts.js). If you define the WP_ENV variable as described a few posts up then Roots will use the unminified assets, otherwise it will use the minified assets.

So when you added CSS to main.css you were adding styles to a file that Grunt is, by default, set to overwrite during its build process.

Your CSS and LESS styles belong in assets/less/main.less and there is no need to change your scripts.php at all.

Thanks for explaining.

So I moved all of the styling into assets/less/main.less. The site lost all styling.

I then thought maybe I need to run grunt to update.

Grunt is now failing again. I’m dead in the water with Roots 7.

The VPS I’m using has multiple Roots 6.5.1 sites running fine. I’ve never had these problems with Roots before.

It looks like you might be deleting the assets/vendor/bootstrap directory entirely which is unnecessary.

Read through the docs again, especially compiling assets. This most recent go-around looks like you ran Grunt before you installed its packages.

I don’t claim to be an expert myself, and Roots 7.0 does have some new and confusing features, but I followed the directions and managed to get it up and running the first time around without any issues. It’s all in the docs.

I’m going to start over again.

Do I need to reinstall WordPress each time? Is all of this touching the WP database in any way?

No, just kill your theme directory and you should be fine.

Btw, I hope when you said

…I moved all of the styling into assets/less/main.less.

That you’re not moving styles from main.css into that file. There is no need to touch main.css directly at all ever, it’s a file that gets output by Grunt.

Cool thanks man. I’ll go through the steps and report back.

I’m completely lost on it all right now. With 6.5.1 all I had to do was enqueue a stylesheet. Now I don’t know what to do or where.

So…I’m hoping the updated docs answer the question.

Here’s what I did:

  1. Downloaded the Roots zip file from Github
  2. Copied it to my themes directory after renaming it
  3. Installed grunt globally from command line with npm install -g grunt-cli
  4. Activated the new Roots theme
  5. Navigated to the theme folder and did npm install
  6. Ran Grunt.

It fails with this:

Running "jshint:all" (jshint) task
>> 2 files lint free.

Running "less:dev" (less) task
>> FileError: '../vendor/bootstrap/less/variables.less' wasn't found in assets/less/_bootstrap.less on line 8, column 1:
>> 7 // Variables
>> 8 @import "../vendor/bootstrap/less/variables";
>> 9 @import "_variables"; // Bootstrap variable overrides and custom variables
Warning: Error compiling assets/less/main.less Use --force to continue.

Aborted due to warnings.

Can you verify whether there is a file called /vendor/bootstrap/less/variables.less in your theme directory?