0

我正在尝试从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放在方法“uncss-es”的html文件中scss，但随后会调用它。

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

4

1 回答 1

0

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

于 2017-11-22T23:33:09.923 回答