Automating WordPress Plugin Development with Gulp

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

Transcript

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