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.
Thanks!
*Update
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' => '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'
);
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.
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:
Go to the theme root on a command line and run npm install -g grunt-cli
Remove the newly added node_modules directory
Run npm install (in theme root)
Delete everything out of assets/less/main.less (to remove Bootstrap)
Comment out add_theme_support(‘bootstrap-gallery’); in /lib/config.php
Run grunt from the command line
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.
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.
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.
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.