How to get grunt serve task working alongside watch? - server

Question

I've recently installed and got a it up and running but I can't seem to get it running concurrently with my watch task? In my grunt file, if register the serve task before watch, the server spins up and but the watch task doesn't....and vice versa. This is the serve package and Im using and Grunt file attached:
https://www.npmjs.com/package/grunt-serve
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/global.js' // This specific file
],
dest: 'js/build/production.js',
}
},
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'js/build/production.min.js': ['js/build/production.js']
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build/'
}]
}
},
sass: {
//options: {
// style: 'compressed'
//},
dist: {
files: [{
expand: true,
cwd: 'css',
src: ['*.scss'],
dest: 'css/build/',
ext: '.css'
}]
}
},
serve: {
options: {
port: 9000
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['css/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
}
}
});
// Load all Grunt tasks automatically wihtout having to enter manaually
require('load-grunt-tasks')(grunt);
grunt.registerTask(
'default',
[
'concat',
'uglify',
'sass',
'serve',
'watch'
]
);
};

Answer 1

Grunt serve and grunt watch are both blocking tasks. You can use a plugin like grunt-concurrent to run both at the same time in separate threads. https://github.com/sindresorhus/grunt-concurrent
concurrent: {
target1: ['serve', 'watch'],
}
//aslo update your default task
grunt.registerTask(
'default',
[
'concat',
'uglify',
'sass',
'concurrent:target1'
]
);
Additionally you could also use grunt-concurrent to run your uglify and sass tasks in parallel which may improve build time.