corradomatt/Using Roots 8.0 Process.md

## Using Roots 8.0 Process.md

      
    Raw
  

              Using Roots 8.0 Process.md
            
          
    First time server setup


Prerequisites: Git, Ruby, WP-CLI, Node.JS, NPM, Bower, Sass, Gulp, Grunt (Grunt as a backup)

Set up Wordpress using WP-CLI

mkdir project.com.au
cd project.com.au/
wp core download
mysql -u [mysql-username] -p
# Enter MySQL password
> create database wp_projectname_YYMMDD;
> show databases; # optional - verify database exists
> create user wp_projectname;
> grant all on wp_projectname_YYMMDD.* to 'wp_projectname'@'localhost' identified by '[randompassword]';
> flush privileges;
> exit
cp wp-config-sample.php wp-config.php
# Fill in DB information and add WP_ENV Production line stated below: roots.io/roots-101
echo 'define('WP_ENV', 'development');' >> wp-config.php
Roots Theme Setup

cd wp-content/themes/
git clone https://github.com/roots/roots build-YYMMDD
cd build-YYMMDD
git fetch origin
# Optional - get 8.0.0 beta branch
git branch -a # verify remote 8.0.0 branch exists
git checkout 8.0.0

git checkout -d dev # create a new dev branch to work in
npm install && bower install #fetch project dependencies
Get ready for development


Switch over from LESS to SASS:
Remove original bootstrap from bower.json: bower uninstall --save bootstrap
Install SASS bootstrap: ```bower install bootstrap-sass-official --save````
Switch main LESS file for main SASS: mv assets/styles/main.less assets/styles/main.less.old && cp assets/styles/main.scss.example assets/styles/main.scss
nano assets/manifest.json: Update the assets/manifest.json styles dependencies to change main.less to main.scss
cp assets/styles/editor-style.less assets/styles/editor-style.scss && nano assets/styles/editor-style.scss: Update editor-style.less to remove/comment out the main.less import at the top since that file no longer exists

Intial build & commit

gulp build 
# Check the front end website for any display issues
git add .
git commit -m "First commit"
Set up a new script

bower install [fullpage.js] --save # Script example name: fullpage.js 
gulp build
# Refresh site in browser window and in Chrome Inspector > Sources check to see JS / CSS has loaded.