Configuring grunt to start and restart the browser (with minimal plugins)
I am setting up a web project and want to use grunt for automation and workflow. I have sass, jshint, jsdocs, minifiers all play well, but I have no problem starting and restarting the browser from the command shell.
I have 2 conditions that I would like to meet:
No browser plugins. (I want it to work straight from the repo: "npm install", "grunt") Keep npm modules to a minimum. (Ideally just shake-paste-watch and grunt-contrib-connect)
This is my config for these 2:
connect: {
options: {
base: 'app/',
port: '8888',
livereload: true
}
},
watch: {
all: {
files: [
'gruntfile.js',
'app/index.html',
'app/partials/*.html',
'app/styles/sass/*.scss',
'app/scripts/*.js'
],
tasks: ['default'],
options: {
livereload: true
}
}
}
In testing, I've also tried:
connect: {
options: {
base: "app/",
port: 8888,
open: {
target: 'app/index.html'
}
}
}
The clock shows me when the files change, but doing the default task (or any of the subtasks it is made from) does not start the browser / page, and there seems to be no reload.
I have had some success with open eagerness, but am convinced that this should be achievable with just grunt-contrib-watch after 0.6.0?
----- optional I'm also not sure what grunt-contrib-connect is running ...
grunt.registerTask('serve', ['sass', 'connect', 'watch']);
grunt.registerTask('default', ['jshint', 'serve']);
The results are as follows, I do not see the timings for the connection, I assume the task is not being measured because it is running in parallel, but this is what is happening?
Execution Time
loading tasks 12ms ▇▇▇▇▇ 10%
jshint:src 78ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 62%
sass:all 11ms ▇▇▇▇▇ 9%
watch 24ms ▇▇▇▇▇▇▇▇▇ 19%
Total 126ms
source to share
Well, not sure if this is the case, but with your update I can see that it connect
will never start because you don't have the target specified:
connect: {
server: { // try adding this block
options: {
base: 'app/',
port: '8888',
livereload: true
}
}
},
Otherwise it looks mostly correct, but you can also specify which port you want to reload:
watch: {
all: {
files: [
// ...
],
tasks: ['default'],
options: {
livereload: 8888 // changed...
}
}
}
source to share