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

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