Grunt-browser-sync madness: open multiple browser instances over and over
I'm close to building grunt-browser-sync
but still not quite there.
I came up with this Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : {
dist : {
src : ['js/libs/*.js', 'js/custom/*.js'],
dest : 'js/build/production.js',
}
},
uglify : {
dist : {
src : 'js/build/production.js',
dest : 'js/build/production.min.js'
}
},
sass : {
dist : {
options : {
style : 'compressed',
compass : 'true',
},
files : {
'css/main.css' : 'sass/main.scss'
}
}
},
autoprefixer : {
options : {
browsers : ['> 5%', 'last 2 version', 'ie 8', 'ie 9']
},
dist : {
files : {
'css/main.css' : 'css/main.css'
}
}
},
watch : {
options : {
livereload : true
},
content : {
files : '*.html',
tasks : ['browserSync']
},
scripts : {
files : ['js/libs/*.js', 'js/custom/*.js'],
tasks : ['concat', 'uglify', 'browserSync'],
options : {
spawn : false,
},
},
css : {
files : ['sass/**/*.scss'],
tasks : ['sass', 'autoprefixer', 'browserSync'],
options : {
spawn : false,
}
}
},
browserSync : {
files : {
src : ['css/*.css', 'images/*.*', 'js/build/production.min.js', '*.html'],
},
options : {
server: {
baseDir: "./",
},
watchTask : true
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);
};
I want the following:
- Type
grunt watch
in the terminal and automatically enable mineindex.html
on the static server page in my browser. - Page to reload the page when CSS, JS or images change.
What happens to my configuration is the following:
- A new browser window only opens when the file is saved
- Every time I save something, several browser windows open and the number
localhost
keeps changing, making the plugin completely useless.
I am aware that I have registered tasks : ['browserSync']
anywhere in the file, but this is the only way that browser sync does. I expected this to be enough:
grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);
But I had no luck with that. browser sync triggers but static server won't open.
source to share
BrowserSync author here.
The problem is that you are running the BrowserSync task multiple times - this is not the correct way to use it.
Check out the examples at http://www.browsersync.io/docs/grunt/ - you should run BrowserSync independently (and before) any other browsing tasks like this.
// This shows a full config file!
module.exports = function (grunt) {
grunt.initConfig({
watch: {
files: "assets/scss/**/*.scss",
tasks: ['compass']
},
compass: {
dist: {
options: {
sassDir: 'assets/scss',
cssDir: 'assets/css',
outputStyle: 'compressed'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : 'assets/css/*.css'
},
options: {
watchTask: true // < VERY important
}
}
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// start browsersync and then initiate the watch AFTER
grunt.registerTask('default', ["browserSync", "watch"]);
};
source to share