Automating WordPress Plugin Development with
Gulp
@MikeHale #wcstl
About MikeMike HaleDeveloperRainmaker Digital
@MikeHalewww.mikehale.me
What You’ll Learn
What Gulp IsGulp Vs. GruntTasksGulp PluginsStarter Plugin
Modern Designer’s Workflow
Modern Developer’s
Workflow
From Idea to Release
Creating a Plugin
Gulp.js to the Rescue!
What is Gulp?
Gulp is a Javascript task runner that lets you
automate common or repetitive tasks
Gulp vs. Grunt
Streams(In Memory)
Temp Files(I/O)
Code Style Config Style
2,379 Plugins
5,691Plugins
Faster?
“Gulp vs Grunt doesn’t matter as long as whichever
Tool you choose makes you more productive"
@MikeHale
Installing Gulp
Install Node.js
Install Gulp.js
npm install --save-dev gulp
gulpfile.js
gulpfile.js
gulp.task
gulp.task( name, function() {// src// pipe// dest
});
gulp.src
gulp.src( ‘*.php’ )
gulp.pipe
gulp.pipe( dothis() ) .pipe( dothat() );
gulp.dest
gulp.dest( ‘/folder’ )
gulp.watch
gulp.watch( ‘*.php’, ‘task’
)
My Starter Plugin
WordPress-Plugin-Boilerplate
http://wppb.io
+ File Structure+ Standards Based
- No Auto Translations- Manually rename files- No js/css Automation
generator-plugin-wp
+ Yoeman Generator+ Sub-generators+ Powerful
- Complex- Requires Yoeman
config.json (Settings)
gulp-token-replace
Tokens
Tokens
gulp-sass
gulp.concat, gulp.uglify
gulp-wp-pot
Output
Default Task
_PLUGIN Files_PLUGIN.phpclasses/class._PLUGIN.phpincludes/_PLUGIN-shortcodes.phpwidgets/_PLUGIN-widget.php
Starter Plugin FeaturesWidgetShortcodesFunctionsClasses AutoloaderOutput/Dev FoldersActivate/Deactivate/UninstallReadme.md
Other Optionsgulp-watchgulp-exec (WP-CLI, PHPCS*)gulp-imagemin (Optimize Images )gulp-livereload (Live Reload)gulp-zip (Compress Plugin)
http://github.com/mikejhale/starter-plugin
@MikeHale #wcstl
About MikeMike HaleDeveloperRainmaker Digital
@MikeHalewww.mikehale.me