Basic WP Development Environment

wp-localhost-dev.md

#Basic WP Localhost Dev Env ######(Localhost Development Environment)

• Localhost environment (Bitnami, MAMP, WAMP, XAMPP)
• Local install of WP
• Code Editor (NetBeans IDE, Sublime Text 3)
• Browser with developer tools (Chrome F12)
• Version control (git + GitHub)

Include Sass?

Why? Variables + Mixins

• sass-lang.com/guide
• bourbon.io - A Sass mixin library
• github.com/nDmitry/grunt-autoprefixer - Auto-prefixer for Grunt

Include Grunt?

Why? It listens to a folder and runs events when a file is changed

1. Preprocessed .SCSS file is changed by the developer
2. Run Sass -> Compiled .CSS file
3. Run Autoprefixer -> Final .CSS file (with browser prefixes)

How to Install Grunt and Sass

Mac:

1. Install Node.js if you don't have it (I didn't)
2. Change permissions: sudo chown -R $USER /usr/local
3. sudo = admin
4. chown = change owner
5. -R = recursively
6. $USER = to the current user
7. /usr/local = over this folder (node is here and will put Grunt here)
8. Install Grunt: npm install -g grunt-cli
9. npm = Node package manager
10. install = install
11. -g = globally
12. grunt-cli = Grunt
13. Install Sass: sudo gem install sass
14. gem = Ruby gem

Run Sass and Grunt

1. Navigate to the project folder in Terminal cd Desktop/...
2. Initialize project and set parameters npm init

• name:
• version:
• description:
• entry point: (index.html)
• test command:
• git repository:
• keywords:
• author:
• license:

3. Now you see package.json in the folder (can remove scripts: if you want)
4. npm install grunt-contrib-sass --save-dev - installs 2 new packages

• --save-dev = only install in THIS folder (not globally)
• Package 1 (package.json): grunt:
• Package 2 (package.json): grunt-contrib-sass:

5. npm install grunt-contrib-watch --save-dev

• Package 3 (package.json): grunt-contrib-watch:

6. Be sure the Gruntfile.js (below) is in the folder
7. Type grunt in Terminal to start watching

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'), // Tell Grunt where the package file is
    
    /**
     * Sass
     */
    sass: {       // First task Grunt runs
      dev: {      // First Sass task
        options: {
          style: 'expanded',  // Create 'expanded' (human-readable) stylesheet
          sourcemap: 'none',  // No sourcemap (tells us where all different components come from)
        },
        files: {  // Second Sass task (grab these files and...)
          'css/style.css': 'scss/style.scss'  // Grab style.scss from SCSS folder and compile into 'style.css' in the root folder
        }
      },
      dist: {     // What we're shipping with the Theme (a minimized style.css)
        options: {
          style: 'compressed',  // Create 'compressed' (minimized) stylesheet
          sourcemap: 'none',    // No sourcemap (tells us where all different components come from)
        },
        files: {  // Second Sass task (grab these files and...)
          'css/ style.min.css': 'scss/style.scss'  // Grab style.scss from SCSS folder and compile into 'style.css' in the root folder
        }
      }
    },
    
    /**
     * Autoprefixer
     */
    autoprefixer: {
      options: {
        browsers: ['last 2 versions']
      },
      // prefix all files
      multiple_files: {
        expand: true,
        flatten: true,
        src: 'css/*.css',
        dest: ''    // destination = root folder
      }
    },
    
    /**
     * Watch task
     */
    watch: {    // First Grunt task
      css: {
        files: '**/*.scss', // Watch all files with a .scss suffix
        tasks: ['sass', 'autoprefixer']     // Run the Sass tasks on those items (can be an array of tasks)
      }
    },
    
  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.registerTask('default', ['watch']); // Name here is set to 'default' but can be anything

}

Grunt and Sass Project workflow

1. Open code editor with project
2. Open Terminal and cd to project folder
3. Type grunt to start watching the folder
4. Code
5. In Terminal, type CTRL + C to stop Grunt
6. clear cleans the Terminal window

.gitignore

node_modules
.npm-debug.log
tmp
.sass-cache
*.css.map

Grunt + Sass + WordPress workflow

1. Get a localhost version of WordPress going
2. Populate the install with Theme Test Data
3. Get _s Starter Theme (sass version)
4. Dump theme folder into wp-content/themes
5. Activate Theme
6. Initialize git in the project folder git init (or create a repo on GitHub and clone it before step 4)
7. Create .gitignore file (ignore Node and SCSS files)
8. Use Terminal to navigate to project folder cd ...
9. Create package.json file npm init (entry point: index.php)
10. Install Sass npm install grunt-contrib-sass --save-dev
11. Install Watch npm install grunt-contrib-watch --save-dev
12. Install Autoprefixer npm install grunt-autoprefixer --save-dev
13. Rename original style.css to style-OLD.css (save the original just in case)

• or, use version control (git) and branch away to work, then merge back in when ready
• To make Grunt not compress the WP Theme header comment, add a ! to the first comment in style.scss that defines the theme after the /*

14. Creat Gruntfile.js
15. In sass/layout folder, create _flex.scss (or other code that needs prefixed)

• .site-content { display: flex; }
• .content-area { flex: 2; }
• .site-content .widget-area { flex: 1; }

16. Place flexbox (prefixed) code in style.scss (@import "layout/flex";)
17. Run grunt
18. Modify code