Running SASS in a Gulp.js Build Process: Globs and the Watch Task

Where We Ended Up

Our gulpfile.js file looked like this at the end of the previous exercise:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function(){
  return gulp.src('../myproject/sass/style.scss')
  .pipe(sourcemaps.init())
  .pipe(sass().on('error',sass.logError))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('../myproject'))
});

It’s working, but it’s looking for only a single scss file. In this part of the exercise, we’ll get gulp to look at any number of files.

Add Some More SASS Files

First, create the following additional folders and files in the sass folder:

• reset/_normalize.scss
• typography/_headings.scss
• variables/_variables.scss
• print/_print.scss

Inside the _normalize.scss file, copy the normalize.css reset stylesheet from the Nicolas Gallagher website.

Inside the _print.scss file, add the following:

@media print {
p {
  font-size: 11pt;
  line-height: 12pt;
}
}

Cut the variables from style.scss and put them into the _variables.scss file.

Cut the h1 style from the style.scss file and put it in the _headings.scss file.

Now change the style.scss file to the the following:

@import 'reset/normalize';
@import 'variables/variables';
@import 'typography/typography';
@import 'print';

In other words, we’re here using sass partials to make our code much more modular and extensible.

Run the gulp sass command again.

If there are any errors, they will be output to the command line. Fix them if you can, then run the command again. If there are no errors, the compiled style.css should now contain a lot more code, starting with normalize.

Creating a Watch Task

Because it’s tedious to return to the command line to manually invoke our SASS command, it’s time to create a WATCH task. What we want to happen is for SASS to automatically compile the style.css file whenever any file inside the sass directory is changed (ie when a change is saved).

To do that we will use globs, which are like wildcards or regular expressions for file paths, to make our gulp.src function cast a wider net.

To illustrate, change the SRC argument path as follows.

  return gulp.src('../myproject/**/*.scss')

The ** means any folder and the *.scss means any file that ends with .scss.

If we run the gulp sass command again, our output style.css will be the same because our chain of partials all feed into style.scss. However, if we had other scss files that weren’t partials, their corresponding CSS files would be generated here.

Why we have done this will become clear in the next step.

Another Task for the GulpFile

Add a WATCH task to the gulp file, after the SASS task:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function(){
  return gulp.src('../myproject/sass/style.scss')
  .pipe(sourcemaps.init())
  .pipe(sass().on('error',sass.logError))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('../myproject'))
});

gulp.task('watch', function(){
  gulp.watch('../myproject/**/*.scss',gulp.series('sass'))
});

Now go to the command line and run this new task: gulp watch

In the command line, you will see starting ‘watch’ …

Now edit the _print.scss file. Add the following (inside the query) and save:

.ad {
  display: none;
}

Once you save, the sass compilation process should invoke. In the command line, you will see the “starting” and “finishing” messages. Now go check the style.css file: you should see the additional print style at the bottom of the page.

Now add one more style inside the print query:

  body {
    max-width: 10in;
    margin: .125in;
  }

Once you save, the SASS compilation process should run again, and the new style should be included in the generated style.css file.