gulp

Combine Webpack with Gulp 4

Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp, and there are some pretty good reasons for that.

Still, the amount of JavaScript in our static projects is growing, so to compensate, let's make use of Webpack, while remaining in Gulp. In this article, specifically, Gulp 4. We'll use modern techniques to build an easily maintainable workflow, including the powerful and useful Hot Module Reloading (HMR).

(more…)

Transpiling ES6

While support for ES6 is always increasing, we can't always assume that users will be using a browser that supports all its features. So, in order to utilize ES6 features now and make sure we won't run into cross-browser compatibility issues, we need to transpile our code.

Let's look at two possible ways we can perform the task of transpiling our code. First, we will use npm scripts and Babel. For the second, we will look at using Gulp with Babel.

(more…)

Gulp for Beginners

Gulp is a tool that helps you out with several tasks when it comes to web development. It's often used to do front end tasks like:

  • Spinning up a web server
  • Reloading the browser automatically whenever a file is saved
  • Using preprocessors like Sass or LESS
  • Optimizing assets like CSS, JavaScript, and images

This is not a comprehensive list of things Gulp can do. If you're crazy enough, you can even build a static site generator with Gulp (I've done it!). So yes, Gulp is extremely powerful, but you'll have to learn how to use Gulp if you want to create your own customized build processes.

So that's what this article is for. It helps you get so good with the basics of Gulp that you can begin exploring everything else for yourself.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag