Using Gulp

A Walkthrough of Udacity Part 3, Lesson 16

This post assumes you are following along with a Udacity course. If you are not in the FEND Nanodegree program, you can follow along with Udacity's Web Tooling and Automation Course

**Note regarding Gulp 3 versus Gulp 4: The course was written in Gulp 3. If you choose to use Gulp 4, or you mistakenly downloaded the most recent version, I will also be letting you knwo the changes necessary to make sure your gulpfile.js works with Gulp 4

Note regarding variables and ES6: The course was written before ES6 variables (let and const were used regularly. I am going to be using them instead of var in this post, but either one will work.

Default Task

The first thing we do with gulp is a default task.

const gulp = require('gulp');

          gulp.task('default', function() {

          

        });

The first line const gulp = require('gulp'); is telling Node.js that we need to use gulp, and we are going to refer to it as gulp.

Next we are defining the 'default' task, which is just a function! The word 'default' is a keyword that comes with gulp. It means that this function is the one that will be run when we type gulp in the terminal by itself.

Sass

Sass is a cool tool that makes CSS less terrible to write and work with. The problem is, when we write in Sass, the code is not readable by the browser. We need to transpile it into CSS code, which is readable by the browser. One way of doing this is with Gulp.

We start by installing gulp-sass by typing npm install gulp-sass. This installs gulp-sass locally- so just in your project folder. If you want to use it in another project, you will have to install it again.

At the top of your file const sass = require('gulp-sass');
This looks familiar!

For Gulp 3:

gulp.task('styles', function() {
        gulp.src('sass/**/*.scss')
          .pipe(sass())
          .pipe(gulp.dest('./css'));
        });

For Gulp 4:

gulp.task('styles', function(done) {
        gulp.src('sass/**/*.scss')
          .pipe(sass())
          .pipe(gulp.dest('./css'));
          done();
        });

We are adding a new gulp task (a function for gulp to run), called 'styles'. In order to run this task, you will type gulp styles into the terminal. gulp.src('sass/**/*.scss') is telling gulp where the files are that we want to run the task on. .pipe(sass()) Telling gulp to take those files retreievd from that src command and run it through sass. Running it through sass with transpile it into css code. The last line, .pipe(gulp.dest('./css')); is telling gulp where it should put these new css files.

If you are using Gulp 4, just one thing needs to change, the task needs a way to know when sass is finished. It has a built-in function that does that, but you need to use it here, or else you will get an error. All you need to do is add done to the arguments list of the function, and then call done() once at the end of the function. See above. Anytime you get this error: The following tasks did not complete: styles-test Did you forget to signal async completion?, you can likely fix it by adding done and done()!

When Sass encounters an error, it just stops. We most likely don't want this behavior. We want Sass to finish and just log the error. We do this by adding .on('error', sass.logError)) after .pipe(sass)

So the complete new code for the styles task will be:

For Gulp 3:

gulp.task('styles', function() {
        gulp.src('sass/**/*.scss')
          .pipe(sass()).on('error', sass.logError)
          .pipe(gulp.dest('./css'));
        });

For Gulp 4:

gulp.task('styles', function(done) {
        gulp.src('sass/**/*.scss')
          .pipe(sass()).on('error', sass.logError)
          .pipe(gulp.dest('./css'));
          done();
        });

Autoprefixer

Autoprefixer is another tool that makes it easier for us to write CSS. It adds vendor prefixes when necessary. For more information about vendor prefixes, please check out MDN.

First we install! We are getting good at this part! npm install gulp-autoprefixer

And at the top of our gulpfile.js const autoprefixer = require('gulp-autoprefixer');

Since Autoprefixer works on CSS files, we can use it in the same task as our Sass. After we run sass, we will run autoprefixer. We also tell autoprefixer that we want it to work with the last 2 browser versions, though we can change this if we like.

Our new styles task with Autoprefixer:

For Gulp 3:

gulp.task('styles', function() {
        gulp.src('sass/**/*.scss')
          .pipe(sass()).on('error', sass.logError)
          .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
          .pipe(gulp.dest('./css'));
        });

For Gulp 4:

gulp.task('styles', function(done) {
        gulp.src('sass/**/*.scss')
          .pipe(sass()).on('error', sass.logError)
          .pipe(autoprefixer({
            browsers: ['last 2 versions']
          }))
          .pipe(gulp.dest('./css'));
          done();
        });