This post was originally published on Coder-Coder.com.

This tutorial will explain, step by step, how to set up Gulp 4 in your workflow, as well as how to migrate from Gulp 3 to Gulp 4 syntax.

Need to just quickly get your Gulp 3 gulpfile.js working with Gulp 4? Click here to go right to that part of the post.

1. Install the gulp-cli on your command line by running npm install gulp-cli -g.
2. Install Gulp by running npm install gulp.
3. Install other npm packages for your Gulp workflow.
4. Create a gulpfile.js file in your project root.
5. Import your npm packages as modules in your gulpfile.
6. Add your tasks to the gulpfile to compile your SCSS/JS files and run a watch task.
7. Run the gulp command to run all your tasks.

What is Gulp and what does it do?

Gulp is a tool that will run various tasks for you in your web development workflow. It might be called a bundler, build tool, or a task runner. They all mean roughly the same thing.

Similar tools are Webpack and Grunt (although Grunt is quickly becoming obsolete).

Here’s what we’re going to have Gulp do for us:

1. Compile our Sass files to CSS
2. Add vendor prefixes to our CSS
3. Minify our final CSS file
4. Concatenate (i.e. combine) our JS files
5. Uglify our final JS file
6. Move the final CSS/JS files into our /dist folder.

Pretty cool, right?!

So the way it works is, all your settings and tasks are stored in a gulpfile.js file. And you run Gulp on your command line.

The great part about that is that once you have your gulpfile all set up, you can easily reuse it for other projects. So it’s a huge time-saver!

Let’s move on to installing and setting up Gulp on your computer.

Installing Gulp, using a working demo project

Before you can run Gulp, you will need to install a couple of things:

• Install Node.js if you don’t have it yet.
• Install the Gulp Command Line Utility by running npm install --global gulp-cli.

Once you have Gulp working, check out a demo project I built that uses Gulp! It’s a front-end boilerplate project that’s meant to be a quick way for me to get started with any simple front-end website.

(I also have plenty of code snippets in the rest of this tutorial, so you can just refer to those as well!)

To set the front-end boilerplate project up:

• Clone or download the Git repo of this project onto your computer.
• Open the project, and in the root project folder, go to your command line and run npm install. This will install the npm packages listed in the package.json file, particularly Gulp 4.

You should now have the project files set up, and all the npm packages installed that we’ll be using to run Gulp tasks.

Since the files from the repo are ready to go, if you type in gulp in the command line, you should see an output like this:

