Question

我正在尝试从foundation-emails-template了解这个gulpfile的一些细节。

以下是我对此感到好奇的文件的摘录：

// 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文件中。

我很困惑为什么这种方法正常。如何在inline之后调用scss？ inline方法将css放在scss方法“unss-es”的html文件中，但之后会调用它。

这似乎工作正常，所以显然我只是不了解某种基本概念与gulp。任何人都可以解释这是如何工作的吗？

Answer 1

Uncss从app.css文件中删除未使用的css规则。它会扫描你的html文件，并通过html文件中的querySelector（）删除它找不到任何选择器的规则。所以app.css在被内联到你的html文件之前已经被清理了。这是你想要的订单。 css是清理的，而不是html。

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

1 个答案: