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

install-wpgulp

v2.3.0

Published

Installs WPGulp in a WordPress Theme/Plugin/App folder.

Downloads

48

Readme

🎯 — If 1,000 developers signup here, I will make a video course for WPGulp.

GitHub emoji-log GitHub stars GitHub followers Tweet for help

📦 WPGulp Can Do THAT™

WPGulp is an advanced & extensively documented Gulp.js + WordPress workflow. It can help you kick start a build-workflow for your WordPress plugins and themes with Gulp.js, save you a lot of grunt work time, follow the DRY (Don't Repeat Yourself) principle, and #0CJS Zero-config JavaScript startup but still configurable via wpgulp.config.js file. It is:

  • 🥞 Versioned ✓
  • 🤠 Updatable ✓
  • 🗃 Set of sane-defaults ✓

💻 DEV ENVIRONMENT

  • Live reload browser with BrowserSync
  • Hotloading styles with CSS Injection

🎨 STYLES

  • Sass to CSS conversion
  • Merging media queries
  • Error handling
  • Auto-prefixing
  • Minification
  • Sourcemaps

🌋 JavaScript

  • Concatenation,
  • Minification/uglification,
  • Separate vendor and custom JS files handling

🌁 IMAGES

  • Minification/optimization of images
  • File types: .png, .jpg, .jpeg, .gif, .svg

💯 TRANSLATION

  • Generates .pot translation file for i18n and l10n

👀 WATCHING

  • For changes in files to recompile
  • File types: .css, .html, .php, .js

Start

Getting Started

⚡️ Quick Overview

Run step #1, #2, and #3 quickly in one go — Run inside local WP install's theme/plugin folder E.g. /wp.local/wp-content/plugins/your-plugin or /wp.local/wp-content/themes/your-theme directory.

# 1— Install WPGulp in your WordPress theme/plugin.
npx install-wpgulp
# 2— Now configure variables inside the `wpgulp.config.js` file.
# 3— Start your npm build workflow.
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

🎛 If you want to study the detailed installation of step #1 , #2, and #3 — then take a look at the steps below.

In case you are an absolute beginner to the world of Node.js, JavaScript, and npm packages — all you need to do is go to the Node's site download + install Node on your system. This will install both Node.js and npm, i.e., node package manager — the command line interface of Node.js.

You can verify the install by opening your terminal app and typing...

node -v
# Results into v9.1.0 — make sure you have Node >= 8 installed.

npm -v
# Results into 5.6.0 — make sure you have npm >= 5.3 installed.

STEP #1 — Download the Required Files

  1. In the terminal go to the root folder of your WordPress plugin/theme
  2. Run the following command to download all the files in the WPGulp/src folder

It'll take a couple of minutes to install.

npx install-wpgulp

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

wpgulp install gif

⚠️ I'm assuming that there are no previously present similar files in the root of your folder. Otherwise, you need to merge these very carefully. E.g. You can include the scripts, devDependencies in your current pacakge.json file and so on for other files. If you run the above command all similar files will be overwritten.

STEP #2 — Editing the Project Variables

Configure the project paths and other variables inside the wpgulp.config.js file. This is a compulsory step.

wpgulp config

STEP #3 — Start your project

Once the installation is done, you can open your project (WordPress plugin/theme) folder and run the start script.

npm start

# To stop press CTRL (⌃) + C

wpgulp start

OPTIONAL STEP #4 — More Scripts/Tasks

To optimize images and generate WP POT translation file, or generate a RTL stylesheet you can run the following commands

# To optimize images
gulp images

# To generate WP POT translation file.
gulp translate

# To generate RTL stylesheets and Sourcemap.
gulp stylesRTL

Update

How to Update?

  1. Download all the latest files in the WPGulp/src folder inside the root folder of your WordPress plugin/theme by running npx install-wpgulp it will overwrite all the wpgulp files.
  2. Open terminal and Install WPGulp's node dependencies by running the npm install commands in the root folder of your WordPress plugin/theme.

Log

Changelog

Read what's 📦 new, 👌 improved, 🐛 fixed, and if 📖 docs got updated.

👉 Go read the entire changelog at this link — WPGulp Changelog →

Nothing's ever complete, so bear with us while we keep iterating towards a better future.

'Coz every night I lie in bed
The brightest colors fill my head
A million dreams are keeping me awake
I think of what the world could be
A vision of the one I see
A million dreams is all it's gonna take
A million dreams for the world we're gonna make ...

... listen to → A million dreams!

Hello

Hello, we're the Dev Couple!

I (Ahmad Awais) am a OSS developer advocate, Full Stack Web Developer and a regular core contributor at WordPress. My significant other (Maedah Batool) is a Technical Project Manager, and she's also a WordPress Core Contributor. Together with our team, we run the WPCouple.com.

If you'd like to get insights into our love for open source software, professional full stack development, WordPress community, the growth of JavaScript or growing a family, building, and bootstrapping a business, then subscribe to our premium newsletter called ↣ The WordPress Takeaway!

Support our Open Source Projects! 🎩

If you'd like us to keep producing professional free and open source software (FOSS). Consider paying for an hour of my dev-time. We'll spend two hours on open source for each contribution. Yeah, that's right, you pay for one hour and get both of us to spend an hour as a thank you.

Hello

🙌 WPCOUPLE PARTNERS

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

Update

License & Attribution

MIT © Ahmad Awais.

This project is inspired by the work of many awesome developers especially those who contribute to this project, Gulp.js, Babel, and many other dependencies as listed in the package.json file. FOSS (Free & Open Source Software) for the win.

Follow me 👋 on Twitter for more updates and questionsTweet to say Hi

🚀 Installs WPGulp for you. Downloads all the required files and installs node packages. [Node >= 8 and npm >= 5.3].

Read more about the documentation or anything related to WPGulp →