![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'](https://image.slidesharecdn.com/gettingstartedwithgruntforwordpressdevelopmentcopy-141016193915-conversion-gate01/85/Getting-Started-With-Grunt-for-WordPress-Development-26-320.jpg)
Getting Started With Grunt for WordPress Development
- 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
- 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