![2. DECIDE WHERE TO
CREATE PROJECT
Project Root
Wordpress / public_html
wp_content
wp_config.php
[…etc]
package.json](https://image.slidesharecdn.com/gruntjs-140417002324-phpapp02/85/Grunt-js-and-WordPress-10-320.jpg)
![3. CREATE NODE PROJECT
cd [your project root]
npm init
npm install grunt --save-dev
• Change directory;
• Node Package Manager;
Initialise a new project
• Node Package Manager;
Install grunt to our project; and
Add it to our list of project dependencies](https://image.slidesharecdn.com/gruntjs-140417002324-phpapp02/85/Grunt-js-and-WordPress-11-320.jpg)
![5.WRITE OUR GRUNTFILE
Project Root
wordpress
wp_content
wp_config.php
[…etc]
Gruntfile.js
node_modules
package.json](https://image.slidesharecdn.com/gruntjs-140417002324-phpapp02/85/Grunt-js-and-WordPress-15-320.jpg)
Grunt js and WordPress
- 1. wherethetruck.at @JackBarker GETTING STARTED WITH #WPMelb
- 2. WHAT IS GRUNT ??? • “The JavaScript task runner” • gruntjs.com • Cross-platform • Runs on Node.js • nodejs.org
- 4. SO… WHAT EXACTLY ARE YOU AUTOMATING?
- 8. 1. INSTALL GRUNT CLI sudo npm install -g grunt-cli Node Package Manager Global Grunt: Command Line Interface Install Super User: Do
- 9. If it doesn’t say “Error”, then it worked!
- 10. 2. DECIDE WHERE TO CREATE PROJECT Project Root Wordpress / public_html wp_content wp_config.php […etc] package.json
- 11. 3. CREATE NODE PROJECT cd [your project root] npm init npm install grunt --save-dev • Change directory; • Node Package Manager; Initialise a new project • Node Package Manager; Install grunt to our project; and Add it to our list of project dependencies
- 12. WHAT DIDTHAT DO?
- 13. 4. GRUNT PLUGINS • Javascript minification: grunt-contrib-uglify • File concatenation: grunt-contrib-concat • Unit Testing: grunt-contrib-qunit npm install grunt-contrib-uglify --save-dev • JS hint: grunt-contrib-jshint • Watch: grunt-contrib-watch • GitHub • Wordpress Deployment grunt-wordpress-deploy https://www.npmjs.org/package/grunt-wordpress-deploy
- 15. 5.WRITE OUR GRUNTFILE Project Root wordpress wp_content wp_config.php […etc] Gruntfile.js node_modules package.json
- 19. RESULT
- 20. WORKED EXAMPLE (IMAGEMIN) npm install grunt-contrib-imagemin --save-dev
- 23. MORE INFORMATION • Grunt.js http://gruntjs.com/getting-started • Chris Coyier: http://24ways.org/2013/grunt-is-not-weird-and-hard/ • Smashing Magazine: http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/ • Github