Moving from Gulp to Webpack

Richard Oliver Bray
11 min readSep 8, 2017

I’ve been avoiding learning Webpack for a while now as I never thought I needed to learn another build tool, Gulp does everything I’d ever need from a build tool now or in the future. However, ever since we’ve moved from AngularJS to Angular (or Angular 2+) as well as introducing standards such as; TypeScript instead of Javascript and a Jasmine /Karma combo for UI testing, but also Webpack as an initial build tool. I’ve avoided it for long enough and now, in September 2017, I thought it’s time to finally move on from my old friend Gulp.

If you’re interested, I’ve written this same post with syntax highlighting here.

Good Old Gulpfile

If you’ve never heard of Gulp before, this isn’t the post to learn, there are plenty of good tutorials out there a Google search away. Then again, you don’t really need to know Gulp to understand what’s going on so feel free to continue reading nevertheless.

Here’s what my old Gulpfile looks like. I’ve decided against putting it all into this post as it’s quite long. It essentially does 5 things;
- Starts a webserver
- Preprocesses `scss` to `css`
- Merges and compresses js files
- Moves and minifies html files
- And compresses images

--

--

Richard Oliver Bray
Richard Oliver Bray

Written by Richard Oliver Bray

Co-founder of orva.studio. Building digital products and teaching others to do the same. Saved by grace.