gruntjs - grunt watch example

¿Cómo se usa grunt-contrib-livereload?

Question

grunt-contrib-livereload usar grunt-contrib-livereload , pero no puedo entenderlo. El archivo léame parece omitir todo lo que necesito explicar, y luego finaliza con un ejemplo que no funciona cuando lo intento y no parece estar directamente relacionado con la documentación. He buscado una mejor explicación en una publicación de blog o tutorial o lo que sea, pero no he podido encontrar uno. ¿Alguien puede explicar cómo comenzar con esta herramienta?

Aquí están los tipos de preguntas que tengo, basadas en el archivo Léame :

La documentación dice que la tarea de carga en vivo "debe pasar la lista de archivos que han cambiado" --- pero ¿cómo la paso esta lista de archivos? El ejemplo no parece ilustrar esto. ¿Pasa la lista por alto?

¿Se requiere grunt-contrib-connect? ¿Qué hace y cómo lo uso? ¿Debo aprender a conectar antes de intentar usar livereload?

El archivo léame menciona middleware que "debe ser el primero insertado" --- pero insertado en ¿qué, antes de qué más? ¿Y cómo se inserta?

Y supongo que no entiendo cómo debo manipular los puertos. "Todos los navegadores que escuchan en el puerto de carga en vivo se volverán a cargar" --- pero ¿cómo sé qué navegador está escuchando a qué puerto? ¿Debo aprender todo sobre los puertos antes de poder probar el uso de la carga en vivo? (¿Alguna sugerencia sobre cómo aprender mejor sobre eso?)

Finalmente, en el ejemplo, hay una función folderMount que no parece relacionada con ninguna de la documentación anterior. ¿Qué es eso y lo necesito?

Supongo que estoy preguntando si alguien puede por favor:

• señalarme hacia un tutorial que es mucho más efectivo que el archivo Léame actual;
• explique estas partes inexplicadas del archivo Léame, si esas respuestas son lo que necesito para comprender el complemento;
• o proporcione un ejemplo funcional con alguna explicación de por qué es funcional.

Answer 1

La recarga en vivo ahora está integrada en la versión 0.4.0 grunt-contrib-watch . grunt-contrib-livereload y grunt-regarde serán depreciados pronto.

Ahora simplemente configure la opción livereload en true en su configuración y creará un servidor de recarga en vivo y luego volverá a cargar después de que se hayan ejecutado las tareas:

