Modern web development is hard. Depending on your environment, your preferences, needs and goals there’s a thousand and one steps from source code to a production ready application.
These are a lot of steps that you probably don’t want to keep in your head or in a checklist somewhere. You want to make them an intrinsic part of your development workflow and automate them so that they are reproduceable and reusable by all the members within your team (and even by the continuous integration and delivery infrastructure).
That’s were Gulp and other popular task runners/managers come in. Gulp helps you automate your workflow, make it explicit and share it within your team by providing an API to create and compose tasks. These tasks could be anything from copying files to a distribution folder, to transpiling ES2015, to removing unused CSS classes, etc. You can either build your own task or take advantage of the humongous community that already exist around Gulp and provides access to any task that you can imagine via plugins.
Sounds interesting? Then let’s get started.
Getting Started With Gulp
Installing Gulp in Your Project
As many other front-end development tooling, gulp runs on node.js. This means that you’ll need to install node in your machine before you can start using gulp. If node is not a part of your development environment then take a look at this article on front-end development tooling where I guide you on how to do it in OSX and Windows.
Once you have node and npm in your environment you’ll be able to install gulp itself.
For the Node Savvy
gulp-cli globally and
gulp in your project:
1 2 3
For the Node Beginner
Let’s start by installing the gulp command line interface globally. Open your favorite command line (PowerShell or Cmder work fine) and type:
Create a folder where to start learning gulp:
And try running gulp:
You’ll probably see the following:
Which gives you a great pointer to the fact that you need to install gulp in your project. We’re on the right path! Yey!
Before you install gulp you want to create a
package.json manifest file for your project. Why is that? You may ask. The answer is that
package.json lets you define the development dependencies of your project. Once defined you can save them in your favorite source control system so other members of your team or arbitrary people that happens to stumble upon your code can also enjoy the beauty of gulp.
You can create the manifest by typing the following:
This will start a wizard that will guide you through the process of creating a manifest. Since you don’t plan to publish a new library to npm you can just set all default options by just pressing
ENTER until the end of the wizard. This will generate a
package.json with the correct format to which you can add
gulp as development dependency by typing:
This should result in a
package.json that should contain gulp as a
1 2 3 4 5 6 7
Congratulations! You have Installed Gulp in Your Project!
Now if you run
Which highlights the very important fact that gulp expects you to have a
gulpfile.js file that will contain your automated tasks.
Creating Your First Task
Let’s create a very simple gulp configuration file. Create a
gulpfile.js in the root folder of your project, open it in your favorite editor, and type the following:
1 2 3 4 5 6 7
Awesome! You have defined your first gulp task. You can execute it from the command line (or using the Task Runner Explorer for Visual Studio) by typing its name after
1 2 3 4 5
gulp.task is one of core functions of the gulp API that let’s you define tasks by providing the name of the task and a function to execute when the task is invoked.
It’s All About Streams of Files
Front-end task automation has a lot to do with managing files: Getting files from one place, transforming them, improving them, massaging them and putting them in some other place. The way gulp chooses to model these files that go through different kinds of transformations is as a stream.
In computer science, a stream is a sequence of data elements made available over time. A stream can be thought of as items on a conveyor belt being processed one at a time rather than in large batches
The way you create a stream of files with gulp is by using
gulp.src, and the way you write the files within the stream to some place of your choice is via
app/js folder. You want to get these files, minify, bundle them and then copy them to a build folder
build. Well, you can start by creating a simpler task that just copies the files:
1 2 3 4
If you run the task with
gulp build you’ll be able to verify how there’s a new
build folder in your project folder, and how every js file within
app/js has been copied over to
An interesting thing to point here is how gulp is going to determine which paths to use when copying. In the expression
** separates the base path
app to the relative path that’s going to be copied over to the destination path at
build. That’s why the a file in
app/js/sandwich.js would be copied to
build/js/sandwich.js and not to
build/app/js/sandwich.js or to
build/sandwich.js. Another interesting thing to notice is how we return the stream from the function within
gulp.task. We do that because it will enable us to compose tasks together in the future.
Once we have defined the origin and destination of our files we could add processing steps to the pipeline like minification or bundling. For instance:
1 2 3 4 5 6 7 8
We will take a look at both of these later in the series, now, let’s go back to basics!
Help to Visualize the Stream
A great way to visualize the files as they move through the stream is the
gulp-print plugin. You can install through npm:
And then add it to your build pipeline in your
1 2 3 4 5 6 7 8
Now you can see the stream of files flowing throw the pipeline. If you type
gulp build you’ll be able to see the following which is super helpful for debugging and understanding how gulp works:
1 2 3 4 5 6 7 8 9
Doing Stuff When Files Change
You can make gulp watch on file changes through the
gulp.watch function. Let’s stick with the basics for now and just trigger a
build task whenever a file changes:
1 2 3
Whenever you run
gulp watch gulp will start watching the files that match the glob that you specify (in this case all files within the
app folder and subfolders) and trigger a build whenever any of them changes.
Setting a Default Task
We are nearing the end of this introduction to gulp but I wanted to leave you with yet another tidbit of knowledge. Do you know what happens if you just type
gulp inside your project? Let’s try it:
1 2 3 4
What happens is that gulp complains that there’s no
default task defined in your configuration file. Well you can define a default task to be executed whenever you type
gulp. For instance, it could be our
Now any time that you type
build task will be executed. Yes! You’ve saved yourself from typing 6 characters! Think of all the things you can do with that free time!!!
So I hope that you have enjoyed getting started with gulp. In this article you learned:
- how to install gulp in a project,
- how to create a simple task to log something funny,
- how gulp works with streams of files, grabbing files from a source of your choice with
gulp.src, transforming them in different ways and putting them back to a destination via
- how you can use the
gulp-printplugin to visualize the file stream and debug a task
- how to listen to file changes and trigger tasks through
- and how to define a
defaulttask and save yourself precious life energy
If you want to take a look at the complete build pipeline for this article check the Barbaric-Toolbox-Gulp repository at GitHub.
Want to Learn More About Gulp?
In the upcoming weeks I am going to be adding small elements to the build pipeline but if you can’t get enough of gulp here are some other interesting resources:
- gulp.js docs
- Great Gulp.js course with John Papa at Pluralsight
- Build a Front-End Build Pipeline From a C# Developer Perspective by the mighty Chris Klug
- Setting Up Continuous Deployment of an ASP.NET App with Gulp from VSTS to an Azure Web App using Scripted Build Definitions
More Articles in These Series
- Object Oriented Programming
- White Tower Summoning Enhanced: The Marvels of ES6 Classes
- Black Tower Summoning: Object Composition with Mixins
- Data Structures
- Functional Programming
- And more stuff to be shaped out:
- Asynchronous Programming