build tool

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

Using npm as a Build Tool

The main purpose being: you're using npm anyway, so using it directly to run scripts removes a dependency (i.e. gulp/grunt/whatever) and brings you a bit closer to the tools you are using directly. I could see this example `package.json` file from Graham Smith being highly referenced as people try this out for themselves.

Remember Damon Bauer covered this here on CSS-Tricks last year, with a whole bunch of examples of what is possible.

Organizing Your Grunt Tasks

The idea of breaking up your code into smaller bite sized chunks creates an environment that is easy to work in and maintain. That's often thought of as module design, and is a standard for web development these days. I'm going to show you a way you can use module design to better organize your Grunt tasks.

(more…)

Why npm Scripts?

The following is a guest post by Damon Bauer. There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use that? But there is more to it than that. Damon will walk us through the thinking, but also exactly how to accomplish many of the most important tasks in a front end development build process.

(more…)

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