WPGulp | Advanced Gulp Workflow for WordPress

WPGulp is a portable advanced Gulp workflow for WordPress themes and plugins. More than 1763 developers are using my advanced WordPress Gulp workflow.

⚡️ GITHUB: ★ 1763 ⑂ 302 →

📟 Learn to build CLI DevTools, like WPGulp with me at NodeCLI.com.

WP Gulp · WordPress Gulp [![GitHub](https://img.shields.io/wordpress/v/akismet.svg?colorA=D14543&colorB=21759B&maxAge=2592000&style=flat&label=WordPress)](https://github.com/ahmadawais/WPGulp/) [![emoji-log](https://img.shields.io/badge/🚀%20Emoji-Log-gray.svg?colorA=D14543&colorB=21759B&style=flat)](https://github.com/ahmadawais/Emoji-Log/) [![GitHub stars](https://img.shields.io/github/stars/ahmadawais/WPGulp.svg?style=social&label=Stars)](https://github.com/ahmadawais/WPGulp/stargazers) [![GitHub followers](https://img.shields.io/github/followers/ahmadawais.svg?style=social&label=Follow)](https://github.com/ahmadawais?tab=followers) [![Tweet for help](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social&label=Tweet%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/) [![VSCode.pro](https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20Course%20%E2%86%92-gray.svg?colorA=D14543&colorB=21759B)](https://VSCode.pro "This open source project is supported by VSCode.pro")
WPGulp (WordPress Gulp)
🎯 An advanced & extensively documented Gulp WordPress workflow. Kick-start a build-workflow for your WordPress plugins and themes with Gulp.
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais.


📦 WPGulp Can Do THAT™

WPGulp is an advanced & extensively documented Gulp.js + WordPress workflow. It can help you kick-start a build-workflow for your WordPress plugins and themes with Gulp.js, save you a lot of grunt work time, follow the DRY (Don't Repeat Yourself) principle, and #0CJS Zero-config JavaScript startup but still configurable via wpgulp.config.js file. It is:

  • 🥞 Versioned ✓
  • 🤠 Updatable ✓
  • 🗃 Set of sane-defaults ✓


💻 DEV ENVIRONMENT

  • Live reload browser with BrowserSync
  • Hotloading styles with CSS Injection

🎨 STYLES

  • Sass to CSS conversion
  • Merging media queries
  • Error handling
  • Auto-prefixing
  • Minification
  • Sourcemaps

🌋 JavaScript

  • Concatenation
  • Minification/uglification
  • Separate vendor and custom JS files handling

🌁 IMAGES

  • Minification/optimization of images
  • File types: .png, .jpg, .jpeg, .gif, .svg

💯 TRANSLATION

  • Generates .pot translation file for i18n and l10n

👀 WATCHING

  • For changes in files to recompile
  • File types: .css, .html, .php, .js


Start

Getting Started

⚡️ Quick Overview

Run step #1, #2, and #3 quickly in one go — Run inside local WP install's theme/plugin folder E.g. /wp.local/wp-content/plugins/your-plugin or /wp.local/wp-content/themes/your-theme directory.

# 1— Install WPGulp in your WordPress theme/plugin.
npx wpgulp
# 2— Now configure variables inside the `wpgulp.config.js` file.
# 3— Start your npm build workflow.
npm start

(npx is a package runner tool that comes with npm 5.2+ and higher).

🎛 If you want to study the detailed installation of step #1 , #2, and #3 — then take a look at the steps below.


STEP #0 — Don't have Node.js + npm installed? Read this. (CLICK TO EXPAND!) In case you are an absolute beginner to the world of `Node.js`, JavaScript, and `npm` packages — all you need to do is go to the Node's site [download + install](https://nodejs.org/en/download/) Node on your system. This will install both `Node.js` and `npm`, i.e., node package manager — the command line interface of Node.js. You can verify the install by opening your terminal app and typing... ```sh node -v # Results into v9.11.2 — make sure you have Node >= 8 installed. npm -v # Results into 6.2.0 — make sure you have npm >= 5.3 installed. ```

STEP #1 — Download the Required Files

  1. In the terminal go to the root folder of your WordPress plugin/theme
  2. Run the following command to download all the files in the WPGulp/src folder

It'll take a couple of minutes to install.

npx wpgulp

(npx is a package runner tool that comes with npm 5.2+ and higher).

wpgulp install gif

⚠️ I'm assuming that there are no previously present similar files in the root of your folder. Otherwise, you need to merge these very carefully. E.g. You can include the scripts, devDependencies in your current package.json file and so on for other files. If you run the above command all similar files will be overwritten.

STEP #2 — Editing the Project Variables

Configure the project paths and other variables inside the wpgulp.config.js file. This is a compulsory step.

wpgulp config

STEP #3 — Start your project

Once the installation is done, you can open your project (WordPress plugin/theme) folder and run the start script.

npm start

# To stop press CTRL (⌃) + C

wpgulp start

OPTIONAL STEP #4 — More Scripts/Tasks

To optimize images and generate WP POT translation file, or generate a RTL stylesheet you can run the following commands

# To optimize images.
npm run images

# To generate WP POT translation file.
npm run translate

# To generate RTL stylesheets and Sourcemap.
npm run styles-rtl

# To generate theme/plugin zip file without extranious files.
npm run zip


Update

How to Update?

  1. Download all the latest files in the WPGulp/src folder inside the root folder of your WordPress plugin/theme by running npx install-wpgulp it will overwrite all the wpgulp files.
  2. Open terminal and Install WPGulp's node dependencies by running the npm install commands in the root folder of your WordPress plugin/theme.


Log

Changelog

Read what's 📦 new, 👌 improved, 🐛 fixed, and if 📖 docs got updated.

👉 Go read the entire changelog at this link — WPGulp Changelog →

Nothing's ever complete, so bear with us while we keep iterating towards a better future.

'Coz every night I lie in bed
The brightest colors fill my head
A million dreams are keeping me awake
I think of what the world could be
A vision of the one I see
A million dreams is all it's gonna take
A million dreams for the world we're gonna make ...

... listen to → A million dreams!


Hello

Sponsor

Me (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what I’m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.

Ahmad on Twitter

NodeCLI.com — Learn to build Node.js CLI Automation

This repository is part of the NodeCLI.com course.

After building hundreds of developer automation tools used by millions of developers, I am sharing exactly how you can do it yourself with minimum effective effort. Learn to build Node.js & JavaScript based CLI (Command Line Interface) apps. Automate the grunt work, do more in less time, impress your manager, and help the community. → I'm sharing it all in this online video course. Node CLI Automation without wasting a 1,000 hours

Node CLI Course

Node CLI

Awais on Twitter

🙌 THEDEVCOUPLE PARTNERS

This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →


Update

License & Attribution

MIT © Ahmad Awais.

This project is inspired by the work of many awesome developers especially those who contribute to this project, Gulp.js, Babel, and many other dependencies as listed in the package.json file. FOSS (Free & Open Source Software) for the win.

ahmadawais MaedahBatool akmur marianrick asharirfan JeremyEnglert
ahmadawais MaedahBatool akmur marianrick asharirfan JeremyEnglert
ajitbohra noplanman cdils selrond EugenioPetulla FrankM1
ajitbohra noplanman cdils selrond EugenioPetulla FrankM1
isaacdanielanderson JeffMatson AdnanMuhib mauryaratan richtabor saqibameen
isaacdanielanderson JeffMatson AdnanMuhib mauryaratan richtabor saqibameen
slushman
slushman

Ahmad on Twitter

Ahmad Awais

I am a Full Stack WordPress Developer, WP Core Contributor, Front-end Fanatic , a Designer by night, and an accidental writer. I love to create optimized but advanced workflows to produce professionally built Open Source software.

10 thoughts on “WPGulp | Advanced Gulp Workflow for WordPress

Author gravatar
Author gravatar
Author gravatar
Author gravatar
Author gravatar
Author gravatar
Author gravatar
Author gravatar
Author gravatar
Author gravatar

Leave a thought