Grunt, Live Reload with Jekyll Serve

I'm familiar with the Connect server method with a watch task which signals a Jekyll Build. It's good, but I'd prefer the built in Jekyll Serve which has the fast regeneration instead of build.

Is it possible to use Jekyll Serve with Live Reload in Grunt? Essentially, every time you make a change, Jekyll Serve would say "Regenerating" and you could see the changes in the browser without a refresh.

Happy to use the Chrome Live Reload extension too.

Note: I know this can be achieved using Guard, but I was hoping for a whole Grunt solution.

Thanks!


Grunt Watch and Livereload (Using BrowserSync) in Jekyll « Karthik's, It's good, but I'd prefer the built in Jekyll Serve which has the fast regeneration instead of build. Is it possible to use Jekyll Serve with Live Reload in Grunt? Is it possible to use Jekyll Serve with Live Reload in Grunt? Essentially, every time you make a change, Jekyll Serve would say "Regenerating" and you could see the changes in the browser without a refresh. Happy to use the Chrome Live Reload extension too. Note: I know this can be achieved using Guard, but I was hoping for a whole Grunt solution.


Grunt, Live Reload with Jekyll Serve - gruntjs - iOS, Basically, it works as a Grunt project that uses grunt-contrib-watch plugin's support for livereload. It also bypasses Jekyll's built-in web server  Tags: Jekyll Grunt Livereload Devtools. Introduction. I have been using Jekyll for this site for more than two years. Jekyll is a great tool for static site creation, and the Jekyll sites can be hosted on Github. I had one tiny problem I have to use jekyll serve --watch and reload the page mannually. This is not a show stopper but it helps when


Rather than using jekyll serve, you can use the Grunt plugin 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.

Your Gruntfiles.js would look a little like this:

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']);
};

Creating GitHub Pages With Jekyll & LiveReload, A Gruntfile to LiveReload (it should be called LOveReload IMHO ;=D ) Jekyll 1 - http://blog.parkji.co.uk/2013/08/12/jekyll-build-and-serve-using-grunt.html. It's possible to have a livereload (or browsersync) like system that run with jekyll serve without using other tools like grunt/gulp?. What I'm expecting is to edit a css, sass, html or md file and have the browser page auto reloading.


Grunt file for Jekyll LiveReload · GitHub, LiveReload refreshes your browser after a change. port. Type: string or number. Listen on the given port (requires serve ). The grunt build just compiles everything once without drafts (so no need for any copying or watching here). This can be used before a commit instead of jekyll build now. And than the grunt serve command, which will use everything we just build to build and serve the site, just like jekyll serve does, but with all the sweetness and configurability.


dannygarcia/grunt-jekyll: Straightforward grunt.js Jekyll , This blog is built using Jekyll & I'm a huge fan of it for building blogs You can also introduce live reload into the mix because this is built into  grunt-jekyll-pages. Serve GitHub-flavored sites natively using Jekyll. grunt-jekyll-pages is for anyone working with GitHub Pages. This plugin emulates how Github Pages runs Jekyll in safe mode on Linux or Mac OS. It also provides a number of options (build, serve, watch, etc.) for dev and testing purposes. The npm package is available publicly.


Jekyll build and serve using Grunt—blog.ParkJi.co.uk, With the release of Jekyll 3.7 in January of 2018, LiveReload support was You can use it via the command: bundle exec jekyll serve --livereload of dated posts about using Grunt, Gulp, Browsersyc, guard-livereload , a  Jekyll Task. Run this task with the grunt jekyll command.. This task helps you compile your Jekyll static site with Grunt. Jekyll Subcommands. serve. Type: boolean Default: false