Почему в этом gulpfile слово "inline" называется после "scss"?

Question

Я пытаюсь понять некоторые детали этого gulpfile из Foundation-Email -шаблона.

Вот выдержка из файла той части, которая мне интересна:

// 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 удалить неиспользуемые CSS из HTML-файлов. inline Метод отвечает за встраивание CSS в эти HTML-файлы.

Я запутался, почему это работает правильно. Как это так inline можно назвать после scss? inline Метод помещает CSS в HTML-файлы, которые scss метод "uncss-es", но он вызывается потом.

Кажется, это работает правильно, так что ясно, что я просто не понимаю какую-то базовую концепцию с глотком. Кто-нибудь может объяснить, как это работает?

Answer 1

Uncss удаляет неиспользуемые правила CSS из вашего файла app.css. Он сканирует ваши html-файлы и удаляет все правила, для которых он не может найти селектор, с помощью querySelector() в html-файле. Таким образом, app.css был очищен перед тем, как встраиваться в ваши html-файлы. Это заказ, который вы хотели бы. CSS очищен, а не HTML.