Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Automating WordPress Plugin Development with Gulp

1,174 views

Published on

Gulp.js is a task runner to automate the build process. In this talk, you’ll learn how to use Gulp to automate plugin development by compiling SASS, minifying JavaScript files, and creating translation files to build a starter WordPress plugin. WordCamp St. Louis 2016 #wcstl

Published in: Software
  • Be the first to comment

Automating WordPress Plugin Development with Gulp

  1. 1. Automating WordPress Plugin Development with Gulp @MikeHale #wcstl
  2. 2. About Mike Mike Hale Developer Rainmaker Digital @MikeHale www.mikehale.me
  3. 3. What You’ll Learn What Gulp Is Gulp Vs. Grunt Tasks Gulp Plugins Starter Plugin
  4. 4. Modern Designer’s Workflow
  5. 5. Modern Developer’s Workflow
  6. 6. From Idea to Release
  7. 7. Creating a Plugin
  8. 8. Gulp.js to the Rescue!
  9. 9. What is Gulp? Gulp is a Javascript task runner that lets you automate common or repetitive tasks
  10. 10. Gulp vs. Grunt
  11. 11. Streams (In Memory) Temp Files (I/O)
  12. 12. Code Style Config Style
  13. 13. 2,379 Plugins 5,691 Plugins
  14. 14. Faster?
  15. 15. “Gulp vs Grunt doesn’t matter as long as whichever Tool you choose makes you more productive" @MikeHale
  16. 16. Installing Gulp Install Node.js Install Gulp.js npm install --save-dev gulp
  17. 17. gulpfile.js
  18. 18. gulpfile.js
  19. 19. gulp.task
  20. 20. gulp.task( name, function() { // src // pipe // dest });
  21. 21. gulp.src
  22. 22. gulp.src( ‘*.php’ )
  23. 23. gulp.pipe
  24. 24. gulp.pipe( dothis() ) .pipe( dothat()
  25. 25. gulp.dest
  26. 26. gulp.dest( ‘/folder’ )
  27. 27. gulp.watch
  28. 28. gulp.watch( ‘*.php’, ‘task’ )
  29. 29. My Starter Plugin
  30. 30. WordPress-Plugin- Boilerplate http://wppb.io + File Structure + Standards Based - No Auto Translations - Manually rename files - No js/css Automation
  31. 31. generator-plugin-wp + Yoeman Generator + Sub-generators + Powerful - Complex - Requires Yoeman
  32. 32. config.json (Settings)
  33. 33. gulp-token-replace
  34. 34. Tokens
  35. 35. Tokens
  36. 36. gulp-sass
  37. 37. gulp.concat, gulp.uglify
  38. 38. gulp-wp-pot
  39. 39. Output
  40. 40. Default Task
  41. 41. _PLUGIN Files _PLUGIN.php classes/class._PLUGIN.php includes/_PLUGIN-shortcodes.php widgets/_PLUGIN-widget.php
  42. 42. Starter Plugin Features Widget Shortcodes Functions Classes Autoloader Output/Dev Folders Activate/Deactivate/Uninstall Readme.md
  43. 43. Other Options gulp-watch gulp-exec (WP-CLI, PHPCS*) gulp-imagemin (Optimize Images ) gulp-livereload (Live Reload) gulp-zip (Compress Plugin)
  44. 44. http://github.com/mikejhale/starter-plugin @MikeHale #wcstl
  45. 45. About Mike Mike Hale Developer Rainmaker Digital @MikeHale www.mikehale.me

×