Respect Yourself! Use Gulp.

Making websites just got a lot easier.

When it comes to web development, there’s a lot to learn.

Maybe someone has told you to use vendor prefixes for cross-browser compatibility, to minify your code to decrease load time, or to use a linter so that your CSS and JavaScript follows best practices. Maybe someone has ranted about how using SCSS is better than using CSS, or about why templating engines are all the rage right now. Or maybe this is the first you’re hearing of it, and you have no idea what setup to use.

Trying to figure out “the right way” can be intimidating. Respect your sanity and your time: Gulp will save both.

Gulp is a program that you can use to automate everything about developing on your project. It’s called a build system, build tool, or task runner. Instead of having to memorize eight obscure commands to get your project running, Gulp lets you use one. Gulp’s philosophy is that it should be easy to combine a bunch of programs together into one unified task.

Gulp does everything short of writing your code for you.

It’s amazing! Since I’ve learned to use it my productivity has skyrocketed, and so has my code quality.

So how does it work? The trick with Gulp is that it does very little on its own. All its power comes from the massive library of plugins that can be chained together with relative ease, using configurations in a file called “Gulpfile.js”. Let me give you an example:

When Jeff Hilnbrand and I started Minimill together I knew that we’d need a solid web workflow to be efficient and consistent, and so I built an open source project template that uses Gulp. Our Gulpfile allows us to:

• Install the project in just three commands.
• Use Handlebars.js to keep our HTML organized into templates and partials.
• Use SCSS to keep our CSS organized into logical pieces.
• Use Autoprefixer to automatically insert browser prefixes where necessary to handle cross browser compatibility.
• Use Browsersync to automatically launch a development version of our website, reload the page whenever we change the HTML, and inject changes to CSS, JavaScript, and images with needing to reload.
• Use HTML Minifier, CSSNano, UglifyJS, and ImageMin to compress and optimize our HTML, CSS, JavaScript, and images, respectively.
• Use SCSS-Lint, JSHint, and JSCS to perform linting and style checking on our SCSS and JavaScript files.

All with one command from terminal:

gulp serve

It’s hard to describe how empowering Gulp can be to those who haven’t tried it. It takes all of the hassle, stress and confusion away from web development, letting you harness the power of its plugin library without worrying about how to use each individual program. With a streamlined build process and more logical Gulpfile syntax, it gives build tools a major usability facelift.

Get started now!

Sold? Drop what you’re doing and try out Gulp. You’ll thank yourself later for all the time you’ve saved. Here’s how:

• Clone my project template, and mess around with it! Follow the installation instructions in the README file and see what it’s like. If you have any problems, feel free to tweet at me or file an issue.
• Try this tutorial to get started with Gulp. It’s easy to follow and doesn’t skip any steps.
• Start from scratch using Gulp’s 4-step installation guide and then install whatever plugins catch your fancy.

Alternatives to Gulp

There have been plenty of build tools before Gulp that may be better suited to your project’s needs. Here are two popular alternatives (and why you might choose Gulp instead):

Make doesn’t have a logo, but if it did, it would look something like this.

Make

The oldest build tool that’s still in active use today is Make, a program that comes preinstalled on Linux and Mac OSX. Make is built for projects that compile in pieces, especially C and C++ projects. In your Makefile, you create a tree of dependencies and write out bash commands to build each file from its parts. If any of a file’s dependencies are modified, Make knows to run only the commands necessary to rebuild the final product from the changed files.

Make has no concept of a “Make plugin” because all it does is run bash commands, so anything you could do from your terminal you can do from Make.

It’s a popular choice for many developers and an important tool to learn. But if you’re working on a web project, Gulp makes it easier to perform web development-specific tasks.

Grunt

The closer relative to Gulp is Grunt, a build tool that popularized a plugin-based system. Unlike Gulp, Grunt’s plugins are designed around commonly-used tasks, each one configured in the Gruntfile.

Gulp was designed to alleviate many of the aggravations associated with Grunt. For starters, Gulp uses Node.js streams to connect each plugin to the next. This means that tasks run faster on Gulp because streams remove the need to create temporary files at each step of the build process. Gulp’s “code over configuration” philosophy makes Gulpfiles more intuitive than Gruntfiles. Instead of writing lines and lines of configurations (as is the standard for Gruntfiles), Gulp will have you creating tasks using the plugins as building blocks, streaming one plugin into the next. For many, it’s a matter of preference, but if you’re picking your first build tool, Gulp is the way to go.