grunt.initConfig({
watch: {
all: {
options: { livereload: true },
files: [''lib/*.js''],
tasks: [''jshint''],
},
},
});

Por defecto, el servidor de recarga en vivo se iniciará en el puerto 35729 . Por lo tanto, para habilitar la recarga en vivo en su página solo agregue <script src="http://localhost:35729/livereload.js"></script> a su página.

Ver más información en los documentos: https://github.com/gruntjs/grunt-contrib-watch#live-reloading

Answer 2

Sé que esto es un poco viejo pero puede ayudar a alguien. En Gruntfile.js agrega "opciones":

sass: {
files: ''scss/**/*.scss'',
tasks: [''sass''],
options: {
livereload: true,
}
}

En el índice, agregue:

<script src="http://localhost:35729/livereload.js"></script>

Answer 3

github.com/dmitriz/gulp-automation basada en Gulp lugar de Grunt y en el siguiente Gulpfile.js para que funcione la livereload tiempo livereload :

var gulp = require(''gulp'');
var connect = require(''connect'');
var connectLivereload = require(''connect-livereload'');
var opn = require(''opn'');
var gulpLivereload = require(''gulp-livereload'');
var config = {
rootDir: __dirname,
servingPort: 8080,
// the files you want to watch for changes for live reload
filesToWatch: [''*.{html,css,js}'', ''!Gulpfile.js'']
}
// The default task - called when you run `gulp` from CLI
gulp.task(''default'', [''watch'', ''serve'']);
gulp.task(''watch'', [''connect''], function () {
gulpLivereload.listen();
gulp.watch(config.filesToWatch, function(file) {
gulp.src(file.path)
.pipe(gulpLivereload());
});
});
gulp.task(''serve'', [''connect''], function () {
return opn(''http://localhost:'' + config.servingPort);
});
gulp.task(''connect'', function(){
return connect()
.use(connectLivereload())
.use(connect.static(config.rootDir))
.listen(config.servingPort);
});

Answer 4

Editar: compruebe la información de versiones. grunt-contrib-watch ahora tiene soporte de carga en tiempo real.

Qué tonto. También tuve problemas con este, así que déjame hacer lo que pueda para explicar (o al menos ponerlo en funcionamiento). Tenga en cuenta que así es como lo configuro y parece funcionar la mayor parte del tiempo.

Para empezar, querrás asegurarte de haber abierto tu package.json con las dependencias correctas. No estoy seguro de que la carga en vivo funcione con la tarea de "mirar" horneada y he estado usando grunt-regarde últimamente. Mi paquete.json generalmente se ve así:

"dependencies": {
"grunt": "~0.4.x",
"grunt-contrib-livereload": "0.1.2",
"grunt-contrib-connect": "0.2.0",
"grunt-regarde": "0.1.1"
},

Obvi quieres gruñir (duhhh), livereload, connect parece ayudar con el montaje de carpetas, y regarde es como grunt-watch, simplemente parece funcionar mejor (no recuerdo por qué exactamente).

Puede mejorar aún más su package.json .json especificando la carga en vivo en su propio objeto "devDependencies" si así lo desea. Ahora, ejecute su buena npm install npm npm install para obtener los beneficios en su proyecto.

Hablemos de gruntfiles:

Como probablemente sabrá, el gruntfile es lo que hace que la magia suceda. En algún lugar hacia el final de su archivo gruñido, querrá especificar

grunt.loadNpmTasks(''grunt-regarde'');
grunt.loadNpmTasks(''grunt-contrib-livereload'');
grunt.loadNpmTasks(''grunt-contrib-connect'');

En la parte superior de su archivo de grunt, querremos agregar algunos utils para livereload. En /*global module:false*/ , continúe y agregue var lrSnippet = require(''grunt-contrib-livereload/lib/utils'').livereloadSnippet; .

Después de eso, realmente no necesitas aprender a conectar, solo tienes que usarlo. Comprueba mi estilo:

var folderMount = function folderMount(connect, point) {
return connect.static(path.resolve(point));
};

Esto viene antes de module.exports = function(grunt) {

Ahora entremos en la carne del gruntfile. Nuevamente, olvido lo que connect está haciendo, pero aquí es donde entra en juego la magia del middleware. En tus modules.exports, agrega:

connect: {
livereload: {
options: {
port: 9999,
middleware: function(connect, options) {
return [lrSnippet, folderMount(connect, ''.'')]
}
}
}
},

Ahora queremos ver los archivos. Me gusta configurar algunas tareas diferentes ya que no quiero que se ejecute todo el proceso de grunt cada vez que guardo un archivo CSS. Aquí es con lo que trabajo (de nuevo, module.exports a module.exports ):

regarde: {
txt: {
files: [''styles/*.css'', ''index.html''],
tasks: [''livereload'']
},
styles: {
files: [''sass/*.scss'', ''sass/*/*.scss''],
tasks: [''compass'']
},
templates: {
files: [''templates/*.jade''],
tasks: [''jade'']
}
},

Puede ver que solo quiero que se active la carga en tiempo real cuando haya habido cambios en mi css compilado ( *.css ) o en mi html compilado. Si edito un archivo SCSS, quiero disparar solo con brújula. Si edito una plantilla de jade, solo deseo activar el compilador de jade en HTML. Creo que puedes ver lo que está pasando. Puedes jugar con esto, solo sé inteligente al respecto porque podrías quedar atrapado en un ciclo infinito.

Por último, debe activar estos procesos. Me gusta atarlos a todos a mi tarea gruñona principal porque mi gruntfile es así de dulce.

// Default task.
grunt.registerTask(''default'', [''livereload-start'', ''connect'', ''regarde'']);

Ahora, cuando grunt un grunt en la CLI, deberías (con suerte, tal vez, cruzar los dedos) obtener algo como esto:

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9999.

Navega a http://localhost:9999/yourpage.html y mira cómo sucede la magia.

completo gruñido aquí. paquete completo.json aquí.