Live-reload en cordova en browser

Gulp

NO existe Live-reload en cordova por defecto cuando levantamos el servidor, y los cambios que hacemos no se ven reflejados ni siguiera actualizando el navegador.

Esto se convierte algo molesto porque tendríamos que apagar y encender el servidor una y otra vez cada vez que queremos ver los cambios.

Esta guía que les quiero mostrar solo funciona Live-reload en cordova con la plataforma browser, y esto es porque solo lo necesitaba.

Estoy seguro que esta misma técnica sirve tanto para Android como para iOS, haciendo sus modificaciones.

Para esta quita vamos a utilizar Gulp y Browser Sync

¿Qué es Gulp?

En palabras simples, Gulp es un automatizador de tareas en Javascript.

Con gulp puedes ordenar compilar archivos, moverlos de un lugar al otros, observar un archivo y ejecutar una tarea si se modifica, las posibilidades podrían ser ilimitadas.

¿Porque vamos a utilizar gulp?

Como sabemos, nosotros tenemos nuestra aplicación alojada en la carpeta www el contenido de esa carpeta tiene que estar alojada (en nuestro caso) en platforms/browser/www, ya que esta es la carpeta que muestra el servidor de cordova. Por tanto gulp se va a encargar a mover todos los archivos que esten en www.

¿Qué es Browser Sync?

Browser sync es un proyecto open-source y es como un asistente que se encarga de ejecutar tareas repetitivas en nuestro navegador.

Por suerte, Browser Sync tiene un paquete en NPM, perfecto para juntarlo con Gulp.

Live-reload en cordova práctica

Lo primero que tenemos que hacer es instalar las dependencias. Voy a suponer que ya tienes creado el proyecto en cordova, si no, no estuvieses aquí.

$ npm i -D gulp browser-sync

Crea un archivo en la raiz de tu proyecto llamado gulpfile.js este es el archivo por defecto de gulp para leer las tareas en sus comandos.

Importamos las librerias

const gulp = require('gulp')
const browserSync = require('browser-sync').create();

Podemos hacer todo junto y hacer un masaclote, y tambien podemos hacer las tareas por separado que es lo que vamos a hacer.

Vamos a crear la tarea que se encarga de mover los archivos

gulp.task('moveFiles', () => {
  return gulp
    .src('./www/**/*.*')
    .pipe(gulp.dest('./platforms/browser/www'))
});

Creamos la tarea que inicia browser sync como servidor e indicamos el root de nuestro directorio

gulp.task('initBrowserSync', (cb) => {
  browserSync.init({
    server: {
      baseDir: "./platforms/browser/www",
    },
  });
  cb()
})

Creamos la tarea que detecte los cambios en nuestros archivos y los mueva

gulp.task("watch", function () {
  gulp
    .watch("./www/**/*.*", gulp.series("moveFiles"))
    .on("all", browserSync.reload);
});

ya ahora la tarea que junta todo

gulp.task("serve", gulp.series("initBrowserSync", "watch"));

Ahora iniciamos todo ejecutando el comando

$ gulp serve

¿Cómo usar webpack en cordova?

Con gulp, también podemos ejecutar webpack. Solo creamos una tarea que ejecute su función.

Instalamos webpack (No necesitamos el cli para esta práctica, pero si lo quieres hacer siéntete libre )

$ npm i -D webpack

Importamos webpack y nuestra configuracion

// .. more imports
const webpack = require('webpack')
const wConfig = require('./webpack.config')

creamos la tarea que ejecuta webpack

gulp.task("compile", function(cb){
  webpack(wConfig).run( (err, stats) => {
    if (err || stats.hasErrors()) {
      // Handle errors here
    }
    cb()
  });
})

Ahora añadimos una tarea que detecte los cambios y compile los archivos

gulp.task("watch", function () {
  // ... more taks
  gulp
    .watch("./src/**/*.*", gulp.series("compile"))
});

ahora nuestra tarea «serve» debería quedar de la siguiente forma

gulp.task("serve", gulp.series("compile", "moveFiles", "initBrowserSync", "watch"));

Necesitamos primero compilar y mover los archivos primero para que ejecute todo al iniciar el servidor, de caso contrario solo se verán reflejados cuando hagamos un cambio.

El initBrowserSync se puedo haber simplificado y colocar dentro del watch

Artículos que podrían gustarte