🚀 WPGulp 2.0 Goals + Call for Contributors!

[ahmadawais]

🙌 Hey, folks!

Thanks for entrusting me and my code and using WPGulp is thousands of projects. I am humbled by how one single file project has changed my life and the way I look at #OpenSource now. 600+ stargazers, 100+ forks, ~50 watchers. WOW!

🤔 For quite some time I have been thinking of what would WPGulp 2.0 look like in the world of Webpacks, Parcels, and RollUps. :)

🎯 Glad to announce that I have started working on the next version of WPGulp with the support from the amazing WordPress community (you can see the WPCouple partners list on the readme file).

🔥 WPGulp 2.0 Feature Exploration

I have a lot of ideas about how we'll go about it. And I'll be updating this issue as such. I'd love to get some input on this one from all of you. Here're is a non-exhaustive list of what I think we should build next.

~- [x] [📃 Development Branch for WPGulp v2.0.0]~ It's live…

• [x] 💯 ES6 or ESNext Support —(Progress → #67)
• [x] 👋 Gulp 4.0 Incremental Builds and Caching —(Progress → #63 )
• [x] 🔬 ESLint + (optionally) Prettier Integration with WordPress Standards — (Progress #73)
• [x] ⚒ Better Error handling for all the tasks — (Progress #68)
• [x] 📚 Improved Image Caching — (Progress #70)
• [x] 🛡 Improve Sass Task + Update NPM Modules — (Progress #74)
• [x] ☕️ Separate Config File —(Progress → #65 ) — Separation of concerns: Config file to be edited where gulpfile.js remains independent for easy updates. Yes, I am thinking the new version of WPGulp should be modular and easily updateable.
• [x] 📦 New logo —(Progress → #62)
• [x] ⚡️ Better Documentation — led by @MaedahBatool
• [x] 🗃 Improved architecture — Separate source and build folders.
• [x] 🤔 Exploration of an NPM Scripts alternate or a CLI. WPGulp that could be installed as a devdependency and it could rely on config.js file + a few NPM Scripts to do what it does behind the scenes for zero config setups.
• [x] 👊 Some inspiration from create-react-app to make the build process easier.

Would you like to add something? Now's the time to speak! (Or forever hold your peace. OK that was a joke, feel free to create issues, send PR's, and comment below).

👉 Kindly, send the pull requests against the Development Branch for WPGulp v2.0.0.

Peace! ✌️

P.S. I'll be slow to respond being on vacations and all but I wanted to put my thought process out there so that we can build a better new version of WPGulp next year.

📣 This is also a call for contributors. Do reach out. Any level of contribution from your end would mean a lot to the WPGulp project.

[asharirfan]

I would like to contribute to adding → ES6 support to WPGulp 💯

Also, I think adding yarn to WPGulp could also help improve the adoption rate of WPGulp by the developers. 🤔

Let me know what you think about it.

[ahmadawais]

@asharirfan Glad to have you here. Sure take a look at Gulp 4.0 beta docs on its branch and see how to transform WPGulp to support ES6.

Yarn will be supported as soon as we work out a way to make WPGulp an NPM JS Package.

[saqibameen]

Glad to see you managing time for WPGulp 2.0 💯

I would love to contribute to the Documentation part of the next version.

[ahmadawais]

@MrSaqibAmeen Sure thing, you should coordinate with @MaedahBatool on this as I think we'd be using MKDocs for documentation.

[miklb]

Separation of concerns — Config file to be edited where gulpfile.js remains independent for easy updates. Yes, I am thinking the new version of WPGulp should be modular and easily updateable

💯

[JeremyEnglert]

I've spent a lot of time using Gulp 4 and caching/incremental builds on the new JWP Gulpfile. Would love to help here as well!

Also, I'm been utilizing a .yml file to control all of the settings/variables. The HUGE benefit here is yml is so easy to read, even no technical users can configure a Gulp setup.

[JeremyEnglert]

I see there is a vendorJS and a customJS task. Any reason we don't combine those into one?

[selrond]

Hey there, I'm interested in helping transforming it to ES6, and utilizing Gulp 4 API (gulp.series & gulp.parallel)

@ahmadawais what form should it take? Discussion and then implementation (may be slow), or splitting and assigning the work beforehead and reviewing / discussing PRs?

[miklb]

Also, I'm been utilizing a .yml file to control all of the settings/variables. The HUGE benefit here is yml is so easy to read, even no technical users can configure a Gulp setup.

that's sounds like a solid approach for allowing easier upgrade process. I just became aware of how PostCSS using a similar approach.

[selrond]

@miklb @JeremyEnglert I think YAML, despite being readable, is not an ideal solution for config. Reason being that YAML relies solely on indentation to denote its' structure, moreover, only spaces are allowed.

[JeremyEnglert]

@selrond - Gulp seems to recommend using a json file. But leaving comments within a json file is quite difficult. For most users, this will be a non-issue as the json file should be pretty straight forward.

But since the Gulpfile itself is so well documented, an undocumented json file might seem odd.

We could probably use a plain JS file.

[ahmadawais]

@JeremyEnglert I've spent a lot of time using Gulp 4 and caching/incremental builds on the new JWP Gulpfile. Would love to help here as well!

👊

🤔Can you say how stable Gulp 4 is at the moment. It's beta so I have had been avoiding it for a while since you have had been using it let me know.

We definitely need the caching + incremental builds stuff. You can start working on that. Create a new issue for that and let's track the progress there.

About YML file, I think we should use a simple .js file. The userbase of WPGulp is people who are trying out the build tools for the first time. And I want the build and config process for them as easy as possible without them thinking 'OK, so now I have to learn YML too'.

🎯 Also, YML files have a fair share of support tickets with spacing issues. Let's stick to JS or JSON.

I see there is a vendorJS and a customJS task. Any reason we don't combine those into one?

Vendor scripts should be enqueued before custom scripts that is why there are two separate tasks. This is Gulp, not Webpack so handling dependencies is hard. I have been thinking about building a simple Graph data-structure for dependencies like these and run a Topological Sort Algo to create the build timeline for JS scripts. Any thoughts here are more than welcome.

@selrond

Hey there, I'm interested in helping transforming it to ES6, and utilizing Gulp 4 API (gulp.series & gulp.parallel)

👊

what form should it take? Discussion and then implementation (may be slow), or splitting and assigning the work beforehead and reviewing / discussing PRs?

Well, create a separate issue for the thing you want to work on. Track the progress there and submit a PR against that issue.

🔥 So, far!

• @MaedahBatool — Documentation lead
• @MrSaqibAmeen — Docs help
• @asharirfan — ESNext conversion of WPGulp
• @JeremyEnglert — Incremental Builds and Caching + Gulp 4.0
• @selrond — ESNext transformation + Gulp 4 API (gulp.series & gulp.parallel)

So, folks let's start working on this. Create an issue for what you're working on and feel free to building together. Suggestions for improving this workflow are also welcome.

[ahmadawais]

@miklb Would you like to work on PostCSS?

[JeremyEnglert]

Vendor scripts should be enqueued before custom scripts that is why there are two separate tasks. This is Gulp, not Webpack so handling dependencies is hard. I have been thinking about building a simple Graph data-structure for dependencies like these and run a Topological Sort Algo to create the build timeline for JS scripts. Any thoughts here are more than welcome.

The task can be setup in a way so the vendor scripts are at the "top" of the JS file, followed by the custom scripts. That way they are technically loaded before the custom scripts. This is how we handle it on JWP with Foundation and other vendor JS.

🤔Can you say how stable Gulp 4 is at the moment. It's beta so I have had been avoiding it for a while since you have had been using it let me know.

I've been using it for quite some time without issue. There seems to be a ton of documentation on Gulp 4 and I haven't ran into any issues with packages not working. In my opinion, it's completely stable enough for use.

[miklb]

@ahmadawais how so? I'm still getting familiar with PostCSS, but I'm also looking at using it as a substitute for gulp-sass among other things.

If you are thinking along those same lines, then I'd certainly entertain a longer discussion.

[ahmadawais]

@JeremyEnglert

The task can be setup in a way so the vendor scripts are at the "top" of the JS file, followed by the custom scripts. That way they are technically loaded before the custom scripts. This is how we handle it on JWP with Foundation and other vendor JS.

This I think can only happen when you know what the external scripts are. When the scripts are added by the users then what would you suggest?

I've been using it for quite some time without issue. There seems to be a ton of documentation on Gulp 4 and I haven't ran into any issues with packages not working. In my opinion, it's completely stable enough for use.

Let's give it a go then! I think we can have two projects this one stays as a manual WPGulp file that people can use and modify and we create a WP-GULP-CLI project that runs behind the scenes with some conventions in place on the architecture of your WordPress product and helps you quickly spin up a project that benefits from things like Sass, ESNext, HotReloading or BrowserSync, etc.

@miklb Sure we can look at that. I have used PostCSS is some projects there are good enough packages for it.

[selrond]

@ahmadawais I'd like to see some improvements to the folder structure for WPGulp 2.0 - at least separating source and build / distribution files into separate directories.

I can work on this too

[ahmadawais]

@selrond that actually makes sense. If you want to work on that create a new issue with the feature name and start tracking its progress there. I will add it to the list above.

Also, this new structure is a go from my end.

Take a look at the first task + issue I created and linked — to understand the basic workflow of how we are going to progress this work.

CC: @asharirfan @MaedahBatool @MrSaqibAmeen @miklb @JeremyEnglert

[JeremyEnglert]

This I think can only happen when you know what the external scripts are. When the scripts are added by the users then what would you suggest?

Makes sense. And with the rise of HTTP/2, separate files makes sense.

For a config, I'd vote for a regular JS file opposed to JSON. JSON is great, but we can not leave comments in it.

[JeremyEnglert]

@ahmadawais can you create a branch for the new version? That way we can push/pull PR's without screwing up the master branch.

[ahmadawais]

@JeremyEnglert Sure thing. Let's start this project now. :)

JS config is a go as well.

Here you go 👉 Development Branch for WPGulp v2.0.0

[JeremyEnglert]

JS config is a go as well.

Would you like me to tackle this?

Also interested in helping with better error handling.

I've already gotten it mostly switched over to Gulp 4 in my fork. I'll do a PR later tonight into the new branch.

[ahmadawais]

@JeremyEnglert feel free to take anything. Just create an issue and work over it. I am working on the CLI and will create an issue for it ASAP.

Also good stuff on the PR man. Let's push it out.

[JeremyEnglert]

Discussion on best way to handle the external config file is here: https://github.com/ahmadawais/WPGulp/pull/66

JSON (no comments) and YAML (odd formatting) are not viable options at this point.

[ahmadawais]

Hey, folks! Take a looks at the new Contribution Guidelines for writing consistent commit messages for this repo.

[MaedahBatool]

I'll be working on its complete documentation for README.MD file and maybe we can work for its reference docs. 🎯

[ahmadawais]

@MaedahBatool that would be awesome. @MrSaqibAmeen take a look at how both of you can collaborate over this issue. @MaedahBatool would you like to manage and time this project throughout its lifecycle?

@asharirfan you've been MIA whereas the project is getting along quite well. Still going to improve upon what's left here?

[asharirfan]

@ahmadawais Yes, I have been busy, but I am free now. I am going to look into the progress and see what I can do to contribute.

[JeremyEnglert]

Why do we output a minified and non-minified file? There's better ways of handling this.

Option 1: Simply allow users to comment out the line if they don't want the files minified.

Option 2: Setup production flags to minify files. So gulp --production would minify the files during the build process.

I prefer Option 1. But am interested in hearing the benefit of having both files outputted.

[ahmadawais]

@JeremyEnglert How about we create a configuration variable for both?

I am thinking that the configuration will be rearranged at the end of this project in this format:

• Must Configure
• Simple → True/False based customizations
• Advanced → Sane defaults but customizable (and here's where user can have both or either of the minified or non-minified versions)

What do you think about that?

[ahmadawais]

@asharirfan @MrSaqibAmeen @MaedahBatool @JeremyEnglert How does the timeline look at your end? I'm thinking that we release the WPGulp 2.0-beta first week of Feb. It will take a couple more hours of your week but would be worth it. 💯

I am 80% on the WPGulp-CLI thingy — currently creating abstraction. 🎭

[saqibameen]

@ahmadawais I'm up to spend extra hours and get it done in time. 💯

[JeremyEnglert]

I think a beta release in early February is perfect. Do we have someone tackling updating the docs? With what I have on my plate at the moment, I don't think I can help much in that realm.

[ahmadawais]

Thanks, that's great!

Yes, @maedahbatool will be helping on that part. Though, it's too early for that. Thinks are changing a lot. Can't have a doc written before RC. 💯

On 13 Jan 2018 8:09 a.m., "Jeremy Englert" notifications@github.com wrote:

I think a beta release in early February is perfect. Do we have someone tackling updating the docs? With what I have on my plate at the moment, I don't think I can help much in that realm.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ahmadawais/WPGulp/issues/61#issuecomment-357405424, or mute the thread https://github.com/notifications/unsubscribe-auth/AA6mhelNSN3iMtXaxglbLDfb9TQrO1knks5tKB5LgaJpZM4REThn .

[ahmadawais]

Folks we're getting closer to the release of WPGulp 2.0 take a look https://github.com/ahmadawais/WPGulp/milestone/1

[JeremyEnglert]

@ahmadawais - I don't see an issue for "Improved architecture — Separate source and build folders", who's taking a stab at that?

I'm still working on the error handling - so I'm not sure how fast I could get to the architecture - but I do think it's an important part of this release.

[ahmadawais]

@JeremyEnglert Feel free to add issues for all of these. I am right now focused on another project that I am releasing today, after which I will come back and work on WPGulp next week (some other back-log stuff that I need to take care of — like my year in review post).

I am also thinking about a way we can allow users to just switch on and off features of WPGulp. I read on local's forums that WPGulp is awesome but quite heavy for some of their projects. I wanna make sure people can use it as lite as they want and to it's full potential as well.

It will be as easy as making a checker function for all features and then using true/false check's from user configs as guard clauses to if that is enabled or not.

Also I am thinking of putting all of WPGulp into a one single package dependency.

[selrond]

@JeremyEnglert I can

[JeremyEnglert]

I am also thinking about a way we can allow users to just switch on and off features of WPGulp. I read on local's forums that WPGulp is awesome but quite heavy for some of their projects. I wanna make sure people can use it as lite as they want and to it's full potential as well.

Heavy in what way? If it's because of the NPM modules, then having options won't necessarily fix that as the modules will be installed regardless. I've used Gulp on some really large sites using Local by Flywheel and never noticed any issues (but to be fair, I wasn't actively looking for issues either).

However, if we're trying to cut back on the project anyway possible, here are some ideas I have:

• Do we have any packages with duplicating functionality or can we handle things in a more "native" way?
• The config file has a TON of variables. Some that will rarely ever change and some that are only really used in the Gulpfile one time. Is this an area we can cut back on?

It will be as easy as making a checker function for all features and then using true/false check's from user configs as guard clauses to if that is enabled or not.

That could work - but we'd need a way to use that in the package.json as well, so certain packages are not loaded (if the size of the node_modules folder is the concern).

[ahmadawais]

Heavy in what way?

Feature heavy I think. But once we put it behind a single package that won't be a concern.

That could work - but we'd need a way to use that in the package.json as well, so certain packages are not loaded (if the size of the node_modules folder is the concern).

Yeah, addressing that would be easier with one single dependency that executes based on user configuration.

[JeremyEnglert]

Yeah, addressing that would be easier with one single dependency that executes based on user configuration.

My understanding of dependency management is sparse - so bare with me. :)

But since NPM uses a "flat" dependency structure now, would bundling it into a "single" dependency really help? The devDependencies will still need to be installed.

[achinkumar10]

Hi @ahmadawais , I have been following your projects like Twig integration , Gulp etc. I would love to contribute to your project. I have an experience of 8yrs as a WordPress developer and I work with WP and Drupal CMS'es. I have been integrating Gulp for my Client projects for js/css minification , image compression etc.

Though I am quite new to Github, but I have years of experience behind me working with Gitlab, Jenkins etc. Let me know your thoughts.

[ahmadawais]

Nice to have you here. Ueah you do make a lot of sense and I am all years about how you want to do that. Propose it in a separate issue and let's discuss it there.

On 18 Jan 2018 12:25 a.m., "Achin Kumar" notifications@github.com wrote:

Hi @ahmadawais https://github.com/ahmadawais , I have been following your projects like Twig integration , Gulp etc. I would love to contribute to your project. I have an experience of 8yrs as a WordPress developer and I work with WP and Drupal CMS'es.

I was wondering if we could integrate Gulp with WP-CLI. This would help us run operations through WP-CLI. Not sure if I am making since :)

Let me know your thoughts.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ahmadawais/WPGulp/issues/61#issuecomment-358414195, or mute the thread https://github.com/notifications/unsubscribe-auth/AA6mheEVKTnTWqC5LTquHwu_qmykCF9gks5tLkjkgaJpZM4REThn .

[JeremyEnglert]

@ahmadawais - anything I can do to help push this along? Looks like we're close to getting 2.0 to beta!

[ahmadawais]

@JeremyEnglert Can you take a look at what else we can improve here?

Also the 🗃 Improved architecture — Separate source and build folders.

What's left is that now I don't want to release it as is, I want to make it a Zero-Config-JS. Where you run a single command and your project has WPGulp without anyone ever touching anything with predefined defaults — which are configurable.

I have lost hope on boilerplates and want to go in the direction of create-guten-block — what do you think about that?

[theenoahmason]

@ahmadawais yes yes yes. This also follows the pattern of create-react-app and express-generator, and as someone who goes between node projects and WP projects often, this would be awesome.

Maybe even something like create-wpgulp-theme that makes a theme directory with your wp-gulp scripts merged onto a copy of the latest underscores (_s).

You could use their (_s) directory structure as a starting point. This would allow the generator to be "gulped" as soon as installed, as underscores is fully Sassed out.

[ahmadawais]

@ahmadawais yes yes yes. This also follows the pattern of create-react-app and express-generator, and as someone who goes between node projects and WP projects often, this would be awesome.

That's the motivation here. 💯

Maybe even something like create-wpgulp-theme that makes a theme directory with your wp-gulp scripts merged onto a copy of the latest underscores (_s).

If you're up for contribution I have a WPGulpTheme project that we can turn into this.

[theenoahmason]

@ahmadawais, I'll check it out!

[JeremyEnglert]

I have mixed feelings on that idea - but it could be because I don't fully understand it.

As this is a build tool; I'm assuming many users will add additional tasks or modify how tasks work - which could involve additional dependencies.

If a user can not control the version of dependencies, you could run into conflicts. It also limits the ability to easily drop the workflow into an existing theme.

I think that particular method works great for a project like create-gluten-block, but not so much with a tool like WPGulp.

If you want to create a WPGulp/Theme generator, I think that's a good idea. But should probably live as a separate project.

[JeremyEnglert]

Generators (like create-guten-block) and boilerplates (like WPGulp) are both extremely useful depending on the situation.

With a tool like WPGulp, I prefer a boilerplate as I have more control as an end user.