为什么在这个 gulpfile 中 'inline' 在 'scss' 之后调用？

Question

中了解此 gulp 文件的一些细节

以下是文件中我感兴趣的部分的摘录：

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

如你所见，build任务按顺序调用了一堆方法。其中之一是 sass 方法，紧随其后的是 inline 方法：

// 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'));
}

因此，首先调用 sass 方法，它将 sass 个文件编译成单个 app.css。此方法的一部分还说使用 uncss 从 html 文件中删除未使用的 css。 inline 方法负责将 css 内联到那些 html 文件中。

我很困惑为什么这能正常工作。为什么在scss之后可以调用inline？ inline 方法将 css 放置在 html 文件中，scss 方法 "uncss-es"，但之后会调用它。

这似乎工作正常，很明显我只是不理解 gulp 的某种基本概念。谁能解释一下这是如何工作的？

Answer 1

Uncss 从您的 app.css 文件中删除未使用的 css 规则。它会扫描您的 html 文件，并通过 html 文件中的 querySelector() 删除任何找不到选择器的规则。因此 app.css 在被内联到您的 html 文件之前已经被清理干净。这是您想要的顺序。 css 被清理，而不是 html。

为什么在这个 gulpfile 中 'inline' 在 'scss' 之后调用？

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

zurb-foundation

gulp

uncss

gulp-uncss