Estoy tratando de obtener grunt-browser-sync para inyectar cualquier cambio de css en un navegador abierto cuando se actualiza/cambia un archivo. Pero por alguna razón, parece que puedo hacer que funcione y Grunt no me da ningún error que me haga saber que no está funcionando.
Actualmente estoy usando MAMP ya que es un proyecto basado en WordPress.
Aquí está mi Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: '_/js/libs/*.js', //input
dest: '_/js/functions.min.js' //output
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
loadPath: require('node-neat').includePaths,
style: 'compressed'
},
files: {
'style.css': 'scss/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'style.css': 'style.css'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : 'style.css'
},
options: {
watchTask: true
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: ["_/js/libs/*.js"],
tasks: ["ugilify"],
},
sass: {
files: ["scss/*.scss"],
tasks: ["sass", "autoprefixer", "browserSync"],
},
php: {
files: ['*.php']
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
// Default task(s).
grunt.registerTask('default', ['uglify', 'sass', 'browserSync', 'watch', 'autoprefixer']);
};
y aquí está el resultado cuando guardo/actualizo un archivo:
Running "watch" task
Waiting...
>> File "scss/global.scss" changed.
Running "sass:dist" (sass) task
File style.css created.
Running "autoprefixer:dist" (autoprefixer) task
File style.css created.
Running "browserSync:dev" (browserSync) task
Done, without errors.
Completed in 1.478s at Wed May 07 2014 18:47:40 GMT-0500 (CDT) - Waiting...
Pero luego tengo que actualizar físicamente el navegador para ver los cambios.
No estoy seguro de si me falta algo en el archivo gruñido o qué.
La única versión de grunt-browser-sync que funciona para mí con este código es 1.9.1. Entonces, desinstale su versión actual y
npm install grunt-browser-sync@1.9.1 --save-dev
-
Esto también funciona para mí. Las versiones más nuevas simplemente no funcionan igual.
– JCraine
23 de enero de 2018 a las 1:10
baño
Encontré el mismo problema y he abierto un problema aquí
-
Una cosa que noté es que si tomaba mi Gruntfile actual que pegué arriba y simplemente ejecutaba
gruntluego me di cuenta de que funcionaría y generaría el script de inyección JS que necesitaba agregar a mi proyecto. Una vez que hice eso, estaba funcionando. si si corregrunt watchno funciona Así que sí. Supongo que me estoy confundiendo sobre si necesito o no tener un reloj gruñido con sincronización del navegador o qué. Todo esto sigue siendo nuevo para mí. Y probablemente me pasaré a gulp después de un tiempo, pero actualmente hay más desarrollo para grunt, así que me quedaré con grunt por un tiempo.– ultraloveninja
19 mayo 2014 a las 14:39
-
Me encontré con un problema similar en el que BrowserSync veía que un archivo había cambiado, pero no actualizaba la página. En mi caso, había movido el
<HTML>etiqueta a un archivo de inclusión llamado header.html, por lo que no pudo inyectar el script necesario. Después de mover mi apertura<HTML>etiqueta a index.html el problema se resolvió. Pensé en mencionarlo para cualquier otra persona que pueda encontrarse en un escenario similar.– Bill Keller
6 de febrero de 2015 a las 15:10
Todo parece correcto… pruebe con un Gruntfile que incluya solo browserSync. Si eso funciona, agregue el reloj. Cuando eso funcione, agregue sass.
– obispo
8 de mayo de 2014 a las 0:34
tengo exactamente el mismo problema y un gruntfile.js que es muy similar al tuyo. mientras escribo grunt watch, modifico, digamos, el archivo .html. Obtengo una compilación exitosa, pero … no se abre ningún navegador ni nada: \ ¿alguna idea?
– valerio0999
24 de agosto de 2014 a las 12:45