npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

wp-gulp

v1.0.4

Published

πŸ™Œ β€” If 500 people [signup here](http://eepurl.com/cLwjeH), I will build a video series for WPGulp.

Downloads

17

Readme

πŸ™Œ β€” If 500 people signup here, I will build a video series for WPGulp.


WPGulp β€” WordPress Gulp Workflow

Project Supported by WPGulp GitHub release

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

wpgulp

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

Table of Contents

ⓦ What Can WPGulp Do?

  1. Live reloads browser with BrowserSync
  2. CSS: Sass to CSS conversion, error catching, Autoprefixing, Sourcemaps, CSS minification, and Merging 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

πŸŽ— Getting Started?

β†’ Step #1. Download the Required Files

  • Download gulpfile.js, package.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 all three files in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download these 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 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 gulpfile.js. Project variables can be found in 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 super 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 minutes 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 #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 optimize 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?

  1. Delete old files and download the latest gulpfile.js, package.json, and .gitignore files in the root of your WP project.
  2. Open your WordPress project (plugin/theme) root folder in the terminal and run
# For MAC OS X run the following command with super 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

Check out 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 is a backlog and an incomplete to-do list.

  • [x] Build WPGulp βœ”οΈŽ
  • [x] Write an introductory blog post about WPGulp βœ”οΈŽ
  • [x] 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, opinionated workflows in the form of a separate branch and WPGulp. Just make sure you follow the WordPress Coding Standards.

Changelog

Version 1.0.3

  • FIX: Required gulp-wp-pot
  • FIX: Required gulp-sort
  • IMPROVEMENT: Better docs for Translation variables

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


πŸ™Œ β€” If 500 people signup here, I will build a video series for WPGulp.


πŸ™Œ WPCOUPLE PARTNERS:

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