Grunt，使用 Jekyll Serve 实时重新加载

Question

我熟悉 Connect 服务器方法，它有一个 watch 任务，它会发出 Jekyll Build 的信号。这很好，但我更喜欢内置的 Jekyll Serve，它具有快速再生而不是构建。

是否可以在 Grunt 中使用 Jekyll Serve 和 Live Reload？本质上，每次您进行更改时，Jekyll Serve 都会说 "Regenerating" 并且您可以在浏览器中看到更改而无需刷新。

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

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

谢谢！

Answer 1

可以使用 yeoman 即

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

如所述。 yeoman 的主页上有很多生成器，可以帮助您快速创建项目。顺便说一句，我们正在寻找一个包含 Jekyll 项目的生成器，该项目由 Grunt 提供，jeklyrrb 是一个很好的解决方案。尽管它与 Grunt 一起提供，但它也可以帮助您

Automatic CSS vendor prefixing with Autoprefixer
Default Jekyll or HTML5 Boilerplate templates Compass, Sass, or vanilla CSS Built in
preview server with BrowserSync
Code quality checks with Jshint and/or
CoffeeLint, CssLint, and jekyll doctor
...

在安装 jekyllrb 的过程中，您应该执行一些步骤以及可能遇到的问题。这些是我到目前为止解决它们的步骤

安装

npm install -g yo grunt-cli bower

npm install -g generator-jekyllrb

在安装了 yeoman 之后，它的要求（grunt 和 bower）和全局生成器，创建你的工作目录并在其中 cd。比开始约曼：

yo jeykllrb

问题

Path/sudo 安装 gems 时出现问题。

解决方案

正在安装 rvm

\curl -sSL https://get.rvm.io | bash -s stable --ruby

问题

pygments 弃用问题

解决方案

改变

pygments: true

至

highlighter: pygments

Answer 2

除了使用 jekyll serve，您还可以使用 Grunt 插件 grunt-jekyll in combination with grunt-contrib-watch and any of a few Grunt plugins to "serve" your compiled files like browser-sync or grunt-express。

您的 Gruntfiles.js 看起来有点像这样：

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        jekyll: {
            working: {
              options: {
                config: '_config.yml',
                drafts: true
              }
            }
        },

        watch: {
            jekyll: {
                files: [
                    '**/*.md',
                    '*.html',
                    '*.md',
                    '!_site/**/*' // Stops watch from triggering again after Jekyll compiles
                ],
                tasks: ['jekyll']
            },

            options: {
                livereload: true
            }
        }

        browserSync: {
            dev: {
                bsFiles: {
                    src : [
                        'css/*.css',
                        ' *.html',
                        '**/*.html'
                    ]
                },
                options: {
                    watchTask: true,
                    server: './_site'
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.loadNpmTasks('grunt-jekyll');

    grunt.registerTask('default', ['jekyll', 'browserSync', 'watch']);
};

Answer 3

这是我如何让它工作的：

问题是 jekyll serve 和 grunt watch 都需要并行运行。我所做的是在两个单独的终端 windows 中创建两个 g运行t 任务并运行它们。我有以下设置：

我编辑原始源文件的 _src 目录
一个 asset 目录，我有图像等等
一个 build 目录，由 g运行t 填充，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 {
  src: {
    files: ['{_src,assets}/**/*.{js,css,html,php}'],
    tasks: ['assembledev']
  }
}

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

两个终端 windows 感觉有点乱，但是那样的话，我可以看到 grunt watch 和 jekyll serve 的输出。此外，我可以使用 Ctrl+c 轻松退出任一进程。

原则上，您可以通过在 jekyll serve 命令的末尾添加一个 & 来摆脱一个终端 window，以便运行 jekyll 在后台运行（cd build && jekyll serve --livereload &) 和运行 watch 在同一个 g运行t 任务中，像这样：

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

Grunt，使用 Jekyll Serve 实时重新加载

Grunt, Live Reload with Jekyll Serve

jekyll

gruntjs

livereload

安装

问题

解决方案

问题

解决方案