0

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?

flyingL123
  • 7,686
  • 11
  • 66
  • 135

1 Answers1

0

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.

Mark
  • 143,421
  • 24
  • 428
  • 436
  • Oh wow. So you’re saying that uncss scans the html file for linked stylesheets and then removes unused rules from those? – flyingL123 Nov 23 '17 at 00:50
  • Oh wait, I think I still have it wrong. The `sass` function is told to process the `app.scss` file, and it's being given the `html` parameter to tell it what html it should be scanning to figure out which styles from `app.scss` aren't needed. Is that right? – flyingL123 Nov 23 '17 at 12:20
  • 1
    For gulp-uncss, the uncss plugin doesn't need to scan the html for linked css files it gets the css directly from the stream. It then scans the html to see which of those css rules are not used - like some class in your scss file (that is now a css file) - that is never referred to in the html file (class="notUsed"). It can also scan javascript files that are loaded on page load for css selectors. It cannot look for javascript that is later executed like adding a class after a button click for example. – Mark Nov 24 '17 at 21:03