grunt watch & connect

Question

I am kinda new to grunt and want to use it with Jekyll and some LESS-compiling.

My problem now is, I already have fully functioning LESS-comipiling with live reload and

Answer 1

I spent 2 days desperately trying every gruntfile-configuration I could find on the internet. Never worked. Then I found this https://stackoverflow.com/a/24765175/1541141. Use grunt-contrib-connect, NOT grunt-connect. grunt-connect is blocking... Hope it helps.

Answer 2

I think the heart of your solution is to create a new task or edit an existing task, like so:

// Start web server
grunt.registerTask('serve', [
    'jekyll:dist',
    'connect:livereload',
    'watch'
]);

...which you would run with a $ grunt serve. less, jshint, uglify and connect are already included under watch.

Answer 3

You need to tell connect what directory to serve up in the configuration using the "base" option, in this case it would be the static _site directory. You can also change the port to whatever you want, but you end up navigating to localhost:9009 with my example

connect: {
  server: {
    options: {
      livereload: true,
      base: '_site/',
      port: 9009
    }
  }
}

You will also want to add a watch task for when you change your html templates. Something like this would work.

watch: {
  html: {
    files: ['**/*.html', '!_site/**/*.html'],
    tasks: ['jekyll:dist']
  }
}

Then create a "serve" task like Wallace suggested.

// Start web server
grunt.registerTask('serve', [
'jekyll:dist',
'connect:server',
'watch'
]);

Lastly run "grunt serve" in the command line and navigate to localhost with the port you specified.

---

As commented by @jiggy

The key change is to not set keepalive to true. Keepalive will block all subsequent tasks from running. So long as connect is followed by watch the server won't terminate.