1st Jul 2015![Gulp Gulp](/uploads/1/1/7/7/117774119/272498242.png)
![Gulp tutorial Gulp tutorial](/uploads/1/1/7/7/117774119/449276035.png)
Gulp is a build tool that helps you automate your development workflow. In this article, we will dive deep into Gulp to show you how to use it effectively to create a simple workflow.
Gulp documentation: Delete files using del. First, Install gulp and del to project directory locally. Npm install -save-dev gulp del Then add the clean task to your gulpfile.js. 'This is just an amazing complete offline tutorial for those of you who want to learn Gulp. Inside is a complete Gulp tutorial for beginners to advanced that fully offline so you don't need an internet connection anymore. Here are some material about Gulp in this application: - Gulp - Home - Gulp - Overview - Gulp - Installation - Gulp - Basics - Gulp - Developing An Application - etc.
Let’s get started.
Note: This article is outdated. The latest version can be found here
Installing Gulp
We’ll start off the process by installing Gulp onto your computer. Gulp requires you to have Node.js and Node Package Manager (NPM) installed on your system, so if you haven’t gotten them yet, just head over to Node.js’s website and download the installer.
Once you’re done installing Node.js and NPM, you can install Gulp by typing the following command in the command line:
Oh btw, you can opt not to use the sudo keyword by following these instructions
This command installs gulp globally and allows you to use the
gulp
command anywhere on your computer.We’re now done with installing Gulp and we can move on to create a new project that uses Gulp.
Creating a Gulp Project
Let’s create a folder named
project
as we work through this article. Once you have created the folder, you’ll want to run npm init
in it.This
npm init
command asks you a few questions and creates a package.json
file to store information about dependencies that you’ll use in this project.The first dependency in our project is Gulp since we’re using it as our build tool. You’ll have to install gulp within the
project
folder by augmenting the install code slightly:See that we have removed
sudo
from the command and replaced the -g
flag with the --save-dev
flag?This
--save-dev
flag tells NPM to install gulp locally in (a dev term for within) the project, and save this dependency information in the package.json
file.Since we’re installing a package locally, we don’t have a need for administrator rights and hence the
sudo
was dropped. Removing this sudo
is important and could potentially cause errors if you don’t.Now, if you take a look at your
package.json
file, you should see that Gulp has been added as a dev dependency.You should also see a
gulp
folder within the new node_modules
folder that was created when you ran the npm install gulp --save-dev
command.Next, we’ll have to create a
gulpfile.js
file to store all our Gulp configurations.Gulp Tutorialspoint
There’s one more thing to do before we start configuring Gulp to create a workflow. We have to make sure we’re clear on how the project is structured.
Determining Project Structure
Let’s start off with a generic structure for a webapp:
In this structure, the
app
folder will store all our written code, and the dist
folder will be used to store code that’s production-ready.Don’t worry if your actual projects has a structure that’s different from the current one we’re using right now. Once you’ve gotten the hang of Gulp, you’ll see how to tweak the gulpfile to work with your structure easily. So let’s work with this structure for now.
Once you’ve created the project structure with the corresponding folders, we can proceed on to writing your first Gulp task.
Writing Your First Task
To configure Gulp, you’ll first have to
require
gulp within your gulpfile.js
:This
require
statement tells Node.js to look under the node_modules
folder, find a package named gulp
and pass it to the gulp
variable.Once we have this
gulp
variable, we can use it to write different Gulp tasks. Here’s the basic syntax of a gulp task.Let’s write a task named ‘hello’ for a start, and let the task do a log that says “Hello Zell!”.
The task name is important since you’ll be able to use the task anywhere else in the Gulpfile to run the task.
You can also use run a task with the command line by using
gulp
plus the name of the task.You should see a log from the terminal saying “Hello Zell!” once you ran the code in the terminal.
In reality, gulp tasks are slightly more complex that what we have written so far. You’ll have to use two other gulp methods,
gulp.src
and gulp.dest
.Creating a Real Task
Here’s what a real task may look like:
Let’s put this template to use with a real example where we compile Sass to CSS. I’ll explain how to set up the task while we’re at it.
First, we’ll need to install a gulp plugin,
gulp-sass
, to compile Sass to CSS. We can install it with the npm install
command with the --save-dev
flag like what we did above.We will then need to require this plugin in the gulpfile.
![Gulp Gulp](/uploads/1/1/7/7/117774119/272498242.png)
Now, create a
styles.scss
file within the app/scss
folder and give it some styles to convert from Sass to CSS.This
styles.scss
file will be converted into CSS by passing through the gulp-sass
plugin we installed. After passing through the plugin, it’ll be created as styles.css
in the app/css
folder.Gulp 4 Tutorials
Here’s how the task would look like:
We can test this
sass
task by running it in the command line.Now, if you take a look at the
styles.css
file in app/css
, you’ll see that the percentage()
function has been evaluated into the following code:This means our
styles.scss
file has successfully been compiled into CSS.Adding more functionality to the sass task
Just compiling from Sass to CSS isn’t good enough. Sometimes it makes more sense to add more plugins to make thing simpler for us. One of the best plugins that you’ll ever use when converting from Sass to CSS is autoprefixer,which helps you write vendor prefixes according to caniuse.
Let’s try adding autoprefixer to our
sass
task.To do so, we’ll have to install the gulp plugin for autoprefixer.
Then we’ll have to require
autoprefixer
.Autoprefixer is usually placed after Sass is compiled into CSS. In Gulp, we’ll want to add another
.pipe()
so the resultant CSS gets passed through autoprefixer before it’s created as styles.css
in app/css
.The modified code is hence:
Now if you run
gulp sass
again, you’ll notice that the output in the styles.css
file has changed to include vendor prefixes for the display flex property:Another task that’ll help you out during development is to add sourcemaps.
A sourcemap is a string of information that tells the browser where different sections of the code is stored. With a CSS sourcemap, you can easily locate the original source code of specific lines of CSS just by checking out the inspector.
To add sourcemaps to the
sass
task, we’ll have to install the gulp-sourcemaps
plugin.The process to adding sourcemaps to our
sass
task is slightly different from adding autoprefixer. We’ll have to add two pipes
instead of one.First, we’ll need to initialize the sourcemap plugin right after getting source files from gulp.
Then, we’ll have to let the files pass through
gulp-sass
and gulp-autoprefixer
before writing the sourcemaps at the end of the css file.Now if you run
gulp sass
on the terminal, you should be able to see that Gulp has written a sourcemap at the end of your CSS file.Automatically update the CSS file when you save
Now it’s quite some work to run the
gulp sass
task whenever we want to compile Sass to CSS. Wouldn’t it be awesome if Gulp would run it automatically?Gulp can do that! You’ll just have to let Gulp check whether the
styles.scss
file was changed when you save it. This checking process is called watching
in programming terms.Gulp does this watching by providing us with a
watch
method that allows you to run any task whenever a file is changed.Instead of just watching the Sass files alone, you’ll often want to watch many types of files and run different tasks during a development process. In order to achieve that, we can create a
watch
gulp task that watches different files.Now if you run the watch command you’ll see that gulp immediately starts watching your files for changes.
And if you change a line in
styles.scss
, Gulp will automatically run the sass task.There’s only one thing that’s lacking here. Gulp didn’t run the
sass
task first before running watch
, which means the CSS might not be the most updated one. Hence, we’ll want to make sure the watch
task runs after the sass
task.We can do so by adding a second parameter to the
watch
task. This second parameter is an array of tasks that must be completed before Gulp runs watch
.Now if you run the
watch
task, you’ll see that Gulp tells the command line to first run the sass
task, followed by the watch
task.Since we’re already watching and recompiling Sass files when it’s changed, why not bring it further and reload the browser each time the file is saved?
Automatically Refreshing the Browser when you save
Having the browser automatically refreshing when you save a file is a task that saves you lots of time and hand-ache.
The best project for refreshing the browser right now is Browser Sync, and we can use with Gulp easily.
First, we’ll have to install Browser Sync.
You’ll notice that there’s no more
gulp-
prefix when installing Browser Sync. This is because Browser Sync can be made to work with Gulp right out of the box; you don’t need a Gulp plugin.We’ll have to
require
Browser Sync, as usual.Browser Sync spins up a local server to load static HTML files. We’ll have to provide it with some initial configurations so it knows where to find our
index.html
file.Let’s make a
browserSync
task for spinning up this server.Next, we’ll need to change the
sass
task slightly to allow Browser Sync to inject new CSS into the HTML. To do so, we’ll hav eto add a return
before gulp.src
and we’ll have to .pipe()
a Browser Sync reload method.We’ll also have to make sure the
browserSync
task runs before the watch
task.If you run
gulp watch
in the terminal now, you’ll see that browserSync
and sass
runs concurrently, followed by watch
. In addition, a browser pops up to show you the current index.html
file.So if you change the
styles.scss
file and save…Viola! :)
Since we’re already watching for changes and refreshing the browser when we save
styles.scss
, why not do it for index.html
as well?Now that’s an example of a decent workflow that converts Sass to CSS. Of course, there’s a lot of improvements you can make to it. For instance, you can configure options for each of the plugins used, and you can also watch more files with some node globbing knowledge.
We’ll cover those in the next article :)
Now let’s do a quick summary.
Wrapping Up
So in this article we learned how to install Gulp and we learn to set up a basic task with Gulp.
Then we went ahead and setup a real task by adding different gulp plugins to the mix.
Eventually, we made it much better by watching the files for change and refreshing the browser whenever possible.
There’s still a whole lot more to configuring Gulp, but we’ll pause here for now. Let’s continue in the next article.
![Gulp tutorial Gulp tutorial](/uploads/1/1/7/7/117774119/449276035.png)
Gulp Js Tutorialspoint
What is one thing you’ve learned about Gulp in this tutorial? Let me know in the comments below!
Gulp Tutorial
If you enjoyed this article, please tell a friend about it! Share it on Twitter. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!
last modified July 13, 2020
Gulp getting started tutorial is an introductory tutorial to the Gulp tool, which is a Node.js build tool. The tutorial covers Gulp 4.
Gulp
Gulp is a Node task runner. It is a streaming build system infront-end web development. It helps automate such tasks as copying files,linting, unit testing, image manipulation, minifying JavaScript and CSS code,or compiling TypeScript to JavaScript. Gulp is platform independent. Inaddition to Node.js, Gulp is used in .NET, Java, or PHP platforms.
Gulp favours code over configuration. It uses tasks to define its workflow. The tasks are written in the
gulpfile.js
file. Gulp tasks use plugins, which are small, single-purpose code units. The Gulp ecosystem includes more than 3500 such plugins. For instance, the gulp-minify
plugin minifies JS files. Gulp is based on Node streams. It reads data from a filesystem and passesthem through pipelines to transform them. The data goes from one plugin to another with the use of the
pipe
function. One task is performed at a time. Using plugins in the pipeline allows to perform complex tasks. The original data may be modified, or we can create new modified copy of the data.The
gulp.src
function creates the stream of source files to perform the pipe operations on. The gulp.dest
specifies where to output the files once the task is completed.Gulp CLI
Gulp consists of two parts: the Gulp library and the Gulp CLI (Command LineInterface). The Gulp library is used in JavaScript code. The
gulp-cli
is a utility program that allows us to access Gulp fromthe shell. In order to work with Gulp, we need to install both packages.Gulp task
A Gulp task is an asynchronous JavaScript function. The function returns astream, promise, event emitter, child process, or observable. Originally the tasks were created with the
gulp.task
function. Gulp now favours newer syntax based on modules, while the older syntax is still supported.The modern syntax allows to separate the tasks into private and public. Public tasks are exported from the gulpfile, which allows them to be run by the gulp command. Private tasks are used only internally; we cannot run them with the gulp command.
Globbing
Globbing is locating files on a file system using one or more glob strings. A glob string is a literal and/or wildcard characters, like
*
, **
, or !
, used to match filepaths. This glob matches all JS files.
This glob string matches any file ending with
.js
in the root folder and any child directories.The
!
indicates that the main.scss
should be excluded. This glob string matches any file that ends either in
scss
or sass
.Composing tasks
Gulp.js 4.0 introduces the
series
and parallel
methods to combine tasks.The series
runs tasks one by one, while the parallel
runs tasks simultaneously.In our case, first the a and b tasks are run in parallel, then, once both arecomplete, the c task is run and after it finishes, the d is run.
Gulp default task
The default task is run when we do not provide any task name to the Gulp CLI tool.
This is the older syntax to define a default task.
This is the newer syntax.
Installing Gulp
We initiate a Node.js project and install the Gulp library and the Gulp CLI.
We use Node.js version 12.16.1.
We initiate a Node project and install Gulp and Gulp CLI.
Gulp rename files example
In the following example, we use the
gulp-rename
plugin to rename our files.Inside the
src
directory, we have three HTML files. We want to rename their extensions to .html.We install the
gulp-rename
plugin.We create the
renameFiles
task. It renames all .htm
files in the src
directory and copies them into the output
directory.With the
src
function, we create a source strean from htm files in the src
directory. We use globbing to select htm files only.The pipe
function takes the data from the stream and applies the rename
function on it.With the dest
function, we specify the output stream; it is the directory where we copy the renamed files.With the
gulp
tool, we run the rename
task.The files were renamed.
The gulp-minify example
The
gulp-minify
plugin minifies JS files.We install the
gulp-minify
plugin.src/js/main.js
We have a simple
main.js
file with a function.We read the JS file, pass it through the
minify
function and write the result into the dist/js
directory.We run the default Gulp task.
These are the contents of the minified
main-min.js
file.Gulp composing tasks
In the next example, we compose tasks with
series
and parallel
. In this example, we need gulp-minify
,gulp-rename
, gulp-clean-css
, and del
plugins. The
gulp-clean-css
minifies CSS. The del
deletesfiles and directories.We have this directory structure.
src/js/main.js
This is a simple
main.js
file.This is a simple
main.css
file.gulpfile.js
The gulpfile minifies CSS and JS files. It cleans the distribution directory. The workflow is separated into several tasks.
The
clean
task removes the dist
directory.The
styles
task minifies the CSS file and renames it. It adds the .min
extension.The
scripts
task minifies the JS file.We define a
build
task. It is a composition of three tasks. First, the clean
task is run. After it finishes, the styles
and scripts
are run in parallel.We export five functions. The tasks can be called independently or composed in the
build
taks. Also, the build
task is the default task.We explicitly run the build task.
In this tutorial we have introduced Gulp.
You might also be interested in the following related tutorials: Node Sass tutorial, Gulp minify tutorial, Gulp Sass tutorial.
List all JavaScript tutorials.