WPGulp

Use Gulp with WordPress. An advanced but portable Gulp workflow for WordPress. Start using Gulp with your WordPress plugins and themes.

Read: Introducing WPGulp: An Easy to Use WordPress Gulp Boilerplate

ⓦ What Can WPGulp Do?

Live reloads browser with BrowserSync
CSS: Sass to CSS conversion, error catching, Autoprefixing, Sourcemaps, CSS minification, and Merging Media Queries
JS: Concatenates & uglifies Vendor and Custom JS files
Images: Minifies PNG, JPEG, GIF and SVG images
Watches files for changes in CSS or JS
Watches files for changes in PHP
Corrects the line endings
InjectCSS instead of browser page reload
Generates .pot file for i18n and l10n

🎗 Getting Started?

→ Step #1. Download the Required Files

Download gulpfile.js, pacakage.json, and .gitignore files inside the root folder of your WordPress plugin or WordPress theme
If you have cURL installed then you can run the following command to download both files in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download these two files in the root):

curl -O https://raw.githubusercontent.com/ahmadawais/WPGulp/master/package.json && curl -O https://raw.githubusercontent.com/ahmadawais/WPGulp/master/gulpfile.js && curl -O curl -O https://raw.githubusercontent.com/ahmadawais/WPGulp/master/.gitignore

→ STEP #2: Editing the Project Variables

Configure the project variables E.g. paths, translation data, etc in the gulpfile.js. Project variables can be found between the following two comments

// START Editing Project Variables.
{PROJECT VARIABLES}
// STOP Editing Project Variables.

→ STEP #3: Installing NodeJS, NPM and Gulp

You need to have NodeJS & NPM installed. If it is installed, skip to installing Gulp. Otherwise download NodeJS and install it. After installing NodeJS you can verify the install of both NodeJS and Node Package Manager by typing the following commands. This step needs to be followed only once, if you don't have NodeJS installed. No need to repeat it ever again.

node -v
# Results into v4.2.6

npm -v
# Results into 3.9.0

NodeJS and NPM are installed, now we need to install Gulp globally. To do that, run the following command

# For MAC OS X; run the following command with supper user
sudo npm install --global gulp

# For Linux; run the following command
npm install --global gulp

→ STEP #4: Installing Node Dependencies

We are in the root folder of our WordPress plugin or WordPress theme at the moment, let's install the Node Dependencies. In the terminal run this command and wait for it to download all the NodeJS dependencies. It's a one time process and can take about 5 mins depending upon the internet speed of your connection.

# For MAC OS X run the following command with supper user
sudo npm install

# For Linux run the following command
npm install

→ STEP #5: Just run `Gulp`

Once the NodeJS dependencies are downloaded just run the following command to get up and running with WPGulp

# To start gulp
gulp

# To stop gulp press CTRL (⌃) + C

→ Optional Step #6: Images and Translation

To optiomize images and generate WP POT translation file, you can run the following commands

# To optimize images
gulp images

# To generate WP POT translation file.
gulp translate

How to Update?

Delete old files and download the latest gulpfile.js, pacakage.json, and .gitignore files in the root of your WP project.
Open your WordPress project (plugin/theme) root folder in the terminal and run

# For MAC OS X run the following command with supper user
sudo npm install
# For Linux run the following command
npm install

Wait for the new dependencies to be downloaded. Once the download is complete type gulp and boom!

Project Dependencies

Built with Mac OS X but tested and works well with Linux as well as Windows.
You must have Git and NodeJS, and Gulp installed globally.

WPGulpTheme

Checkout a basic WordPress theme implementation with WPGulp called WPGulpTheme. This theme demonstrates the architecture followed by default within WPGulp, which is most definitely optional.

To do

It's hard to maintain a FOSS free and open source software project on my own. Which is why there's a backlog and an incomplete to-do list.

Build WPGulp ✔︎
Write an introductory blog post about WPGulp ✔︎
Improve documentation with more easy to follow details ✔︎
Find sponsorship to produce free of cost video tutorials for WPGulp ⓦ
Write about the new WPGulp tasks, gulp images to optimize images and gulp translate to generate WP POT translation file.

Contribute

I am looking for WordPress ⓦ developers to contribute. I am open to all kinds of new NodeJS packages and workflows. I can always host custom, opioniated workflows in form of a separate branch and WPGulp. Just make sure you follow the WordPress Coding Standards.

Changelog

###Version 1.0.2

NEW: Documentation update README.md
TASK: Image optimization gulp images
TASK: WP POT Translation file generation gulp translate

###Version 1.0.1

BrowserSync
LineEndings

Version 1.0.0

First version
CSS, JS, PHP and Watch Routines

License

Released under GNU GPLv2.0 or later license. Copyright Ahmad Awais

nippermh/WPGulp