杰基尔，关键的CSS，HTML缩小在一个狼吞虎咽的任务？

我有一个基于杰基尔的网站，我想让它尽可能快。我的目标是拥有一个构建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() {};

我想，我可以运行

gulpcritical

，等待html任务完成，等待jekyll任务完成。该网站得到了建设和缩小，但关键的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

同样地，通过手动逐个运行它们，它可以完美地工作

我听说过，但是我必须返回一个流，我不知道如何为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

---

我将非常感谢任何帮助。你可以看一下我的整个文件。

这个问题来自严重的问题。我让它像这样工作：

_config.yml 因为我们需要解析

style.scss

，以便为Critical生成css。 从

排除
数组中删除
/css/style.scss

style.scss
/\u 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";

_包括/head.hmtl
Critical需要一个到原始样式表的链接。
删除css加载脚本并将其替换为

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

比姆
 似乎没有真正的方法来同步运行gulp任务。但是shell能够与
&&
操作符同步运行命令

我现在使用了一个名为“吞咽”的模块。下面是我的代码的外观：

gulp.task('build', shell.task([
    'gulp jekyll && gulp critical && gulp html'
]));

因此，我可以只运行
gulpbuild
来按顺序运行gulp任务jekyll、critical和html。虽然这是可行的，但我对这个解决方案并不满意。如果有人知道更好的解决方案，请告诉我。
我通常使用Jekyll中的
\u includes
文件夹为我进行内联。您只需
gulp.dest（“\u includes”）
-您可以连续多次调用
gulp.dest（）


然后在Jekyll中向主页模板添加一行：

<style type="text/css">{% include main.min.css %}</style>

{%include main.min.css%}

我真为这么晚才回复感到羞愧。我知道Jekyll sass处理器，但想将我的gulp任务用于Autoprefixer之类的事情。我将立即发布我的尝试/解决方案，尽管它并不真正令人满意。
<style type="text/css">{% include main.min.css %}</style>