Why is 'inline' called after 'scss' in this gulpfile?

Question

I'm trying understand some of the details of this gulpfile from foundation-emails-template.

Here is an excerpt from the file for the part I am curious about:

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
  gulp.series(clean, pages, sass, images, inline));

As you can see, the build task calls a bunch of methods in order. One of them is the sass method, and one following that is the inline method:

// Compile Sass into CSS
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
    .pipe($.sass({
      includePaths: ['node_modules/foundation-emails/scss']
    }).on('error', $.sass.logError))
    .pipe($.if(PRODUCTION, $.uncss( // <- uncss happening here
      {
        html: ['dist/**/*.html']
      })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/css'));
}

// Inline CSS and minify HTML
function inline() { // <- Inlining happening here
  return gulp.src('dist/**/*.html')
    .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
    .pipe(gulp.dest('dist'));
}

So, the sass method gets called first, which compiles the sass files into a single app.css. Part of this method also says to use uncss to remove unused css from the html files. The inline method is responsible for inlining the css into those html files.

I am confused why this works correctly. How is it that inline can be called after scss? The inline method places css in the html files that the scss method "uncss-es", yet it's called afterwards.

This seems to work correctly, so clearly I am just not understanding some sort of basic concept with gulp. Can anyone explain how this works?

Answer 1

Uncss removes unused css rules from your app.css file. It scans your html files and removes any rules for which it can find no selector, via querySelector() in the html file. So app.css has been cleansed before it is then inlined into your html files. This is order you would want. The css is cleaned, not the html.