New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃殌 WPGulp 2.0 Goals + Call for Contributors! #61

Open
ahmadawais opened this Issue Dec 16, 2017 · 56 comments

Comments

@ahmadawais
Owner

ahmadawais commented Dec 16, 2017

馃檶 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鈥

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.

This was referenced Dec 16, 2017

@asharirfan

This comment has been minimized.

Contributor

asharirfan commented Dec 16, 2017

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

This comment has been minimized.

Owner

ahmadawais commented Dec 16, 2017

@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

This comment has been minimized.

Contributor

saqibameen commented Dec 16, 2017

Glad to see you managing time for WPGulp 2.0 馃挴

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

@ahmadawais

This comment has been minimized.

Owner

ahmadawais commented Dec 16, 2017

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

@miklb

This comment has been minimized.

miklb commented Dec 16, 2017

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

This comment has been minimized.

Collaborator

JeremyEnglert commented Dec 16, 2017

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

This comment has been minimized.

Collaborator

JeremyEnglert commented Dec 16, 2017

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

@selrond

This comment has been minimized.

Contributor

selrond commented Dec 16, 2017

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

This comment has been minimized.

miklb commented Dec 16, 2017

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

This comment has been minimized.

Contributor

selrond commented Dec 16, 2017

@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

This comment has been minimized.

Collaborator

JeremyEnglert commented Dec 16, 2017

@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

This comment has been minimized.

Owner

ahmadawais commented Dec 17, 2017

@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 ahmadawais changed the title from 馃殌 WPGulp 2.0 Goals + Call for Contributors! to 馃殌 WPGulp 2.0 Goals + Call for Contributors! Dec 17, 2017

@ahmadawais ahmadawais added this to the v2.0 milestone Dec 17, 2017

@ahmadawais

This comment has been minimized.

Owner

ahmadawais commented Dec 17, 2017

@miklb Would you like to work on PostCSS?

@JeremyEnglert

This comment has been minimized.

Collaborator

JeremyEnglert commented Dec 17, 2017

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

This comment has been minimized.

miklb commented Dec 18, 2017

@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

This comment has been minimized.

Owner

ahmadawais commented Dec 18, 2017

@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

This comment has been minimized.

Contributor

selrond commented Dec 18, 2017

@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

This comment has been minimized.

Owner

ahmadawais commented Dec 18, 2017

@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

@ahmadawais ahmadawais referenced this issue Dec 18, 2017

Closed

馃摝 New Logo for WPGulp #62

0 of 3 tasks complete
@JeremyEnglert

This comment has been minimized.

Collaborator

JeremyEnglert commented Dec 20, 2017

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

This comment has been minimized.

Collaborator

JeremyEnglert commented Dec 20, 2017

@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

This comment has been minimized.

Owner

ahmadawais commented Dec 21, 2017

@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

This comment has been minimized.

Collaborator

JeremyEnglert commented Dec 21, 2017

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.

@selrond

This comment has been minimized.

Contributor

selrond commented Jan 16, 2018

@JeremyEnglert I can

@JeremyEnglert

This comment has been minimized.

Collaborator

JeremyEnglert commented Jan 16, 2018

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

This comment has been minimized.

Owner

ahmadawais commented Jan 16, 2018

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

This comment has been minimized.

Collaborator

JeremyEnglert commented Jan 16, 2018

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

This comment has been minimized.

achinkumar10 commented Jan 17, 2018

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

This comment has been minimized.

Owner

ahmadawais commented Jan 17, 2018

@JeremyEnglert

This comment has been minimized.

Collaborator

JeremyEnglert commented Jan 31, 2018

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

@ahmadawais

This comment has been minimized.

Owner

ahmadawais commented Feb 1, 2018

@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

This comment has been minimized.

theenoahmason commented Feb 2, 2018

@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

This comment has been minimized.

Owner

ahmadawais commented Feb 3, 2018

@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

This comment has been minimized.

theenoahmason commented Feb 3, 2018

@ahmadawais, I'll check it out!

@JeremyEnglert

This comment has been minimized.

Collaborator

JeremyEnglert commented Feb 3, 2018

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

This comment has been minimized.

Collaborator

JeremyEnglert commented Feb 3, 2018

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

This comment has been minimized.

theenoahmason commented Feb 4, 2018

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

This comment has been minimized.

Owner

ahmadawais commented Feb 6, 2018

@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

This comment has been minimized.

theenoahmason commented Feb 6, 2018

@ahmadawais I will check it out!

@asamolion

This comment has been minimized.

asamolion commented Jun 17, 2018

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

@ahmadawais

This comment has been minimized.

Owner

ahmadawais commented Sep 6, 2018

@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

This comment has been minimized.

Owner

ahmadawais commented Sep 7, 2018

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! 鉁岋笍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment