Getting Started With Grunt for WordPress Development
-
Upload
dimensionmedia -
Category
Technology
-
view
162 -
download
1
Transcript of Getting Started With Grunt for WordPress Development
![Page 1: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/1.jpg)
GETTING STARTED WITH GRUNT FOR WORDPRESS DEVELOPMENTDavid “DANGER” Bisset WORDPRESS MEETUP - OCTOBER 2014
![Page 2: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/2.jpg)
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.
![Page 3: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/3.jpg)
PREPROCESSING
WHAT CAN YOU DO?
• SASS
• LESS
• COFFEESCRIPT
![Page 4: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/4.jpg)
MINIFY
WHAT CAN YOU DO?
• CSS
• JAVASCRIPT
![Page 5: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/5.jpg)
MINIFY
WHAT CAN YOU DO?
![Page 6: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/6.jpg)
WHAT CAN YOU DO?
• JSHINT
• JSLINT
LINT FILES
![Page 7: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/7.jpg)
REFRESH BROWSER EACH TIME YOU MAKE A CHANGE TO A FILE
WHAT CAN YOU DO?
LIVE RELOAD CHANGES
![Page 8: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/8.jpg)
• START A WEB SERVER
• OPTIMIZE IMAGES
• OUTPUT TO HTML
• ALMOST ANYTHING!
WHAT CAN YOU DO?
Other THINGS:
![Page 9: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/9.jpg)
Popular Task Runners
• GRUNT.JS
• GULP.JS
• CAKE
• BRUNCH
• BROCCOLI
![Page 10: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/10.jpg)
GRUNT.JS
LET’S TAKE A LOOK
![Page 11: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/11.jpg)
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
![Page 12: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/12.jpg)
NODE.JS
GRUNT REQUIRES:
![Page 13: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/13.jpg)
What Is Node.JS?
NODE.JS IS JAVASCRIPT THAT RUNS ON A SERVER OR A TERMINAL
![Page 15: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/15.jpg)
NPM (NODE PACKAGE MANAGER)
NODE.JS COMES WITH:
![Page 16: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/16.jpg)
npm install -g grunt-cli
Installing Grunt CLI (Command Line Interface)
http://gruntjs.com/getting-started
![Page 17: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/17.jpg)
package.json
PREPARING A NEW GRUNT PROJECT
![Page 18: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/18.jpg)
Gruntfile.js
PREPARING A NEW GRUNT PROJECT
![Page 19: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/19.jpg)
Uglify
Installing grunt modules
![Page 20: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/20.jpg)
npm install grunt-contrib-uglify --save-dev
Installing Uglify
https://github.com/gruntjs/grunt-contrib-uglify
![Page 21: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/21.jpg)
Go Back To Gruntfile.js
grunt
![Page 22: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/22.jpg)
Go Back To Gruntfile.js
grunt uglify
![Page 23: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/23.jpg)
Watch
Installing grunt modules
![Page 24: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/24.jpg)
npm install grunt-contrib-watch --save-dev
Installing Uglify
https://www.npmjs.org/package/grunt-contrib-watch
![Page 25: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/25.jpg)
Go Back To Gruntfile.js
![Page 26: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/26.jpg)
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'
![Page 27: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/27.jpg)
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.
![Page 28: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/28.jpg)
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
![Page 29: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/29.jpg)
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/
![Page 30: Getting Started With Grunt for WordPress Development](https://reader036.fdocuments.net/reader036/viewer/2022081404/55a1498a1a28ab87608b4676/html5/thumbnails/30.jpg)
THANK YOU.David “SHOULD HAVE HAD A V8” Bisset davidbisset.com / @dimensionmedia