Introduction to Gulp 4.x
Tags: javascript, gulp, sass, scss
Published: 2019-07-01 12:18:49

---
title: Introduction to Gulp 4.x
published: true
description: 
tags: JavaScript, Gulp, SASS, SCSS
---

There is a really great article written on CSS tricks called [Gulp for beginners](https://css-tricks.com/gulp-for-beginners/) which covers this topic far better than I could, however, unfortunately, it is related to Gulp 3.x, which has changed not insignificantly with the later release of Gulp 4.x

At [iO Academy](https://io-academy.uk) we used to use the CSS Tricks article for reference, this article is an attempt to recreate the tutorial points from the CSS Tricks article with updated examples for Gulp 4.x. If you want an introduction to what Gulp is and why we use it, I strongly suggest the previously mentioned article.

# Installing Gulp

Assuming you have [Node and NPM installed](https://nodejs.org/), we need to start by installing Gulp into our project, to do this, run the following command from the root of your project folder

```bash
$ npm install gulp --save-dev
```
> Note: this installs Gulp to your current project as a dev dependency, make sure you have created a new project folder and have navigated into that folder before running this command.

If you check the project folder when the command has finished executing, you should see that `npm` has created a `node_modules` folder. You should also see a `gulp` folder within `node_modules`. 

Now that we have Gulp installed we can start to use it, we are going to assume the following directory structure, if you are using a different one, you may need to adjust your gulp JS to suit.

```
  |- app/
      |- css/
      |- index.html
      |- js/ 
      |- scss/
  |- gulpfile.js
  |- node_modules/
  |- package.json
```

# Creating your first Gulp task

First we need to require Gulp into your gulpfile.js

```javascript
var gulp = require('gulp');
```

We can now begin to write a gulp task with this gulp variable. The basic syntax of a gulp task is:

```javascript
function taskName(cb) {
  // code for your task here
  cb();
}

exports.taskName = taskName;
```

Replace all occurrences of `taskName` in the above example for the name of the command you wish to use when running gulp, i.e `gulp taskName`

An example of this would look something like this.

```javascript
function hello(cb) {
  console.log('hello');
  cb();
}

exports.hello = hello;
```

Which you can then run from the command line using `gulp hello`.


# Sass with Gulp

Now that we have set up Gulp, we are going to use it compile our Sass. First we need to install the gulp-sass module as a dev dependency.

```bash
$ npm install gulp-sass --save-dev
```

As before, we then need to require this into our gulpfile.js

```javascript
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
```

We then need to create our sass task

```javascript
function sassCompile(cb) {
  return gulp.src('app/scss/style.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'));
  cb();
}
exports.sass = sassCompile;
```

Once the task is setup, we can test that it works by creating a `style.scss` file inside the `app/scss` folder and adding some Sass to it. Below is some example code for you.

```scss
$blue: #0000ff;

body {
  background: $blue;
}
```

If you run `gulp sass` in the command line, you should see that a `styles.css` file was created in `app/css` and was compiled to css.

The above example compiles a single file into a single file, while there are different CSS architectural approaches, generally I recommend using Sass imports in a single base file such as style.css to then import all your seperate CSS files. If you are using a different pattern however you may want to compile more than a single file, you can do this using wildcard selectors, or Node globs, by replacing the src with something like the below. This will compile all .scss files inside `app/scss` as well as all child directories of that folder. Each scss file will become the equivilent css file.

```javascript
app/scss/**/*.scss
```

# Auto-compiling scss files

While being able to compile our scss files with a single easy command is great, it's not particularly practical, instead we want to create a watcher that will auto-compile our sass any time it detects a change.


We can do this by setting up a gulp watcher. Using a similar syntax to the gulp task, we first create a named function and call `gulp.watch`. This takes 2 arguments, the file pattern to watch (all `.scss` files in this example) and the function to run when any of those files change.
```javascript
function watch() {
  gulp.watch('app/scss/**/*.scss', sassCompile);
}


exports.watch = watch; // dont forget to export your command!
```

> Note: The files to watch are *all* `.scss` files, not just the main `style.scss`, otherwise it will not auto-compile when any file changes. The file in the `sassCompile` function should still only point at the `style.scss` file, so that it only compiles that file (and everything it includes) when the watcher is triggered.

You can use this watch function for any other watchers you may need, so you can start all your watchers with a single command.
```bash
$ gulp watch
```

There are lots of other useful things you can do with Gulp, some of the things you may want to look into are included below.

- [Autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) - vendor-agnostic CSS
- [Sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) - easier debugging of compiled CSS and JS