CSS is fun and cool and I like it.
Article

Gulp for WordPress: Creating the Tasks

This is the second post in a two-part series about creating a Gulp workflow for WordPress theme development. Part one focused on the initial installation, setup, and organization of Gulp in a WordPress theme project. This post goes deep into the tasks Gulp will run by breaking down what each task does and how to tailor them to streamline theme development.

Now that we spent the first part of this series setting up a WordPress theme project with Gulp installed, … Read article

Article

Gulp for WordPress: Initial Setup

This is the first part of a two-part series on creating a Gulp workflow for WordPress theme development. This first part covers a lot of ground for the initial setup, including Gulp installation and an outline of the tasks we want it to run. If you're interested in how the tasks are created, then stay tuned for part two.

Earlier this year, I created a course for building premium WordPress themes. During the process, I wanted to use a … Read article

Article

Annotated Build Processes

When you're putting together a build process for a site, it's so dang useful to look at other people's processes. I ran across Andrew Welch's "An Annotated webpack 4 Config for Frontend Web Development" the other day and was glad he blogged it. If I was kicking off a new site where I wanted a webpack build, then I'd almost certainly reference something like this rather than start from scratch. At the same time, it made me realize how build … Read article

Article

Two Ways to Build a Site That Seem Super Different But Weirdly Aren’t That Different

Here are two ways to build a site (abstractly) that feel diametrically opposed to me:

  1. Build a site as an SPA (Single Page App). The page loads a skeleton HTML page that executes JavaScript as quickly as it can. The JavaScript calls an API to get data, and then the page renders content. Navigation of the site is more API calls to get the data it needs and re-rendering.
  2. Build a site as statically-generated. A build process runs in which
Read article
Link

Why would I use webpack?

Gonzalo García takes a crack at why webpack (not capitalized like npm) exists at all. No particular disagreements here, but here's my crack at it...

  • We use webpack because we need to import stuff from place;. This is a good pattern. We can use webpack to interpret those statements, as native support for them isn't what it needs to be yet, and it's not clear whether the native version will be smart for performance or not (probably not,
Read article
user avatar
Shared by
Chris Coyier
Article

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 … Read article

Link

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. … Read article

user avatar
Shared by
Chris Coyier
Article

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.… Read article

Article

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 Read article

icon-link icon-logo-star icon-search icon-star