If the dog is man’s best friend, probably the wild boar (Grunt mascot) is dev’s best friend. Grunt is a JavaScript-based task runner that allows you to automate several repetitive tasks during the development of a WordPress plugin/theme. This talk will present a brief introduction to Grunt and a selection of recommended Grunt plugins for WordPress development.

1. Grunt:
the wild boar
dev’s best
friend

2. Hello!
Software Engineer
Lead Engineer @ Black Studio
Web Developer since 1998
WordPress Lover since 2010
I'm Marco Chiesi
@marcochiesi
www.blackstudio.it

3. DEVELOPERS
ARE LAZY!

4. I choose a lazy person
to do a hard job.
Because a lazy person
will find an easy way
to do it.
- Bill Gates
Founder of Microsoft

5. The three great virtues
of a programmer:
laziness, impatience,
and hubris.
- Larry Wall
Creator of PERL language

6. The solution for
laziness is...
AUTOMATION

7. What is GRUNT?
× Grunt is a task runner
× Written in JavaScript
× Node.js module
× Command line
× Configurable on a
per-project basis
https://gruntjs.com

8. Why use GRUNT?
× Automation of repetitive tasks with
minimum effort
× Open source
× Large community
× Hundreds of plugins available
× Easy to set up and use
× Build your own Grunt plugins

9. Typical Grunt uses
× CSS/JS minification and
concatenation
× SASS/LESS compilation
× Unit testing
× Code linting
× Code/Text processing
× Image optimization
× ....

10. Who uses Grunt?
WP Core ...and many others!

11. Grunt requirements
Software requirements:
× Node.js
× npm (node package manager)
"Human" requirements:
× Basic JavaScript knowledge
× Familiarity with the command line

12. Getting started
1. Download and install Node.js from
https://nodejs.org
2. Ensure npm is up to date:
npm update -g npm
3. Install Grunt CLI globally:
npm install -g grunt-cli

13. Grunt-related files and folders
package.json
⇒ File for module dependencies
Gruntfile.js
⇒ File for tasks definition
node_modules
⇒ Folder hosting node.js modules
Include in
versioning
Exclude from
versioning

14. Working with an existing Grunt project
1. Change to the project's root directory
cd <folder>
2. Install project dependencies:
npm install
3. Run Grunt:
grunt or grunt <task>

15. Preparing a new Grunt project
1. Create project folder: md <folder>
2. Initialize package.json: npm init
3. Create empty Gruntfile.js
4. Install Grunt and Grunt plugins:
npm install grunt --save-dev
npm install <plugin> --save-dev
5. Edit Gruntfile.js
6. Run Grunt: grunt or grunt <task>

16. Sample package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-uglify": "~0.5.0"
}
}

17. Sample Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
...
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Configure tasks
Load npm packages
Register tasks

18. CSS and JavaScript processinG
CSS
× Minification/combination: grunt-contrib-cssmin
× Linting: stylelint + grunt-stylelint
JavaScript
× Minification/combination: grunt-contrib-uglify
× Linting: grunt-contrib-jshint or
eslint + grunt-eslint

19. Watch
The grunt-contrib-watch plugin allows to run
predefined tasks whenever watched file patterns
are added, changed or deleted.
// Run jshint any time a file is added, changed or deleted
grunt.initConfig({
watch: {
files: ['**/*'],
tasks: ['jshint'],
},
});

20. Internationalization
grunt-wp-i18n
× Generate POT files from source code
× Add textdomain where it is missing
grunt-potomo
× Compile .po files into binary .mo files

21. WordPress coding standards
PHP
grunt-phpcs (+ PHP_CodeSniffer + WPCS rules)
CSS
stylelint-config-wordpress
(+ stylelint + grunt-stylelint)
JavaScript
eslint-config-wordpress (+ eslint + grunt-eslint)

22. Some other WP-specific Grunt plugins
grunt-wp-readme-to-markdown
× Convert plugin's readme.txt to Markdown
format (good for GitHub)
grunt-checkwpversion
× Check consistency of version number in
different points of the project
grunt-wp-deploy
× Deploy from Git to wordpress.org SVN repo

23. Thanks!
Credits:
Presentation template by SlidesCarnival
Pictures:
- "Wild Boar" by Dmitry Abramov (Pixabay)
- "Cat Sleeping" by wallpaperspoints (Chainimage)
- "Bill Gates" by DFID - UK (Wikipedia)
- "Larry Wall" by Randal Schwartz (Wikipedia)
Any questions?
@marcochiesi
marco@blackstudio.it
Slides available at:
blackstudio.it/en/talks/