Jekyll，关键CSS，HTML在一个gulp任务中缩小？

Question

我有一个基于Jekyll的网站，我希望尽可能快地完成。 我的目标是拥有一个构建Jekyll站点的gulp任务，生成关键CSS并缩小HTML。

我的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任务完成。 该网站得到了构建和缩小，但没有注入关键的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。

Answer 1

问题来自关键。 我得到它像这样工作：

_config.yml

因为我们需要解析style.scss以便为批判生成css。 从exclude数组中删除/css/style.scss 。

style.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插入。

gulpfile.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
  });
})

Bim！

Answer 2

似乎没有办法同步运行gulp任务。 但是你的shell能够运行与&&运算符同步的命令。

我现在使用一个名为gulp-shell的gulp模块。 以下是我的代码的外观：

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

所以我能够运行gulp build来按顺序运行gulp任务jekyll，critical和html。 虽然这有效，但我对这个解决方案并不满意。 如果有人知道更好的解决方案，请告诉我。

Answer 3

我通常使用Jekyll中的_includes文件夹为我做内联。 你所要做的就是gulp.dest('_includes') - 你可以连续多次调用gulp.dest() 。

gulpfile中的示例任务

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

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

请参阅上下文中的Jekyll源代码