Question

我熟悉Connect服务器方法和一个表示Jekyll Build的监视任务。这很好，但我更喜欢内置的Jekyll Serve，它具有快速再生而不是构建。

是否可以在Grunt中使用Jekyll Serve和Live Reload？基本上，每次进行更改时，Jekyll Serve都会说“重新生成”，您可以在不刷新的情况下看到浏览器中的更改。

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

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

谢谢！

Answer 1

以下是我如何使用它：

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

我编辑原始源文件的_src目录
asset目录，我有图像等
由{grunt填充的build目录以及运行jekyll的目录

首先，我运行grunt dev任务。这个taskfirst删除构建目录，然后将必要的源文件和最后的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和jekyll serve的输出。此外，我可以使用 Ctrl + c 轻松退出任一进程。

原则上，您可以通过在jekyll serve命令的末尾添加&来终止一个终端窗口，以便在后台运行jekyll（cd build && jekyll serve --livereload &）并运行{{1在这样的grunt任务中：

watch

Answer 2

可以使用yeoman

Yeoman帮助您启动新项目，规定最佳实践和工具，以帮助您保持工作效率。

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

使用Autoprefixer自动CSS供应商前缀
默认的Jekyll或HTML5 Boilerplate模板内置的Compass，Sass或vanilla CSS
使用BrowserSync预览服务器
使用Jshint和/或
进行代码质量检查
CoffeeLint，CssLint和jekyll医生
...

您应该执行一些步骤以及在安装jekyllrb时可能遇到的问题。这些是迄今为止我如何解决它们的步骤

安装

npm install -g yo grunt-cli bower

npm install -g generator-jekyllrb

安装yeoman后，它的要求（grunt和bower）和生成器全局，创建你的工作目录并在其中cd。比启动自耕农：

yo jeykllrb

问题

安装宝石时出现

路径/ sudo问题。

解决方案

安装rvm

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

问题

pygments弃用问题

解决方案

变化

pygments: true

到

highlighter: pygments

Answer 3

您可以将Grunt插件grunt-jekyll与grunt-contrib-watch以及任何一些Grunt插件结合使用来“提供”您编译的文件，而不是jekyll serve browser-sync。 }或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']);
};

Grunt，与杰基尔一起重新加载服务

3 个答案:

安装

问题

解决方案

问题

解决方案