Grunt watch interrupt not working with jekyll - gruntjs

Question

So I'm new to Grunt and have been trying to implement a workflow for it and Jekyll. So I have a watch task running but it seems to fail to interrupt the current serve task before trying to start Jekyll again because I get an error about port binding, specifically jekyll 2.0.3 | Error: Address already in use - bind(2)
It could be me doing something stupid or not understanding something but does anyone have any ideas? Here's my gruntfile:
module.exports = function( grunt ) {
// load time-grunt and all grunt plugins found in the package.json
require( 'time-grunt' )( grunt );
require( 'load-grunt-tasks' )( grunt );
grunt.initConfig({
csslint : {
test : {
options : {
import : 2
},
src : [ 'css/main.css' ]
}
},
cssmin : {
dist : {
src : 'css/main.css',
dest : 'css/main.min.css'
}
},
shell : {
jekyllBuild : {
command : 'glynn'
},
jekyllServe : {
command : 'jekyll serve'
}
},
watch : {
files : [ '_layouts/*.html',
'_posts/*.md',
'css/main.css',
'_config.yml',
'index.html',
'404.html' ],
tasks : [ 'cssmin',
'shell:jekyllServe' ],
options : {
spawn : true,
interrupt : true,
atBegin : true,
debounceDelay: 250
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-shell');
// register custom grunt tasks
grunt.registerTask( 'lintcheck', [ 'cssmin','csslint', 'shell:jekyllServe' ] )
grunt.registerTask( 'qbuild', [ 'cssmin', 'shell:jekyllServe' ] )
grunt.registerTask( 'deploy', [ 'cssmin', 'shell:jekyllBuild' ] )
};
Any help would be much appreciated.

Answer 1

You got an error because you tried to run jekyll serve more than once (while server was already running). As you can read in the docs, jekyll serve runs a development server at localhost:4000 (http://jekyllrb.com/docs/usage/) so you can fire it only one on a particular port at the same time. After that you need only rebuild jekyll into ./_site when some files changed. You can do that with jekyll build.
I modified your Gruntfile:
module.exports = function( grunt ) {
// load time-grunt and all grunt plugins found in the package.json
require( 'time-grunt' )( grunt );
require( 'load-grunt-tasks' )( grunt );
grunt.initConfig({
csslint : {
test : {
options : {
import : 2
},
src : [ 'css/main.css' ]
}
},
cssmin : {
dist : {
src : 'css/main.css',
dest : 'css/main.min.css'
}
},
shell : {
jekyllBuildLocal : {
command : 'jekyll build'
},
jekyllBuild : {
command : 'glynn'
},
jekyllServe : {
command : 'jekyll serve'
}
},
watch : {
files : [ '_layouts/*.html',
'_posts/*.md',
'css/main.css',
'_config.yml',
'index.html',
'404.html' ],
tasks : [ 'cssmin',
'shell:jekyllBuildLocal' ],
options : {
spawn : true,
interrupt : true,
atBegin : true,
debounceDelay: 250
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-shell');
// register custom grunt tasks
grunt.registerTask( 'lintcheck', [ 'cssmin','csslint', 'shell:jekyllBuildLocal' ] )
grunt.registerTask( 'qbuild', [ 'cssmin', 'shell:jekyllBuildLocal' ] )
grunt.registerTask( 'deploy', [ 'cssmin', 'shell:jekyllBuild' ] )
};
And what I recommend you for development is to run:
grunt shell:jekyllServe
grunt watch (I guess in other terminal window)
This should work properly

Answer 2

I'm developing a site with a similar workflow but with Gulp instead of Grunt. I swapped the default jekyll server with browserSync, which also auto-reloads pages when changes are made (useful in development). This is an example Gulp build file; a Grunt-equivalent can be made.