WPGulp Theme

A theme to demonstrate simplest implementation of WPGulp Boilerplate.

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

What Can WPGulp Do?

1. Live reloads browser with BrowserSync
2. CSS: Sass to CSS conversion, error catching, Auto Prefixing, Sourcemaps, CSS minification, and Merge Media Queries.
3. JS: Concatenates & uglifies Vendor and Custom JS files.
4. Images: Minifies PNG, JPEG, GIF and SVG images.
5. Watches files for changes in CSS or JS
6. Watches files for changes in PHP.
7. Corrects the line endings.
8. InjectCSS instead of browser page reload.
9. Generates .pot file for i18n and l10n.

Implementations

• Read the following methods to find out more about WPGulp.
• Checkout a basic WordPress theme implementation with WPGulp called WPGulpTheme.

METHOD #1

• Clone this repo and build your WordPress project with it
• Configure the project paths in gulpfile.js (Line #23 t0 #38)
• Open the project folder in the terminal and type sudo npm install wait for the files to get downloaded. It will take about 2 minutes to add a node_modules folder inside your project.
• Once the download is complete type gulp and boom!

METHOD #2

• Download gulpfile.js and pacakage.json files in the root of your WP project
• Configure the project paths in gulpfile.js (Line #23 t0 #38)
• Open the project folder in the terminal and type sudo npm install wait for the files to get downloaded. It will take about 2 minutes to add a node_modules folder inside your project.
• Once the download is complete type gulp and boom!

Prerequisite & Gotchas

• Tested and built on Mac OS Yosemite.
• You must have Git and Node, NPM, Gulp installed globally.
• You should never commit node_modules folder, you should exclude it in .gitignore file.

How to update?

• Delete old ones and download the latest gulpfile.js and package.json files in the root of your WP project.
• Open the project folder in the terminal and type sudo npm install wait for the files to get downloaded. It will take about 2 minutes to add a node_modules folder inside your project.
• Once the download is complete type gulp and boom!

Feature Branches

• Live browser reload with BrowserSync
• Images minification with Imagemin

License

The MIT License (MIT) Copyright (c) 2016 Ahmad Awais