CODEWITHSUNDEEP
gruntjsjekylllivereload
Rhys
Rhys

Reputation: 489

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!

Upvotes: 2

Views: 446

Answers (3)

Thawn
Thawn

Reputation: 785

Here is how I got this to work:

The problem is that both jekyll serve and grunt watch need to run in parallel. What I did was to create two grunt tasks and run them in two separate terminal windows. I have the following setup:

  • a _src directory where I edit the raw source files
  • an asset directory where I have images and such
  • a build directory that gets populated by grunt and inside which jekyll is run

First, I run the grunt dev task. This taskfirst deletes the build directory, then copies the necessary source files and finally cds into my build directory and calls jekyll: 

cd build && jekyll serve --livereload

This task is configured as follows:

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

Then, in a separate terminal, I run grunt watch. Watch is configured as follows:

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

Now, whenever I change a source file, the updated file gets copied to the build directory and then recognized by jekyll as a changed file.

The two terminal windows feel like a bit of a hack but that way, I can see the output of both grunt watch and jekyll serve. Also, I can easily quit either process with Ctrl+c.

In principle, you could get away with one terminal window by adding an & to the end of the jekyll serve command in order to run jekyll in the background (cd build && jekyll serve --livereload &) and run watch within the same grunt task like this:

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

Upvotes: 2

jasonetco
jasonetco

Reputation: 356

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

Upvotes: 0

cmlonder
cmlonder

Reputation: 2520

It is possible with using yeoman which is

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

as described. There are lots of generators in yeoman's homepage which helps you create your project quickly. By the way, we are looking for a generator which includes Jekyll project is served by Grunt, jeklyrrb is a great solution. Despite it comes with Grunt, it also helps you with

  • 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

  • ...

There are some steps you should do and possible problems you will face during installation of jekyllrb. Those are steps how i have solved them so far

Installation

npm install -g yo grunt-cli bower

npm install -g generator-jekyllrb

after installed yeoman, its requirements(grunt and bower) and generator globally, create your working directory and cd in it. Than start yeoman:

yo jeykllrb

Problem

Path/sudo problems while installing gems.

Solution

Installing rvm

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

Problem

pygments deprecation problem

Solution

change

pygments: true

to

highlighter: pygments

Upvotes: 0

Related Questions