> gulp [22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'...

And you’ve run Gulp!

What’s happening in the project when you run Gulp?

All right, you have the project successfully working! Now let’s get into more detail on what’s in the project and how it works.

First, here’s a quick rundown of the file structure of our project:

• index.html — your main HTML file
• package.json — contains all the npm packages to install when you run npm install.
• gulpfile.js — contains the config and runs all the Gulp tasks
• /app — working folder, you will edit SCSS/JS files in here
• /dist — Gulp will output files here, don’t edit these files

In your workflow, you will edit the HTML, SCSS, and JS files. Gulp will then detect any changes and compile everything. Then you will load your final CSS/JS files from the /dist folder in your index.html file.

Now that we have Gulp running, let’s take a closer look at how Gulp works.

What exactly is in the gulpfile.js?

Here’s an in-depth explanation of each section of the gulpfile, and what they do:

Step 1: Initialize npm modules

At the very top of the gulpfile.js, we have a whole bunch of constants that import the npm packages we installed earlier, using the require() function.

Here’s what our packages do:

Gulp package:

• gulp — runs everything in the gulpfile.js. We’re exporting just the specific gulp functions that we will be using, like src, dest, watch, and others. This allows us to call those functions directly without the gulp, for example we can just type in src() instead of gulp.src().

CSS packages:

• gulp-sourcemaps — maps the CSS styles back to the original SCSS file in your browser dev tools
• gulp-sass — compiles SCSS to CSS
• gulp-postcss — runs autoprefixer and cssnano (see below)
• autoprefixer — adds vendor prefixes to CSS
• cssnano — minifies CSS

If you’ve used Gulp before, you might be wondering why I’m using straight-up autoprefixer and cssnano, instead of gulp-autoprefixer and gulp-cssnano. For some reason, using them will work, but will prevent sourcemaps from working. Read more about that issue here.

JS packages:

• gulp-concat — concatenates multiple JS files into one file
• gulp-uglify — minifies JS

Now that we have our modules added, let’s put them to work!

Step 2: Use the modules to run your tasks

A “task” in Gulp is basically a function that performs a specific purpose.

We’re creating a few utility tasks to compile our SCSS and JS files, and also to watch those files for any changes. Then those utility tasks will be run in our default Gulp task when we type gulpon the command line.

Creating constants for file paths

Before writing our tasks, though, we have a few lines of code that save our file paths as constants. This is optional, but I like using path variables so that we don’t have to manually retype them each time:

This code creates scssPath and jsPath constants that we will use to tell Gulp where files are found.

Sass task

Here’s the code for our Sass task:

function scssTask(){        return src(files.scssPath)        .pipe(sourcemaps.init())        .pipe(sass())        .pipe(postcss([ autoprefixer(), cssnano() ]))        .pipe(sourcemaps.write('.'))        .pipe(dest('dist')    );}

Our Sass task, called scssTask(), is doing several things. In Gulp, you can chain multiple functions by using the Gulp function pipe() after the first function.

In our task, Gulp is first running src() to load the source directory of the SCSS files. It’s using the constant we created earlier, files.scssPath.

Then after src() we’re piping everything else into the build process. You can think about it like adding more and more sections of pipe onto an existing pipe.

The functions it’s running are:

• sourcemaps.init() — sourcemaps needs to be added first after src()
• sass() does the compiling of all the SCSS files to one CSS file
• postcss() runs two other plugins:
• • autoprefixer() to add vendor prefixes to the CSS
• • cssnano() to minify the CSS file
• sourcemaps.write() creates the sourcemaps file in the same directory.
• dest() tells Gulp to put the final CSS file and CSS sourcemaps file in the /dist folder.

JS task

Here’s the code for our JavaScript task:

function jsTask(){    return src([files.jsPath])        .pipe(concat('all.js'))        .pipe(uglify())        .pipe(dest('dist')    );}

Our JavaScript task, called jsTask(), is also running multiple functions:

• src() to load the JS files from files.jsPath.
• concat() to concatenate all the JS files into one JS file.
• uglify() to uglify/minify the JS file.
• dest() to move the final JS file into the /dist folder.

Watch task

The watch() function is a super handy part of Gulp. When you run it, it will run continuously, waiting to detect any changes to the files you tell it to watch. When it detects changes, it will run any number of tasks you tell it to.

This is great because then you don’t have to keep manually running gulp after every code change.

Here’s the code for our watch task:

function watchTask(){    watch(        [files.scssPath, files.jsPath],        parallel(scssTask, jsTask)    );}

The watch() function takes three parameters, but we’re just using two:

• globs, meaning the file path strings,
• options (not used), and
• tasks, meaning which tasks we want to run.

What we’re having our watch task do is watch the files in our scssPath and jsPath directories. Then if any changes are made in either, run the scssTask and jsTask tasks simultaneously.

Now that we’ve gotten our utility tasks set up, we need to set up our main Gulp task.

Default task

This is the main Gulp task, which will automatically run if you type in gulp on the command line.

exports.default = series( parallel(scssTask, jsTask), watchTask);

Gulp will automatically search for a default task in your gulpfile.js when you use the gulpcommand. So you must export the default task in order for it to work.

Our default task will do the following:

• Run the scssTask and jsTask simultaneously using parallel()
• Then run the watchTask

You’ll also notice that we are putting all those tasks inside the series() function.

This is one of the major new changes in Gulp 4 for how it handles tasks– you are required to wrap all tasks (even single ones) either in series() or parallel().

A note on registering tasks: what’s changed in Gulp 4

If you’ve been using the tasks() function to run everything, you may have noticed that there’s a difference now.

Instead of using gulp.task() to contain all your task functions, we’re creating actual functions like scssTask() and watchTask().

This is to follow Gulp’s official guidelines for creating tasks.

The Gulp team recommends using exports rather than tasks():

“In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won’t work.” [Gulp Documentation]

So, while they still let you use the task() function, it’s more current to create JS functions for each task and then export them.

If you can, I’d recommend updating your syntax to reflect this, as it’s possible that Gulp will deprecate task() at some point.

Problems Migrating from Gulp 3?

If you’ve been using Gulp 3 and all you want is to get the dang thing working with Gulp 4, you’re in luck!

Before, in Gulp 3, you could simply list a single function or multiple functions in an array. However, in Gulp 4, doing so without wrapping them in either series() or parallel() will throw an error now.

Something like:

AssertionError [ERR_ASSERTION]: Task function must be specified

Gulp 4 introduces two new functions to run tasks: series() and parallel(). It gives you the option of running multiple tasks concurrently, or one after the other.

So to quickly fix the error, put all your tasks into either a series() or parallel()function.

Tasks in (old) Gulp 3 syntax

In Gulp 3, you might have run tasks this way:

gulp.task('default', ['sass', 'js', 'watch']);

gulp.watch('app/scss/*.scss', ['sass']);

Tasks in Gulp 4 syntax

Put those tasks into a series() function like this:

gulp.task('default', gulp.series('sass', 'js', 'watch'));

gulp.watch('app/scss/*.scss', gulp.series('sass'));

And that will fix the task function error with the smallest change possible! ?

Project files download

All the code I’ve displayed here is from a GitHub repository I have for front-end boilerplate. It’s meant as a quick starter kit for any simple front-end website project.

You’re welcome to check it out, customize, and use it for your own projects!

Check out the GitHub repository here.

In closing

I hope that you’ve found this walk-through of how to get Gulp 4 running helpful!

If you enjoyed this post or have a question, feel free to leave a comment below! ?

Want more?

? Read more tutorials on my blog, coder-coder.com.
? Sign up here to get emails about new articles.
? Join 24,000+ others — Follow @thecodercoder on Instagram.
? Check out coding tutorials on my YouTube channel.

Images are everywhere across the internet. You would be hard pressed to find a single page or application that doesn’t contain at least one image in some form or another. Images are great way to help tell stories and emphasize critical parts of our lives.

But if you’re like me you know that having a large image can seriously impact the performance of your site/app. So today, I’m going to teach you how to use Gulp and an npm package called gulp-imagemin to reduce the size of your images on the fly.

If you don’t know what all of these words mean, fear not! I have some relevant and important links/descriptions below to help bring you up to speed.

• Minification, or minifying as I like to call it, is the act or process of removing unnecessary parts of source code to reduce size.
• Gulp is a JavaScript build tool that allows you to automate parts of your workflow to streamline your process. It takes care of some not so interesting, but important, aspects of your workflow (like reducing image size) so that you can focus on the building. You can find Gulp here.
• To make use of npm we'll need to install Node.js which is, in a nutshell, the framework that allows developers to use JavaScript code in a server (back end) environment. You can find Node here.
• npm (Node Package Manager) is and does what its name implies. It is a package manager for JavaScript and "the world's largest software registry". Just think of npm as a giant storage area for awesome packages/utilities to help developers. You can find npm here.
• gulp-imagemin is one of those awesome packages I mentioned earlier. Using this package we'll be able to automatically reduce the size of our images every time a save occurs. You can find gulp-imagemin here.

Alright, now that explanations are out of the way let’s get to the fun parts :D

Project File Structure

Start by opening up your text editor of choice and creating a directory for your project or if you have an existing directory navigate to that directory in your terminal and skip down to the Installing Node & npm Section.

If you’re using VS Code you can find the built in terminal by hitting ctrl + (tilde)`.

Here’s how my project structure looks in my terminal:

And here’s how my project file structure looks in the explorer inside VS Code:

As you can see I have a separate directory for my base files and the minified files. Once you have your project directory established it’s time to start installing everything we’ll need.

Installing Node & npm

Alright, now that our directory is up and running let’s start installing our dependencies. If you already have Node & npm installed, feel free to skip down to the Installing Gulp & gulp-imagemin Section.

1. First, enter node --v within your terminal to check and see if you have the Node installed. If you do, you'll get something back like v8.9.3
2. If you get nothing back or an error, simply download and install Node from here. It could take a few minutes so +be patient.
3. Once Node.js is installed, you'll have npm installed as well because it comes bundled with Node. You can check the version of npm by typing npm -v in your terminal. You should get something like 6.4.1back.
4. Next we need to create a package.json file for our project. We do this by using the command npm init (find out more about [package.json](https://docs.nodejitsu.com/articles/getting-started/npm/what-is-the-file-package-json/) here). You'll be asked a series of questions but if you don't want to answer them you don't have to, just hit enter until you see Is this OK? (yes), then hit Enter one last time and you'll be finished with this section.

You’ll notice that this file was created in a different directory than the one I started with. This is so I can provide an example, as I have previously installed all of this in my current project directory.

Installing Gulp & gulp-imagemin

Once Node & npm have been installed, we can now install Gulp & gulp-imagemin by following these steps:

1. First, type npm install --save-dev gulp in your terminal. If you want to know what the --save-dev flag does, check out this Stack Overflow post.
2. Again, be patient as installing Gulp might take a minute but you’ll eventually end up with something like this: gulp@4.0.0 added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
3. You can check your Gulp version by typing gulp -v in your terminal and you'll get something similar to this: [13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
4. Now let’s install gulp-imagemin by typing npm install --save-dev gulp-imagemin and again you'll get something like this back: gulp-imagemin@5.0.3 added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
5. And the final step for this section is to create our gulpfile.js It is very important that your file has this exact name and is in the outer most level of your project folder structure!

Writing the Code — Finally the Fun!

Ok, now that we’ve taken care of installing everything in the correct place, let’s open up our gulpfile.js and write the actual code that will do all of the hard work.

1. Start by requiring gulp --&gt; const gulp = require('gulp');We're basically taking advantage of Node's module system to use code that is located in different files
2. Now require gulp-imagemin --&gt; const imagemin = require('gulp-imagemin'); Again we're taking advantage of the module system to use this code in our project
3. Now, we need to write the function that will do all of the image squashing:
   function imgSquash() {
   return gulp .src("./img/")
   .pipe(imagemin())
   .pipe(gulp*.dest("./minified/images"));
   }
4. If you set your directory up following mine, the code above will work. If your directory looks different you will need to change the .src & .dest lines to match where your files are located and where you want them piped to after they've been minified.
5. Gulp operates based off of tasks and we can give it plenty of those to keep it busy. Once we've defined the actual function to do the heavy lifting, we need to tell Gulp what to do with that function: gulp.task("imgSquash", imgSquash);
6. Now, we want Gulp to watch our given directory for changes (new images) and when it detects those, we want it to automatically run our imgSquash function, minify our images, and pipe them to the destination we set. We achieve that by defining another task to watch the directory:
   gulp**.**task("watch", () **=&**gt; {
g**u**lp.watch("./img/*", imgSquash);
   });
7. The last step to writing the code is defining the last task to call our imgSquash and watch tasks in succession: gulp**.**task("default",gulp**.**series("imgSquash","watch")); Here the word "default" refers to the word gulp in the terminal and the gulp.series will ensure that the imgSquash function runs and immediately after Gulp will watch the directory for changes.

Here is what our finished file should look like:

Save this file, open your terminal, and type gulp and hit enter. You should see something like this:

As you can see, each time a new file was added to the base directory, our tasks kicked in because Gulp was watching and immediately ran our imgSquash function to minify our images. When you're finished using Gulp you can hit ctrl + c in your terminal to terminate the watch process.

Now you can start using your minified images on your website/app and enjoy that new found boost in performance!

Wrap Up

Gulp is a very powerful JavaScript build tool that can help automate some of the more tedious, but important, aspects of building your project. With less than an hour’s worth of work you were able to get your images minified, thus reducing load time and increasing performance for your website/app. That’s awesome and you should be proud of yourself!

This is just one of the many ways that build tools like Gulp can help you. There are many more ways it can help (minifying/concatenating CSS/JS files) and I hope you explore some of those awesome options.

If you enjoyed this article please consider donating some claps as it helps others find my work. Also, drop a comment and let me know what you’re working on and how Gulp helps you focus on the building.

And finally, this article was originally posted on my personal blog. While you’re there don’t forget to sign up for the Newsletter which can be found at the top right corner of my blog page. I send it out monthly (I promise not to spam your inbox) and it’s filled with awesome articles from across the web that I think you’ll find helpful.

As always, have an awesome day full of love, happiness, and coding!

I intern at a tech firm presently, and few days ago I got a challenge from my boss about writing an article. So I decided to write something on Gulp-sass.
Setting it up can be frustrating sometimes, especially when you are new to it. I use Windows, and searching for an article that would solve my problem was like getting Jack in Black-ish to spell “decrease”.

Ok I think I got a little bit carried away there…enough about me, let’s get started!

P.S. this is my first published article and I hope you love it. :)

Installing node

First, open the command line and install node.js on your computer. It comes with a Node Package Manager(npm) which you can use to install Gulp. After installing, you can install Gulp by running npm install gulp -g. The **-g** instructs npm to install Gulp globally on your computer (this means that you can use gulp commands anywhere on your computer.)

Before I continue, I am assuming you are familiar with the command line!

Navigate to your project directory and run npm init. This will create a package.json file, press enter and it will add what you need into
the package.json file.

Yeah, you may be wondering what a package.json file is right?
A package.json file holds various metadata relevant to your project. This file gives information to npm and allows it to identify the project as well as handle the project’s dependencies. It also makes it easier to install all the tasks that are used in a Gulp project.

If you still don’t get it, you probably need Diane to explain it better — what is my problem/obsession with Black-ish??

After running npm-init, type npm install gulp --save-dev, this instructs npm to install Gulp into your project. By using --save-dev we store Gulp as a dev dependency in the package.json.

Creating a Gulpfile

Now that you’ve installed Gulp, you’re ready to install the first task. You have to require Gulp. Create a new file called gulpfile.js in your project directory — You can do this by using any text editor. Start by adding the code below to your gulpfile.

‘use strict’;

var gulp = require(‘gulp’);

Setting up a task

Now you can install a gulp task — in this case we would install Gulp-sass. This task makes it possible to convert Sass to CSS. Still using the command line, you can install Gulp-sass by running **npm** install gulp-sass --save-dev. After that, require Gulp-sass in your gulpfile.js.

Put var sass = require(‘gulp-sass’);under the line you required gulp.

Structuring your project

Before you use the lines below, I am also assuming you know how to structure a web app. Here I am going to use the structure of common web apps.

Compiling sass/scss

The last thing then is to instruct gulp what files it needs to convert and where the destination should be — where the output file will be stored.

Use the following;

//compile gulp.task(‘sass’, function () { gulp.src(‘app/scss/app.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘app/css’)); });

The file in gulp.src will be converted, you can also select all .scss files in a directory by using “app/scss/*.scss”. This will select all your .scss files in the folder scss.

The gulp.dest is the output. The output will be stored in the CSS folder inside the app folder.

Gulp-watch-sass

Gulp has a watch syntax which allows it to monitor source files and then “watch” for changes made to your code. Just add the syntax to your gulpfile.js by typing:

//compile and watch gulp.task(‘sass:watch’, function() { gulp.watch(‘app/scss/app.scss’, [‘sass’]);});

That’s pretty much everything you have to do! It wasn’t that stressful, or was it?

Thanks for reading!

In this article, I'm going to show a simple way to automatically minify your CSS files using gulp. ?

To start — what is gulp?

Gulp is a JavaScript task runner that lets you automate tasks such as…

• Bundling and minifying libraries and stylesheets.
• Refreshing your browser when you save a file.
• Quickly running unit tests.
• Running code analysis.
• Less/Sass to CSS compilation.
• And much more!

The gulp workflow works as follows:

We can create tasks that we would like to fulfill. In these tasks we load files that we want gulp to work on (modifying or not), then we return them to some return folder.

It’s simple.

In this little tutorial, I will teach you how to create a task to minify all CSS files in your folder. Then put the minified ones in another folder.

Let’s start

For this tutorial, make sure you have the latest version of the npm package installed on your machine. If you do not have it, you can download it here.

Once you have npm installed, in the base directory of your project we will install gulp using these commands:

npm install gulp-cli -g

npm install gulp -D

We will also use a gulp plugin to minify CSS called gulp-clean-css, so install it in the project type:

npm install gulp-clean-css --save-dev

Very good, now with the dependencies installed in the project, let’s create a file called Gulpfile.js. This file will be responsible for our tasks.

We will create two folders in this repository too. One will be called styles where our style files will stay, and another called dist where the minified files will go.

In the end, our project will have this structure:

In Gulpfile.js

At the beginning of the file, we make the calls of the packages that we will use.

With the packages called, we will create the responsible task by minifying our files.

You might be wondering — you’re already able to minify your files? Yes, by executing the gulp command in the terminal followed by the task name.

But running this command all the time is a bit annoying, isn’t it? We can create a method for observing changes to files in the styles folder.

In this way, running the gulp command will wait for changes in the selected files to activate the minify-css task.

Conclusion

This is just a small way that gulp can help us in the development of our applications.

You can find the code for this project in this repository on GitHub.

Thank you for reading, please feel free to ? and help others find it.

See you soon. ?

References

gulp.js
_By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like…_gulpjs.comgulp-clean-css
_Minify css with clean-css._www.npmjs.com

These days, using a build tool is an indispensable part of your web development workflow.

Gulp is one of the most popular build tools these days — along with Webpack.

But there’s a definite learning curve to learning Gulp. One of the biggest hurdles is figuring out the seemingly hundreds of different parts that go into it.

And on top of that, you have to do everything on the command line, which can be incredibly intimidating if you haven’t worked much with it.

This tutorial will walk you through the basics of npm (Node Package Manager) and setting up Gulp for your front-end projects. Once you’re done, you’ll feel way more confident setting up your workflow and using the command line!

So what’s the big deal with Gulp?

Gulp is a huge time saver. By using Gulp, you can let your computer handle tedious tasks, such as:

• Compiling Sass files to CSS
• Concatenating (combining) multiple JavaScript files
• Minifying (compressing) your CSS and JavaScript files
• And automatically running the above tasks when a file change is detected

Gulp can do a lot more complex tasks than the ones I’ve mentioned above. However, this tutorial will be focused on just the basics of Gulp and how it works.

Quick outline of what we’ll be doing

Here are the steps this tutorial will be going through:

1. Install Node.js and npm to your computer
2. Install Gulp and other packages needed for your project
3. Configure your gulpfile.js file to run the tasks you want
4. Let your computer do your work for you!

Don’t worry if you don’t totally understand all the terms above. I’ll explain everything one step at a time.

Now let’s get started!

Set up your environment

Node.js

In order to get Gulp up and running on your computer, you need to install Node.js onto your local environment.

Node.js is self-described as a “JavaScript runtime”, which is considered the back-end of JavaScript. Gulp runs using Node, so you understandably need to install Node before getting started.

You can download it from the Node.js website. When you install Node, it also installs npm onto your computer.

What’s npm, you ask?

Npm (Node Package Manager)

Npm is a continually updated collection of JavaScript plugins (called packages), written by developers around the world. Gulp is one of those plugins. You’ll also need a few more, which we’ll get into later.

The beauty of npm is that it allows you to install packages directly on your command line. This is great, because you don’t have to manually go to the website, download and execute the file to install.

Here’s the basic syntax to install a package:

npm install [Package Name]

Note for Mac users:
Depending on your setup, you may need to add the “sudo” keyword at the beginning to run this with root permissions.

So for Macs if would look like: sudo npm install [Package Name]

Seems pretty straightforward, right?

The node_modules folder

One thing to note: when you install an npm package, npm creates a folder called node_modules and stores all the package files there.

If you’ve ever had a project with a node_modules folder and dared to see what it contained, you probably saw that it had lots (and I mean LOTS) of nested folders and files.

Why does this happen?

Well, this is because npm packages tend to rely on other npm packages in order to run their specific function. These other packages are known as dependencies.

If you’re writing a plugin, it makes sense to take advantage of the functionalities of existing packages. No one wants to reinvent the wheel every time.

So when you install a plugin into your node_modules folder, that plugin will then install additional packages that it needs into its own node_modules folder.

And so on and so forth until you have nested folders out the wazoo.

You don’t need to worry too much about messing in the node_modules folder at this point — just wanted to briefly explain what’s going on in that crazy folder.

Keeping track of packages with package.json

Another cool feature of npm is that it can remember what specific packages you’ve installed for your project.

This is important in case you have to reinstall everything for some reason.

Also it makes life easier for other developers, because they can quickly and easily install all the packages for your project on their computers.

How does it manage to do this?

Npm utilizes a file called package.json to keep track of what packages and what package versions you have installed. It also stores other information about the project, like its name, author, and Git repository.

Creating your package.json

To initialize this file, you can again use the command line.

First, navigate to your project folder, wherever you have it located on your computer.

Then type in the following command:
npm init

Npm will then prompt you to enter in information about the project. For the majority of options, you can hit enter and use the default value that’s in parentheses.

When you’re done, npm will generate the package.json file in your project folder! If you open it up in your editor, you should see something like this:

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git"
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues"
  },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

Of course, for your project you’ll have your own name and information instead of what I have here.

At this point I wouldn’t worry about getting all the fields correct. This informational part is mainly used for packages that get published to npm as public plugins.

Now, what you will be putting into your package.json file is the list of all the packages that you need for running Gulp.

Let’s see just how you can add them in.

Installing packages

In the previous section above, we talked about typing: npm install [Package Name] into your command line to download and install the package into your node_modules folder.

It will install the package and automatically save it to your package.json file as a dependency.

Note: Prior to npm version 5.0.0, you had to add the flag “–save” in order for npm to add the package as a dependency. You no longer have to do that with versions 5 and up.

So if we want to install Gulp to our packages, we’d type in: npm install gulp.

It might take a minute or two for your computer to install everything related to Gulp. You will likely see some warning messages, but I wouldn’t worry about those unless the install fails.

Now, if you open your package.json file, you’ll see at the bottom that Gulp has been added as a dependency:

"dependencies": { "gulp": "^3.9.1" }

This list of dependencies will grow as you install additional npm packages.

Other packages needed for Gulp

Initially, we wanted to use Gulp to run tasks like compiling your SCSS/CSS and JavaScript files. To accomplish this, we’ll be using the following packages:

• gulp-sass — compiles your Sass files into CSS
• gulp-cssnano — minifies your CSS files
• gulp-concat — concatenates (combines) multiple JavaScript files into one large file
• gulp-uglify — minifies your JavaScript files

Just like before, install each package by typing these lines one by one. You’ll have to wait a few seconds while each one installs before going on to the next line.

npm install gulp-sass 
npm install gulp-cssnano 
npm install gulp-concat 
npm install gulp-uglify

Gulp-cli vs global Gulp

In the past, to be able to run “gulp” from your command line, you would have to install Gulp globally on your local computer, using the command:

npm install –global gulp

However, having a single global version of Gulp could cause issues if you have multiple projects all requiring different versions of Gulp.

The current consensus recommends installing a different package, Gulp-cli, globally instead of Gulp itself.

This will allow you to still run the “gulp” command, but you’re able to use different versions of Gulp across your different projects.

Here’s the code for that:

npm install --global gulp-cli

If you’re interested, you can read more context on this Treehouse thread.

All right, once all your packages are installed, you have all the tools you need. Let’s move on to setting up our project files!

Set up your file structure

Before we start creating files and folders, just know that there are many different ways to set up your file structure. The approach that you’ll be using is good for basic projects, but the “right” setup will depend a lot on what your particular needs are.

This basic method will help you get a grasp on the basic functionality of all the moving parts. Then you can build off or change the setup to your own liking in the future!

Here’s what the project tree will look like:

Root Project Folder

• index.html
• gulpfile.js
• package.json
• node_modules (folder)
• app (folder)
• script.js
• style.scss
• dist (folder)

We already went over the package.json file and the node_modules folder. And the index.html file will be, of course, your main website file.

The gulpfile.js file is where we’ll configure Gulp to run all the tasks we talked about at the beginning of this article. We’ll get into that in a bit.

But right now I want to mention the two folders, app and dist, as they’re important for the Gulp workflow.

App and dist folders

In the app folder, we have your basic JavaScript file (script.js) and your basic SCSS file (style.scss). Those files are where you will write all your JavaScript and CSS code.

The dist folder exists only to store the final compiled JavaScript and CSS files after Gulp has processed them. You shouldn’t make any changes in the dist files, only the app files. But these files in dist are what will be loaded in index.html, since we want to use the compiled files in the website.

Again, there are lots of ways you can set up your project files and folders. The main important thing to keep in mind is that your structure makes sense and allows you to work the most efficiently.

Now let’s get to the meat of this tutorial: configuring Gulp!

Create and configure your Gulpfile

The Gulpfile contains the code to load installed packages and run different functions. The code performs two basic functions:

1. Initialize your installed packages as Node modules.
2. Create and run Gulp tasks.

Initialize packages

In order to take advantage of all the features of the npm packages you added to your project, you need to export them as modules in Node — hence the folder name “node_modules”.

At the top of your Gulpfile, add the modules like this:

var gulp = require('gulp'); 
var cssnano = require('gulp-cssnano'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify');

Now that the packages are added, you can then use their functions and objects in your Gulpfile scripts. You’ll also be using some built-in functions that are part of Node.js.

If you want to read more about npm packages and Node modules, the npm site has a great explanation here.

Create your Gulp tasks

Creating a Gulp task is done by using the following code:

gulp.task('[Function Name]', function(){    
   // Do stuff here 
}

This allows you to run the Gulp task by typing in gulp [Function Name] into the command line. This is important because you can then run that named function from other Gulp tasks.

Specifically, we are building several different Gulp tasks, which will all be run when you run the default Gulp task.

Some of the main functions that we’ll be using are:

• .task() — Creates a task, as mentioned above
• .src() — identifies what files you will be compiling in a particular task
• .pipe() — adds a function to the Node stream that Gulp is using; you can pipe multiple functions in the same task (read an excellent write-up on this topic on florian.ec)
• .dest() — writes the resulting file to a specific location
• .watch() — identifies the files to detect any changes

If you’re curious, you can read up more on the Gulp documentation here.

All set? Now let’s get down to business (cue Mulan music) and write those tasks!

These are the following tasks that we want Gulp to run:

• Sass task to compile SCSS to a CSS file and minify
• JavaScript task to concatenate the JavaScript files and minify/uglify
• Watch task to detect when SCSS or JavaScript files are changed, and re-run the tasks
• Default task to run all needed tasks when you type gulp into the command line

Sass task

For the Sass task, first we want to create the task in Gulp using task(), and we will name it “sass.”

Then we add in each component that the task will run. First we will designate that the source will be the app/scss/style.scss file, using src(). Then we will pipe in the additional functions.

The first one runs the sass() function — using the gulp-sass module which we called “sass” at the top of the Gulpfile. It will automatically save the CSS file with the same name as the SCSS file, so ours will be named style.css.

The second one minifies the CSS file with cssnano(). And the last puts the resulting CSS file in the dist/css folder.

Here’s the code for all that:

gulp.task('sass', function(){    
    return gulp.src('app/style.scss')       
        .pipe(sass())       
        .pipe(cssnano())       
        .pipe(gulp.dest('dist/css')); 
});

To test, I just put in some filler SCSS in the style.scss file:

div {    
    display: block; 
       &.content {       
        position: relative;    
    } 
} 

.red { 
    color: red; 
}

You can run each individual Gulp task on the command line if you type gulp and the name of the task. So to test the Sass task, I typed in gulp sass to check if it works without errors, and generates the minified dist/style.css file.

If everything works correctly, you should see messaging like this in your command line:

[15:04:53] Starting 'sass'... [15:04:53] Finished 'sass' after 121 ms

Checking in the dist folder shows that there is indeed a style.css file, and opening it shows correctly-minified CSS:

div{display:block}div.content{position:relative}.red{color:red}

Ok, our Sass task is now done. On to JavaScript!

JS task

The JS Gulp task is similar to the Sass task, but has a few different elements.

First we’ll create the task and call it “js,” then we’ll identify the source files. In the src() function, you can identify multiple files a couple different ways.

One is to utilize the wildcard (*) to tell Gulp to use all files with the *.js extension like this:

gulp.src('app/*.js')

However this will compile the files in alphabetical order, which could potentially cause errors if you end up loading scripts that are dependent on other scripts before those other script files.

You can control the order by manually designating each JavaScript file if you don’t have too many script files.

The src() function can take an array of values as a parameter, by using the square brackets like this:

gulp.src(['app/script.js', 'app/script2.js'])

If you do have a lot of JavaScript files, you can make sure that you load dependencies first by keeping them in a separate sub-folder, like say “app/js/plugins”. Then keep other JavaScript files in the parent “app/js” folder.

Then you can use the wildcard notation to load all lib (library) scripts, followed by regular scripts:

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

Your approach will vary depending on the number and types of JavaScript files you have.

Once you’ve set your source files, you’ll pipe in the remaining functions. The first is to concatenate the files into one large JavaScript file. The concat() function requires one parameter with the name of the resulting file.

Then you’ll uglify the JavaScript file, and save it in the destination location.

Here’s the complete code for the JS task:

gulp.task('js', function(){    
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])          
        .pipe(concat('all.js'))       
        .pipe(uglify())       
        .pipe(gulp.dest('dist')); 
});

Just like the Sass task, you can test that the JS task works by typing in gulp js into the command line.

[14:38:31] Starting 'js'... [14:38:31] Finished 'js' after 36 ms

Now that we’ve finished our main two worker Gulp tasks, we can move on to the Watch task.

Watch task

The Watch task will watch the files that you tell it to for any changes. Once it detects a change, it will run the tasks that you designate and then continue watching for changes.

We will create two watch functions, one to watch SCSS files and the other to watch JavaScript files.

The watch() function takes two parameters: the source location, and then the tasks to run when a change is detected.

The Sass Watch function will watch any SCSS files in the app folder and then run the Sass task if it detects changes.

The function will look like this:

gulp.watch('app/*.scss', ['sass']);

For the JS Watch function, we’ll have to take advantage of a really useful Node feature called “globbing.” Globbing refers to using the “**” symbols as a kind of wildcard for folders and subfolders. We need it for the JavaScript files, because we have a JavaScript file in the app/js folder, and a JavaScript file in the app/js/plugins folder.

And here’s what that function will look like:

gulp.watch('app/js/**/*.js', ['js']);

The way the glob (“**”) works is it will look for JavaScript files anywhere in the app/js folder. It will look either directly in the folder or in any subsequent child folders, like the plugins folder. Globbing comes in handy so that you don’t have to designate each sub-folder as a separate source in the watch() function.

Here’s the complete Watch task:

gulp.task('watch', function(){       
    gulp.watch('app/*.scss', ['sass']);          
    gulp.watch('app/js/**/*.js', ['js']); 
});

Now we’re almost done! The last task to create is the default Gulp task.

Default Gulp task

The default Gulp task is what you want to run when you just type in gulp in the command line. When you create the task, you have to call it “default” in order for Gulp to recognize that that’s what you want to run.

What we’d like to do is run the Sass and JS tasks once, then run the Watch task to re-run tasks when files are changed.

gulp.task('default', ['sass', 'js', 'watch']);

You can create other tasks to run your builds, just don’t reuse the “default” name. For instance, let’s say you want to leave your CSS and JavaScript files unminified by default, but you do want to minify them for production.

You could create separate Gulp tasks to minify your CSS and JavaScript files called “minifyCSS” and “minifyJS.” Then you wouldn’t add those tasks to your default Gulp task, but you could create a new Gulp task called “prod” that has everything the default task has, and also has your minify tasks.

References in your index.html

Once you’ve gotten your Gulp process working, make sure that your index.html file references all the correct CSS and JavaScript files.

For the examples I’ve given you here, you’ll want to add a CSS reference to dist/style.css in your :

<link rel="stylesheet" href="dist/style.css">

And add a script tag referencing dist/all.js in your :

<script src="dist/all.js"><;/script>

In closing

Congrats on making it through! I hope that you found this basic Gulp tutorial helpful.

Like I mentioned at the beginning, this is just a very simple tutorial of the basics of npm and Gulp.

Most devs add many additional tasks to their Gulpfile. Let me know if you’d be interested to see another article on those more advanced topics!

Lastly, you can check out all the code from this tutorial on my GitHub account here.

I hope you found this post helpful! Let me know any thoughts you have in the comments below.

Want more?

• Read more tutorials on my blog, coder-coder.com.
• Sign up here to get emails about new articles.
• Join 25,000+ others — Follow @thecodercoder on Instagram.
• Check out coding tutorials on my YouTube channel.

This post was originally published on Coder-Coder.com.

yet another hands-on experience with Gulp.js

_Jökulsárlón, Iceland by [Jeremy Goldberg](https://unsplash.com/jeremy" rel="noopener" target="blank" title=")

Unless you’ve been living under a rock for the past few years, the number of tools at the disposal of front-end developers have grown rapidly. What we have now is a wide range of projects dedicated to speed-up, automate and increase the quality of our workflow.

For example, just imagine:

• compiling SASS/LESS/PostCSS/Stylus to a minified CSS, tailored to your needs, auto-prefixed and in real-time
• concatenating and minifying your scripts
• compressing html files created from templates and atomic modules
• preview your webapp from a virtual server during the compilation, auto-refreshed and synced to all your devices
• test your web performance
• self-updating style-guide of the project
• compressing images and creating sprites

Some years ago this sounded more like a Disneyan dream but we’re living in the future, so fear not! Grunt, Mimosa, Broccoli and Gulp to the rescue!

Each system has its own strong points. I’ve chosen Gulp for my needs but make sure to check them all out before deciding which best suits you.

So… gulp? What’s that?

gulpjs/gulp
_gulp — The streaming build system_github.com

As its site states, Gulp is a “streaming build system” which means that you can set your own tasks to be run on a pipeline, monitor a folder for a change and re-run.

And it’s super simple.

That’s ingenious, if I understand it correctly.
It’s a Swiss watch.
Yeah, the beauty of this is its simplicity.

Gulp Basic Concepts

Let’s sip through the main elements

gulp.task
aka the action you want to achieve. Managing CSS? Generating the docs?
Gulp define them with orchestrator, a module that allows us to define dependencies and maximum concurrency

gulp.task(‘somename’, function() { // Do stuff});

gulp.watch
aka the folders you want to keep checked for changes

gulp.watch(‘folder/*.ext’, [‘firstTask’, ‘secondTask’]);

Every stream originates from a source(s) matching a specific glob (a pattern that a file needs to match)

gulp.src(globs[, options])

a series of pipes (actions)

.pipe(concat()),.pipe(minify())

and a destination defined with

gulp.dest(path[, options])

To operate, gulp needs two core files, package.json and gulpfile.js.
(For the installation of gulp, follow the official docs)

Gulpfile.js

In the gulpfile we’ll declare which plugins are we going to use, the tasks we want to run, which folders we’re going to watch, etc…

Package.json

The package.json file is used to store all the information regarding the dependencies of the project (gulp included!).

• To create it

$ npm init

You’ll be prompted to enter some basic info for the heading of the file, like the author name, the project name and so on.

• To install a plugin and save the dependency on the json file

$ npm install --save-dev yourPluginName

• To uninstall a plugin and remove the dependency on the json file

$ npm uninstall --save-dev yourPluginName

• If you need to install all the dependencies from a compiled package.json

$ npm install

Project Organization

This is my approach to organize the folder of a project managed with Gulp

Plugins FTW!

Gulp has an impressing list of plugins (1895 at the time I’m writing this article)

gulp.js plugin registry
_Discover gulp.js plugins_gulpjs.com

Must Have

• gulp-load-plugins
  This lazy-loads the plugins installed in your project. You assign a variable to it, and use it to reference other plugins instead of repeating the requirement declaration for every other plugin.

var $ = require('gulp-load-plugins')();

// Example for gulp-concat.pipe($.concat('main.js'))

• browsersync
  page refresh at any change on every device connected to the same URL (localhost or LAN)
• sitespeed
  my favourite tool for performance testing
• uncss
  are you using a CSS framework like Bootstrap for a landing page?
  You NEED this.

What? How do I update Gulp plugins, you ask?

$ npm install -g npm-check-updates

$ npm-check-updates -u

$ rm -fr node_modules

$ npm install

Basically this installs npm-check-updates globally, runs it against your package.json and updates the dependency versions.
Then you just delete the node modules folder and re-install.

from: https://stackoverflow.com/questions/27024431/updating-gulp-plugins

Note: As a general rule, and as a last resort, we better clean the npm cache with

$ npm cache clean

That’s all, folks! Thank you for reaching this point!

I hope that I kept you interested enough to check some of the links that stuffed this article. They’re there because I wanted to show my support for all the great work that fellow developers are doing for the community.