gruntjs - Grunt，使用 Jekyll Serve 进行实时重新加载

Question

我熟悉带有监视任务的连接服务器方法，该任务发出 Jekyll 构建信号。这很好，但我更喜欢内置的 Jekyll Serve，它具有快速再生功能，而不是构建。

是否可以在 Grunt 中将 Jekyll Serve 与 Live Reload 结合使用？本质上，每次您进行更改时，Jekyll Serve 都会说“正在重新生成”，您无需刷新即可在浏览器中看到更改。

也很高兴使用 Chrome Live Reload 扩展程序。

注意:我知道这可以使用 Guard 来实现，但我希望有一个完整的 Grunt 解决方案。

谢谢!

Answer 1

这是我如何让它发挥作用的:

问题是 jekyllserve 和 grunt watch 都需要并行运行。我所做的是创建两个 grunt 任务并在两个单独的终端窗口中运行它们。 我有以下设置:

• 一个 _src 目录，我在其中编辑原始源文件
• 一个 asset 目录，其中包含图像等
• 一个由 grunt 填充的 build 目录，并且在其中运行 jekyll

首先，我运行 grunt dev 任务。该任务首先删除构建目录，然后复制必要的源文件，最后将 cds 到我的构建目录中并调用 jekyll:

cd build && jekyll serve --livereload

此任务配置如下:

grunt.registerTask(
  'assembledev',
  [
    'copy:src',
    'copy:assets'
  ]
);
grunt.registerTask(
  'dev',
  [
    'clean',
    'assembledev',
    'exec:serve'
  ]
);

然后，在一个单独的终端中，我运行 grunt watch。 watch 配置如下:

watch {
  src: {
    files: ['{_src,assets}/**/*.{js,css,html,php}'],
    tasks: ['assembledev']
  }
}

现在，每当我更改源文件时，更新的文件都会被复制到构建目录，然后被 jekyll 识别为已更改的文件。

这两个终端窗口感觉有点像黑客，但这样我就可以看到 grunt watch 和 jekyllserve 的输出。另外，我可以使用 Ctrl+c 轻松退出任一进程。

原则上，您可以通过在 jekyllserve 命令末尾添加 & 来摆脱一个终端窗口的困扰，以便在后台运行 jekyll (cd build && jekyllserve --livereload &) 并在同一个 grunt 任务中运行 watch，如下所示:

grunt.registerTask(
  'dev',
  [
    'clean',
    'assembledev',
    'exec:servebg',
    'watch'
  ]
);