I've used all three of these and wanted to talk about them and compare them. They are do various different things, but the only things I've used all three for are to convert my SASS to CSS, auto-prefix my CSS and give me a live dev server so I don't have to press refresh.

You can get plugins in VS Code to do this for you, but I was curious about these and wanted to know more. Plus they also do more things than just these that may come in useful in the future as I learn more.

Gulp

I found this one confusing to set up because it had changed recently, so if you were using an old tutorial, it wasn't going to help. I initially just looked at some code, thought that would work, and it really didn't. I ended up doing some searching on YouTube for recent tutorials explaining the bits of this that I wanted to use. And after about a 30 minute video then I understood it.

It's written like JavaScript, so it was easy to understand (once I had it explained to me!). I liked that when it ran it gave me all sorts of details about the live server, and opened it up for me in my default browser. I could easily follow the link to open it up on my mobile to test there.

Parcel

This is the easiest to use because it has (virtually) no set up. I still watched a video on it (it was about 10 minutes), so I understood what was going on. It initially gave me the address of the live server, but didn't open it for me. And didn't give me an address that I could use on my phone. So I initially didn't like this as much as Gulp.

And then I did some research. I found that you can change the command you use to run the dev build and it will open the page for you in your default browser. It was much harder to find, but I eventually established that you can open the live server on your phone: the address is similar to that which Gulp gives. Which is to say that you just change localserver to your computer's IP address and it works.

Webpack

I knew this one was more complicated, so I found a 2 hour video on this and went through it all. It was still a bit of a pain to set up because some things had changed, but fortunately people had left comments to say what to change. It was written in a way that isn't immediately obvious, but like with Gulp once you have your set up file you can just copy and paste it into your project.

This one also doesn't give you details about how to open the live server on your phone and so I just assumed you couldn't. I imagine, though, that it would work the same as Gulp and Parcel (I investigated doing it on Parcel after I tried Webpack).

Conclusion

I did try some testing with Cypress in both Parcel and Webpack. Parcel was fine, but Webpack just didn't work. The problem was because Webpack had recently changed and Cypress hadn't updated to cope with the new version. I couldn't get the workaround to work. So I didn't like Webpack for the amount of time I spent researching that, but it sounds like it's a temporary problem.

I did use Webpack to bundle my JS scripts and it worked fine. As far as I know Gulp and Parcel do the same thing, but I've only just discovered the art of putting your JS into different files and haven't tried it in the other two yet.

Until I researched the live server with Parcel I'd have said Gulp was my favourite. Just because it gives me so much information about the live server. But now I've decided it's Parcel. Just because it's quicker simpler to set up.

It's possible that I'll change my mind (again) in the future as I want these to do more things. And at that point (or just if I get curious) I might try one of the other packages out there.

The videos I used

For reference, here are the videos I used to help me learn these - there may be more recent ones out there or ones that you understand better.

Gulp vs Parcel vs Webpack

Gulp

Parcel

Webpack

Conclusion

The videos I used

Gulp

Parcel

Webpack

Subscribe to my newsletter

Nic

Nic