Jekyll、关键 CSS、HTML 在一个 gulp 任务中缩小？答案

【问题标题】：Jekyll, critical CSS, HTML minify in one gulp task?Jekyll、关键 CSS、HTML 在一个 gulp 任务中缩小？
【发布时间】：2015-03-13 18:31:47
【问题描述】：

我有一个基于 Jekyll 的网站，我想让它尽可能快。我的目标是有一个 gulp 任务来构建 Jekyll 站点，生成关键的 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 here。

【问题讨论】：

标签： html gulp jekyll

【解决方案1】：

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

_config.yml

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

style.scss

./_sass 路径没用，它是 Jekyll sass 处理器的默认路径。为了被处理，这个文件需要一个空的front matter。

---
---
@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

Critical 需要一个指向原始样式表的链接。去掉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
  });
})

比姆！

【讨论】：

不好意思这么晚才回复。我知道 Jekyll sass 处理器，但想将我的 gulp 任务用于 Autoprefixer 之类的东西。我现在会发布我的尝试/解决方案，尽管它并不令人满意。

【解决方案2】：

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

我现在使用一个名为 gulp-shell 的 gulp 模块。这是我的代码的样子：

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

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

【讨论】：

【解决方案3】：

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

Sample task in gulpfile

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

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

See the Jekyll source code in context

【讨论】：