html - Jekyll、关键 CSS、HTML 压缩在一个任务中？

Question

我有一个基于 Jekyll 的网站，我想尽快完成它。我的目标是构建 Jekyll 站点、生成关键 CSS 并缩小 HTML 的 gulp 任务。

我的 gulpfile 的一部分看起来像这样:

gulp.task("jekyll", function (gulpCallBack){
  var spawn = require("child_process").spawn;
  var jekyll = spawn('jekyll', ["build"], {stdio: "inherit"});

  jekyll.on("exit", function(code) {
    gulpCallBack(code === 0 ? null : "ERROR: Jekyll process exited with code: "+code);
  });
});

gulp.task("html", function() {
  gulp.src("./_site/index.html")
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest("./_site"))
  gulp.src("./_site/*/*.html")
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest("./_site/./"))
});

gulp.task("critical", function() {
  critical.generate({
      base: '_site/',
      src: 'index.html',
      dest: 'css/critical.css',
      minify: true,
      extract: true,
      width: 320,
      height: 480
  });

  critical.inline({
    base: '_site/',
    src: 'index.html',
    dest: 'index.html',
    minify: true
  });

})

如果我分别运行任务，gulp jekyll，然后是 gulp html，最后是 gulp critical，一切正常，如我所愿。由于我很懒，我不想每次都手动运行三个任务。我的想法是使用以下代码同步/一个接一个地运行它们。

gulp.task("jekyll", function (gulpCallBack){};
gulp.task("html", ["jekyll"], function() {};
gulp.task("critical", ["html"], function() {};

我想，我可以运行 gulp critical 等待 html 任务完成，等待 jekyll 任务完成。该网站已构建并缩小，但未注入(inject)关键 CSS。任务以正确的顺序运行。

➜  jonas.re git:(master) ✗ gulp critical
[19:21:18] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:21:18] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
            Source: /Users/j.reitmann/dev/jonas.re
       Destination: /Users/j.reitmann/dev/jonas.re/_site
      Generating... 
                    done.
 Auto-regeneration: disabled. Use --watch to enable.
[19:21:18] Finished 'jekyll' after 528 ms
[19:21:18] Starting 'html'...
[19:21:18] Finished 'html' after 5.37 ms
[19:21:18] Starting 'critical'...
[19:21:18] Finished 'critical' after 1.63 ms

同样，通过依次手动运行它们，效果非常好。

我听说过runSequence但我必须返回一个流，我不知道要为 jekyll 任务执行此操作(如果可能的话？)。也许错误有所不同，因为这有效:

➜  jonas.re git:(master) ✗ gulp jekyll  
[19:27:49] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:49] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
            Source: /Users/j.reitmann/dev/jonas.re
       Destination: /Users/j.reitmann/dev/jonas.re/_site
      Generating... 
                    done.
 Auto-regeneration: disabled. Use --watch to enable.
[19:27:50] Finished 'jekyll' after 549 ms
➜  jonas.re git:(master) ✗ gulp html    
[19:27:54] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:54] Starting 'html'...
[19:27:54] Finished 'html' after 5.56 ms
➜  jonas.re git:(master) ✗ gulp critical
[19:27:57] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:57] Starting 'critical'...
[19:27:57] Finished 'critical' after 1.66 ms

如有任何帮助，我将不胜感激。你可以看看我的整个 gulpfile here .

Answer 1

问题来自关键。我让它像这样工作:

_config.yml

因为我们需要解析 style.scss 以便生成关键的 css。从 exclude 数组中移除 /css/style.scss。

样式.scss

./_sass 路径是无用的，它是 Jekyll sass 处理器的默认路径。为了进行处理，此文件需要一个空的前端内容。

---
---
@import "_assets/fonts.scss";
@import "_assets/mixins.scss";
@import "_assets/reset.scss";
@import "_assets/colors.scss";
@import "_assets/syntax-highlighter.scss";
@import "_modules/header.scss";
@import "_modules/content.scss";

_includes/head.hmtl

关键需要原始样式表的链接。去掉css加载脚本，替换成

<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">

加载脚本会被critical插入。

gulp文件.js

您现在可以链接您的任务。请注意，我已将关键方法更改为 generateInline。

gulp.task("jekyll", function (gulpCallBack){
...

gulp.task("html", ["jekyll"], function() {
...

gulp.task("critical", ["html"], function() {
  critical.generateInline({
      base: '_site/',
      src: 'index.html',
      dest: 'css/critical.css',
      htmlTarget: 'index.html',
      minify: true,
      extract: true,
      width: 320,
      height: 480
  });
})

叮!