WPGulp Theme

A theme to demonstrate simplest implementation of WPGulp Boilerplate.

A theme to demonstrate simplest implementation of WPGulp Boilerplate.

WPGulpTheme

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

License

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

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.

Leave a thought

Your email address will not be published.

*
*