Development always starts off simple. You come up with a great idea and then plan out how to build it. Quickly, you scaffold your project structure and organize everything to perfection. As you progress, your small idea starts to grow into a much larger application. You soon realize that your project has become large and unwieldy, and to remedy this, you perform a series of little mundane operations each time you modify your code to keep it small and efficient. Suddenly, all of these repetitive tasks only seem to get in your way and slow you down. You tell yourself that there must be a better way.
The good news is, you are absolutely right. The solution to this development obstacle lies in utilizing build systems. They are some of the most valuable tools in a developer's toolbox, and if you've never used one before, you're soon going to wonder how you ever worked without one.
In software development, build systems such as Make were initially used to compile code into executable formats for use in an operating system. However, in web development, we have a completely different set of practices and operations to contend with. Over the past few years, the growth of the Web has led to an increasing interest in using build systems to more capably handle the growing complexities of our applications and project workflows.
As developers, it is important for us to anticipate these growing complexities. We must do all that we can to improve our workflows so that we can build efficient projects that allow us to focus on what we do best, write great code.
In this book, we are going to explore Gulp, one of the most popular JavaScript build systems available today. Instead of dropping you right into the code, we will break apart the learning process into simple, understandable chunks that can be easily consumed and referenced if you get hung up at any point. All that you need to follow along is a general understanding of web development and how to write basic HTML, CSS, and JavaScript.
The first step toward using build systems is quite often viewed as the most intimidating, and understandably so. For years, I viewed the command line as a tool that was only beneficial to programmers and system administrators. I even resisted learning about Node.js because I feared the amount of time and dedication required to study it would be greater than how much I could actually benefit from it.
These feelings of intimidation and resistance are completely normal and are felt by many developers just like you. We are overwhelmingly exposed to new tools and frameworks on a daily basis. It is our responsibility as developers to evaluate these tools to determine their overall value based on the time investment required to implement them in our projects. When it comes to some tools, developers simply don't dig deep enough to identify the parts that might be useful to them.
I've come to realize that these things aren't as complicated as we sometimes make them, but many developers are still psyching themselves out before they even get started. It's important to remember that while these tools may feel quite foreign at first, they are not beyond your grasp and understanding.
What is Gulp?
Gulp is a streaming JavaScript build system built with Node.js that leverages the power of streams and code-over-configuration to automate, organize, and run development tasks very quickly and efficiently. By simply creating a small file of instructions, Gulp can perform just about any development task you can think of.
Gulp uses small, single-purpose plugins to modify and process your project files. Additionally, you can chain, or pipe, these plugins together into more complex actions with full control of the order in which those actions take place.
Gulp isn't alone though; it is built upon two of the most powerful tools available in the development industry today: Node.js and npm. These tools help Gulp perform and organize all of the wonderful things that it empowers us to do.
What is Node.js?
Node.js is a powerful JavaScript platform that is built on top of Google Chrome's JavaScript runtime engine, V8. This gives us the ability to run JavaScript outside of the browser, or in our case, on our local machine. Using Node, we now have the opportunity to write both the backend and frontend of a web application entirely in JavaScript. For the purposes of this book, we will only be using it as a means of running local tooling applications.
Node.js ships with npm, a companion package manager that facilitates the installation, storage, and creation of modular components that you can use to create applications. Together, these two tools are the engine behind how Gulp operates and organizes its plugin ecosystem.
As I mentioned in the introduction, new tools such as Node.js can bring about overwhelming thoughts or feelings of intimidation. This is especially true for those who focus entirely on the frontend side of development. However, when it comes to the frontend, often the hardest part is just convincing yourself to get started. Sometimes, all you need is a simple project that can help build your confidence. In the following chapters, this is exactly what we are going to focus on, and soon all of that intimidation will melt away.
Why use Gulp?
There are many uses for Gulp, but as a newcomer, it might be difficult for you to identify how you can use it to improve your project workflow. With the ever-growing number of tools and frameworks, it becomes difficult to set aside enough time to research and choose the right one for your project or team. To better understand the benefits of Gulp, let's identify a few of the defining reasons why to use it and what sets it apart from similar tools.
Project automation
First and foremost, the ability to automate your workflow is incredibly valuable. It brings order to the chaotic amount of tasks that need to be run throughout development.
Let's imagine that you recently developed a big application, but instead of being able to allow the necessary time to put together a proper build system, you were pressured into completing it within an incredibly short time frame.
Here's an example of this: in the past few days, your boss has been gathering feedback from users who claim that slow load times and performance issues are preventing them from getting their work done and damaging their user experience. It has become so frustrating that they have even threatened to move to another competing service if the performance doesn't improve soon.
Due to the short deadline, the sacrifices that were made during development have actually caused problems for your users and the maintenance needed to resolve those problems has now become a large burden on you and your team.
Naturally, your boss is rather upset and demands that you figure out a way to correct these issues and deliver a more performant service. Not only that, your boss also expects you to have a sustainable solution so you can provide this across all of your team's future projects as well. It's quite a burden, especially at such short notice. This is a perfect example of where Gulp can really save the day.
To deliver better load times in your application, you would need to compress your overall file sizes, optimize your images, and eliminate any unnecessary HTTP requests.
You could implement a step in your workflow to handle each of these manually, but the problem is that workflows often flow forward and backward. No one is infallible, and we all make mistakes. A big part of our job is to correct our mistakes and fix bugs, which requires us to take a step back to resolve any issues we run into during development.
If we were to plan out a step in our workflow to handle these items manually, it would become a huge burden that would most likely take up much of our time. The only practical way to handle optimizations like these is to automate them as an ongoing workflow step. Whether we are just starting, finishing up, or returning to our code to fix bugs, our optimizations will be handled for us.
While things like these should usually be part of your initial project setup, even as
an afterthought, Gulp makes resolving these issues incredibly easy. Also, it will set you up with a solid base that you can include in future projects.
There are many additional tasks that we can add to our list of automations. These include tasks such as CSS preprocessing, running an HTML server, and automatically refreshing your browser window upon any changes to your code. We will be covering all of those and more in the upcoming chapters.
Streams
At the heart of Gulp is something called streams, and this is what sets it apart from other JavaScript build systems. Streams were originally introduced in Unix as a way to pipe together small, single-purpose applications to perform complex, flexible operations. Additionally, streams were created to operate on data without the need to buffer the entire file, leading to quicker processing compared to other task runners. Piping these small applications together is what is referred to as a pipechain. This is one of the core components of how we will organize and structure our tasks in Gulp.
Like Unix, Node.js has its own built-in stream module. This stream module is what Gulp uses to operate on your data and perform tasks. This allows developers to create small Gulp plugins or Node modules that perform single operations and then pipe them together with others to perform an entire chain of actions on your data. This gives you full control over how your data is processed by allowing you to customize your pipechain and specify how and in what order your data will be modified.
Code over config
Another reason why many developers find Gulp to be a more natural alternative to other JavaScript build systems is because the build file you create is written in code, not config. This may be a matter of personal preference, but I know that this was a fundamental reason why I chose to use Gulp over other build systems.
As I mentioned before, by learning more about Gulp, you are also learning the basics of Node.js, simply because you're writing code for a Node.js application. With a build system that uses a config file, you're missing out on the value of learning the core code syntax of the platform you are using.
Summary
In this chapter, you learned about the importance of build systems in software development and the growth of interest in their use in modern web development workflows.
As we introduce new tools, such as preprocessors and JavaScript libraries, we should have a way to properly organize those files into an efficient workflow and build them for production-ready releases.
We discussed the tools that we will be using throughout the rest of the book and how they all work together and interact with one another to provide us with a solid build system solution that we can use for our projects.
With a basic understanding of these tools and their uses, you can now begin to learn how to set up our local environment for Gulp. In the next chapter, you will learn about our command-line application, install our software, and prepare our project to begin writing code.
