Introduction to Gulp 4.x

There is a really great article written on CSS tricks called 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 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, we need to start by installing Gulp into our project, to do this, run the following command from the root of your project folder

$ 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

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:

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.

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.

$ npm install gulp-sass --save-dev

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

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

We then need to create our sass task

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.

$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.

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.

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.

$ 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 - vendor-agnostic CSS
• Sourcemaps - easier debugging of compiled CSS and JS

Comments

[Lawrence]

Your cb never gets called back here since it comes after a return statement, fyi.

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();
}