Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Automate your WordPress Workflow with Grunt.js

2.128 visualizaciones

Publicado el

A 20-minute introduction on using grunt.js to optimize your WordPress development workflow

Publicado en: Internet
  • Sé el primero en comentar

Automate your WordPress Workflow with Grunt.js

  1. 1. Grunting WordPress Automate your WordPress development workflow with Grunt.js
  2. 2. Josh Lee Owner & Lead Developer / QC Creative @joshleecreates
  3. 3. Why Grunt? What can it do for me?
  4. 4. All the repetitive chores... ● Compile LESS, SASS, Stylus, CoffeeScript, etc. ● JSHint / JSLint ● Concatenate and minify scripts and styles ● Run with different settings for development and “builds” ● Automatically generate sprite sheets ● Deploy using git, ftp, scp or rsync ● Live reload in the browser ● Compress images
  5. 5. Grunt uses Plugins
  6. 6. “contrib-” = officially maintained ● contrib-watch ● contrib-jshint ● contrib-clean ● contrib-copy ● contrib-uglify ● contrib-imagemin ● contrib-concat ● contrib-less ● contrib-sass ● contrib-compass ● contrib-stylus ● contrib-livereload ● contrib-cssmin ● contrib-htmlmin
  7. 7. Step 1 Install Node.js & NPM: http://nodejs. org/
  8. 8. Step 2 Make a basic package.json
  9. 9. A basic pa
  10. 10. Install the Grunt-CLI globally
  11. 11. Install grunt in your project folder
  12. 12. Using “--save-dev” automatically updates package.json
  13. 13. Install some plugins… (with --save-dev)
  14. 14. All NPM packages (Grunt and it’s plugins) get installed in `node_modules/` Add this directory to .gitignore to prevent repo bloat New developers can install all dependencies with `npm install` in the project dir
  15. 15. fancy trick to autoload all grunt plugins Gruntfile.js — the secret sauce (example from http://mattbanks.me/grunt-wordpress-development-deployments/)
  16. 16. from http://justinklemm.com/grunt-bower-wordpress-themes/
  17. 17. WordPress
  18. 18. This is not ideal...
  19. 19. For theme and plugin development, keep grunt stuff in the theme/plugin folder
  20. 20. Supercharge your whole site ● Use one Gruntfile for the entire site ● Combine CSS and JS from multiple plugins and your theme — speeds up your site! Best when: ● you have complete control over site code ● you want to use grunt for deployment
  21. 21. Grunt stuff is in the top-level folder with the other developer files This whole folder can be safely deployed without writing out long lists of ignored files for your deploy system WordPress in a subdirectory
  22. 22. Let’s do it live...
  23. 23. Other Tools ● Bower ● Composer ● Yeoman ● roots.io ● WP Stack
  24. 24. Questions? Josh Lee www.joshuamlee.com josh@qccreative.com @joshleecreates

×