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