Download to read offline
![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/75/Getting-Started-With-Grunt-for-WordPress-Development-26-2048.jpg)
More Related Content
Similar to Getting Started With Grunt for WordPress Development
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 ATask 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 YOUDO? PREPROCESSING • SASS • LESS • COFFEESCRIPT
- 4. WHAT CAN YOUDO? MINIFY • CSS • JAVASCRIPT
- 5. WHAT CAN YOUDO? MINIFY
- 6. WHAT CAN YOUDO? LINT FILES • JSHINT • JSLINT
- 7. WHAT CAN YOUDO? LIVE RELOAD CHANGES REFRESH BROWSER EACH TIME YOU MAKE A CHANGE TO A FILE
- 8. WHAT CAN YOUDO? 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 ALOOK GRUNT.JS
- 11. Why Go WithGrunt.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.
- 13. What Is Node.JS? NODE.JS IS JAVASCRIPT THAT RUNS ON A SERVER OR A TERMINAL
- 14. How Do YouInstall 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 NEWGRUNT PROJECT package.json
- 18. PREPARING A NEWGRUNT PROJECT Gruntfile.js
- 19. Installing grunt modules Uglify
- 20. Installing Uglify npminstall grunt-contrib-uglify --save-dev https://github.com/gruntjs/grunt-contrib-uglify
- 21. Go Back ToGruntfile.js grunt
- 22. Go Back ToGruntfile.js grunt uglify
- 23. Installing grunt modules Watch
- 24. Installing Uglify npminstall grunt-contrib-watch --save-dev https://www.npmjs.org/package/grunt-contrib-watch
- 25. Go Back ToGruntfile.js
- 26. How File MatchingWorks // 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 LinksTo 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 LinksTo 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 LinksTo 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