Skip to content

Latest commit

 

History

History
151 lines (112 loc) · 6.27 KB

README.md

File metadata and controls

151 lines (112 loc) · 6.27 KB
Raw
WPImgOptimizer
Dev Workflow for WordPress image optimization.
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais.

Dev Workflow for WordPress image optimization.

🎗 WP Image Optimizer — Getting Set up

Let's get you setup for an automated dev-workflow for WordPress image optimization.

→ STEP #1: Install NodeJS & NPM

Make sure you have node installed. If not download and install node. 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 i.e. if you don't have NodeJS installed. No need to repeat it ever again.

node -v
# v7.10.0

npm -v
# 4.2.0

→ Step #2. Download package.json & gulpfile.js

Download package.json & gulpfile.js 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 it in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download package.json file in it).

curl -L 'https://git.io/wpimgoptpkg' -o package.json && curl -L 'https://git.io/wpimgoptgfjs' -o gulpfile.js

→ STEP #3: Installing Node Dependencies

We are in the root folder of our WordPress plugin or WordPress theme at the moment, right where you downloaded the package.json & gulpfile.js files — 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 a minute depending on the internet speed of your connection.

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

# For Linux run the following command
npm install

→ STEP #4: Configure gulpfile.js

Since this is an image optimization workflow. You need to configure paths to two directories.

  1. Image source or raw images directory
  2. Image destination or optimized image directory

These two can be configured by editing the gulpfile.js. Do NOT change the variable names, just the values and the types of images you want to optimize.

var imagesSRC         = './assets/img/raw/**/*.{png,PNG,jpg,JPG,jpeg,JPEG,gif,GIF,svg,SVG}'; // Source folder of images which should be optimized.
var imagesDestination = './assets/img/opt/'; // Destination folder of optimized images. Must be different from the imagesSRC folder.

In default case, here's the structure

  • Image source directory — ./assets/img/raw/
  • Image destination directory — ./assets/img/opt/

NOTE: That currently this little app has following file structure

    ├── assets
    |  └── img
    |     ├── opt
    |     |  └── cf7c.png
    |     └── raw
    |        └── cf7c.png
    ├── gulpfile.js
    └── package.json

→ STEP #5: Run Image Optimization Task

All that's left now is for you to run the image optimization task in the root folder of your WP project — where you downloaded the gulpfile.js file.

# Run Image Optimization Task.
gulp imgopt

Run

→ STEP #6: Share!

Yup, there are no more steps. Just share it with your friends. Or Click to Tweet about it.

⚡️ Contribute

Feel free to contribute. PR's are welcomed.

📣 Changelog

Version 1.0.0

  • First version
  • Image optimization for PNG, JPG, JPEG, SVG

🗞 License

Released under GPL v2 License. Copyright Ahmad Awais.

🙌 — If 500 people signup here, I will build a video series for this.

🙌 THEDEVCOUPLE PARTNERS

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



For anything else, tweet at @MrAhmadAwais

I have released a video course to help you become a better developer — Become a VSCode Power User →



VSCode

VSCode Power User Course →