Post on 11-Jul-2015
GETTING STARTED WITH GRUNT FOR WORDPRESS DEVELOPMENTDavid “DANGER” Bisset WORDPRESS MEETUP - OCTOBER 2014
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.
PREPROCESSING
WHAT CAN YOU DO?
• SASS
• LESS
• COFFEESCRIPT
MINIFY
WHAT CAN YOU DO?
• CSS
• JAVASCRIPT
MINIFY
WHAT CAN YOU DO?
WHAT CAN YOU DO?
• JSHINT
• JSLINT
LINT FILES
REFRESH BROWSER EACH TIME YOU MAKE A CHANGE TO A FILE
WHAT CAN YOU DO?
LIVE RELOAD CHANGES
• START A WEB SERVER
• OPTIMIZE IMAGES
• OUTPUT TO HTML
• ALMOST ANYTHING!
WHAT CAN YOU DO?
Other THINGS:
Popular Task Runners
• GRUNT.JS
• GULP.JS
• CAKE
• BRUNCH
• BROCCOLI
GRUNT.JS
LET’S TAKE A LOOK
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
NODE.JS
GRUNT REQUIRES:
What Is Node.JS?
NODE.JS IS JAVASCRIPT THAT RUNS ON A SERVER OR A TERMINAL
NPM (NODE PACKAGE MANAGER)
NODE.JS COMES WITH:
npm install -g grunt-cli
Installing Grunt CLI (Command Line Interface)
http://gruntjs.com/getting-started
package.json
PREPARING A NEW GRUNT PROJECT
Gruntfile.js
PREPARING A NEW GRUNT PROJECT
Uglify
Installing grunt modules
npm install grunt-contrib-uglify --save-dev
Installing Uglify
https://github.com/gruntjs/grunt-contrib-uglify
Go Back To Gruntfile.js
grunt
Go Back To Gruntfile.js
grunt uglify
Watch
Installing grunt modules
npm install grunt-contrib-watch --save-dev
Installing Uglify
https://www.npmjs.org/package/grunt-contrib-watch
Go Back To Gruntfile.js
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'
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.
Other Cool Links To Check Out
https://github.com/10up/grunt-wp-plugin
Create a WordPress plugin with grunt-init.
Create a WordPress THEME with grunt-init.
https://github.com/10up/grunt-wp-theme
Other Cool Links To Check Out
https://github.com/roots/roots
WordPress starter theme based on HTML5 Boilerplate & Bootstrap
MORE READING!
https://mondaybynoon.com/grunt-wordpress-theme-development/
THANK YOU.David “SHOULD HAVE HAD A V8” Bisset davidbisset.com / @dimensionmedia