Intro Slides for WordPress Dev Meetup in Davie, FL

1. GETTING STARTED WITH
GRUNT FOR WORDPRESS
DEVELOPMENT
David “DANGER” Bisset
WORDPRESS MEETUP - OCTOBER 2014

2. What Is A Task Runner?
A task runner (or build system) is a
script that executes a list of actions,
typically using one or more plugins.

3. WHAT CAN YOU DO?
PREPROCESSING
• SASS
• LESS
• COFFEESCRIPT

4. WHAT CAN YOU DO?
MINIFY
• CSS
• JAVASCRIPT

5. WHAT CAN YOU DO?
MINIFY

6. WHAT CAN YOU DO?
LINT FILES
• JSHINT
• JSLINT

7. WHAT CAN YOU DO?
LIVE RELOAD CHANGES
REFRESH BROWSER EACH TIME
YOU MAKE A CHANGE TO A FILE

8. WHAT CAN YOU DO?
Other THINGS:
• START A WEB SERVER
• OPTIMIZE IMAGES
• OUTPUT TO HTML
• ALMOST ANYTHING!

9. Popular Task Runners
• GRUNT.JS
• GULP.JS
• CAKE
• BRUNCH
• BROCCOLI

10. LET’S TAKE
A LOOK
GRUNT.JS

11. Why Go With Grunt.JS?
• Grunt.js is built on Node.js
• It’s the most popular task runner
• The community is large (and helpful)
• Thousands of available plugins
• Building custom plugins is really easy

12. GRUNT
REQUIRES:
NODE.JS

13. What Is Node.JS?
NODE.JS IS JAVASCRIPT THAT RUNS ON A SERVER
OR A TERMINAL

14. How Do You Install
Node.JS?
HTTP://NODEJS.ORG

15. NODE.JS
COMES WITH:
NPM (NODE PACKAGE MANAGER)

16. Installing Grunt CLI
(Command Line Interface)
npm install -g grunt-cli
http://gruntjs.com/getting-started

17. PREPARING A
NEW GRUNT PROJECT
package.json

18. PREPARING A
NEW GRUNT PROJECT
Gruntfile.js

19. Installing
grunt modules
Uglify

20. Installing Uglify
npm install grunt-contrib-uglify --save-dev
https://github.com/gruntjs/grunt-contrib-uglify

21. Go Back To Gruntfile.js
grunt

22. Go Back To Gruntfile.js
grunt uglify

23. Installing
grunt modules
Watch

24. Installing Uglify
npm install grunt-contrib-watch --save-dev
https://www.npmjs.org/package/grunt-contrib-watch

25. Go Back To Gruntfile.js

26. How File Matching Works
// Matches a single file
files: 'foo.js'
!
// Matches an array of files
files: [ 'foo.js', 'bar.js' ]
!
// Matches all files in the dir
files: '*'
!
// Matches all files with a given extension in the dir
files: '*.js'
!
// Matches all files with a given extension in all dirs
files: '**/*.js'
!
// Matches all files w/extension in this dir and one dir deeper
files: '{,*/}*.js'

27. Other Cool Links To Check Out
https://www.npmjs.org/package/grunt-wordpress-deploy
Deploy a Wordpress instance without pain using Grunt.
you can define different environments.
Adapt the Wordpress database to the destination domain.

28. Other Cool Links To Check Out
https://github.com/10up/grunt-wp-plugin
Create a WordPress plugin with grunt-init.
https://github.com/10up/grunt-wp-theme
Create a WordPress THEME with grunt-init.

29. Other Cool Links To Check Out
https://github.com/roots/roots
WordPress starter theme based on HTML5 Boilerplate &
Bootstrap
https://mondaybynoon.com/grunt-wordpress-theme-development/
MORE READING!

30. THANK YOU.
David “SHOULD HAVE HAD A V8” Bisset
davidbisset.com / @dimensionmedia