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源代碼