[![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%[email protected])](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 is an advanced & extensively documented
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
wpgulp.config.js file. It is:
💻 DEV ENVIRONMENT
- Live reload browser with BrowserSync
- Hotloading styles with CSS Injection
- Sass to CSS conversion
- Merging media queries
- Error handling
- Separate vendor and custom JS files handling
- Minification/optimization of images
- File types:
.pottranslation file for i18n and l10n
- For changes in files to recompile
- File types:
#3 quickly in one go — Run inside local WP install's theme/plugin folder E.g.
# 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
🎛 If you want to study the detailed installation of step
#3— then take a look at the steps below.
STEP #0— Don't have
npminstalled? Read this. (CLICK TO EXPAND!)
STEP #1— Download the Required Files
It'll take a couple of minutes to install.
⚠️ 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
devDependenciesin your current
pacakge.jsonfile 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.
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
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. gulp images # To generate WP POT translation file. gulp translate # To generate RTL stylesheets and Sourcemap. gulp stylesRTL
npx install-wpgulpit will overwrite all the wpgulp files.
npm installcommands in the root folder of your WordPress plugin/theme.
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!
I (Ahmad Awais) am a OSS developer advocate, Full Stack Web Developer and a regular core contributor at WordPress. My significant other (Maedah Batool) is a Technical Project Manager, and she's also a WordPress Core Contributor. Together with our team, we run the TheDevCouple.com.
If you'd like us to keep producing professional free and open source software (FOSS). Consider paying for an hour of my dev-time. We'll spend two hours on open source for each contribution. Yeah, that's right, you pay for one hour and get both of us to spend an hour as a thank you.
This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →
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.
For anything else, tweet at @MrAhmadAwais