🚀 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…

• 💯 ES6 or ESNext Support —(Progress → 💯 ES6 or ESNext Support #67)
• 👋 Gulp 4.0 Incremental Builds and Caching —(Progress → Incremental Builds and Caching + Gulp 4.0 #63 )
• 🔬 ESLint + (optionally) Prettier Integration with WordPress Standards — (Progress 🔬 ESLint + (optionally) Prettier Integration with WordPress Standards #73)
• ⚒ Better Error handling for all the tasks — (Progress ⚒ Better Error Handling for All the Tasks  #68)
• 📚 Improved Image Caching — (Progress 📚 Improved Image Caching #70)
• 🛡 Improve Sass Task + Update NPM Modules — (Progress 🛡 Improve Sass Task + Update NPM Modules #74)
• ☕️ Separate Config File —(Progress → ☕️ Create Separate Config File #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.
• 📦 New logo —(Progress → 📦 New Logo for WPGulp #62)
• ⚡️ Better Documentation — led by @MaedahBatool
• 🗃 Improved architecture — Separate source and build folders.
• 🤔 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.
• 👊 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.

[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" ***@***.***> 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 <#61 (comment)>, 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.

[theenoahmason]

A generator just generates boilerplate for you. In create-react-app for example, there is an eject script. This ejects all create-react-app deps to your package.json and forks from the build tool. Doing an eject would give you access to every single character in the code. BUT, The generator helps because it allows us to update "react-scripts" instead of 50 deps individually ;)

Once you know, you know! @ahmadawais is absolutely on the right track.

[ahmadawais]

@theenoahmason you are right about that. I hope you tried my create-guten-block https://github.com/ahmadawais/create-guten-block toolkit which does exactly that.

[theenoahmason]

@ahmadawais I will check it out!

[asamolion]

@ahmadawais Is WPGulp 2.0 intended to support WordPress plugin development using libraries such as React or Vue?

[ahmadawais]

@asamolion nops, for that you can use create-guten-block — I prefer using webpack for modern JS. Wait for some time I am open sourcing three more projects for this thing.

Peace! ✌️

[ahmadawais]

Hey, everyone!

WPGulp v2.0 is out with a new shiny installer. There were some goals related to updating and more which I think we'll cover in v3. Also, with Gulp v4, Babel v7. 😮

Kindly, take a look https://github.com/ahmadawais/WPGulp and test it. Report bugs, errors, contribute PRs and everything 👍

I'll keep this open for a while just of #OMGWTFBBQ type questions.

Peace! ✌️

[WRCarlile]

Hi not sure if this is already in the works but is it possible to update without overwriting the local wpgulp.config.js file?

[ahmadawais]

If you have a config file then you are already using the latest version.

…

On Sat, Aug 24, 2019, 3:56 AM Ryan Carlile ***@***.***> wrote: Hi not sure if this is already in the works but is it possible to update without overwriting the local wpgulp.config.js file? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#61?email_source=notifications&email_token=AAHKNBLLQXFPLQMT4XNJZ53QGBTLNA5CNFSM4EIRHBT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5BQOZY#issuecomment-524486503>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHKNBO2I4JJXMIUM52BNVLQGBTLNANCNFSM4EIRHBTQ> .

[WRCarlile]

Oh I must of been using 2.0. I went back to work on a project from a few months ago. I updated and it replaced my config file and I had to get it from a previous commit. On Sat, Aug 24, 2019, 2:04 AM Ahmad Awais ⚡️ <notifications@github.com wrote:

…

If you have a config file then you are already using the latest version. On Sat, Aug 24, 2019, 3:56 AM Ryan Carlile ***@***.***> wrote: > Hi not sure if this is already in the works but is it possible to update > without overwriting the local wpgulp.config.js file? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > < #61?email_source=notifications&email_token=AAHKNBLLQXFPLQMT4XNJZ53QGBTLNA5CNFSM4EIRHBT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5BQOZY#issuecomment-524486503 >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/AAHKNBO2I4JJXMIUM52BNVLQGBTLNANCNFSM4EIRHBTQ > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#61?email_source=notifications&email_token=AEH7EEXRFTRNWVTFRGNDIA3QGD2S7A5CNFSM4EIRHBT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5B4E7A#issuecomment-524534396>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEH7EERYOYCK2GL4F4QNYZTQGD2S7ANCNFSM4EIRHBTQ> .