Optimiza tus compilaciones con Gulp, Browserify y Watchify
Agencia web » Noticias digitales » Optimiza tus compilaciones con Gulp, Browserify y Watchify

Optimiza tus compilaciones con Gulp, Browserify y Watchify

Navegador se está convirtiendo cada vez más en una solución viable para desarrollar scripts JS y proponiendo una sintaxis modelada en la de Node.js. Compilar scripts con Navegador Es simple. Durante los desarrollos, el uso de vigilar le permite compilar archivos sobre la marcha. A pesar de esto, cuando quieras integrar tu compilación con otras tareas Trago (como compilar archivos Menos), te encuentras con un problema: cómo usar vigilar al mismo tiempo que tragar-reloj. ¡Responde en este artículo!

Usar Gulp y Browserify – Nivel 0

utiliser Trago et Navegador es bastante simple Puede usar la API de Browserify o ir más simple y usar gulp-browserify que le permitirá compilar sus archivos fácilmente.

1
2
3
4
5
6
7
8
const trago = exigir('trago');
const navegar = exigir('gulp-navegador');
trago.tarea('js', función() {
trago.src('src/*.js', { leer: false })
.pipe(navegador())
.pipe(trago.dest('./construir/'))
});

El problema que encuentra rápidamente es que para trabajar en sus archivos y volver a compilarlos sobre la marcha, tendrá que analizar todos los archivos. Esto es muy caro. Navegador tendrá que cargar todos sus archivos pero también todas las dependencias que usa. Cuanto más grande sea tu proyecto, más rápido pasará el tiempo. Además, si utiliza transformadas como babelificar los tiempos aumentarán aún más rápido (Lista de todos los complementos disponibles a través de Babel). También la lista de todos transformaciones de Browserify.

Antes de mostrarle la solución final, así es como se vería una solución con el clásico tragar-reloj.

1
2
3
4
5
trago.tarea("mirar", función () {
trago.ver(“./src/*.js”, ["js"]).nosotros("cambiar", función(evento) {
un mueble consola.Iniciar sesión(`Archivo ${evento.ruta} ha sido ${evento.tipo}`);
});
});

Con esta solución, cada vez que cambia uno de sus archivos, se inicia una compilación completa.

vigilar

vigilar hace que sea eficiente para compilar sus archivos con Navegador. Mantendrá en memoria el resultado de la compilación de cada archivo (todos los archivos vinculados a su archivo como dependencias…).

Cuando se actualiza un archivo, actualiza la huella digital del archivo recién modificado y genera un liar sin analizar todas sus dependencias.

Usa Gulp, Browserify y Watchify – Nivel ∞

Instalación de dependencias de Node.js

¡Puedes instalarlos con Yarn (si realmente estás actualizado 🙂)!

1
$ hilo agregar browserify gulp vinilo-buffer vinilo-fuente-stream watchify –dev

De lo contrario, estás usando el viejo NPM 🙉

1
$ npm install browserify gulp vinyl-buffer vinyl-source-stream watchify --save-dev

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
"uso estricto";
const navegar = exigir("navegar"),
búfer = exigir("tampón de vinilo"),
trago = exigir("trago"),
ruta = exigir("camino"),
fuente = exigir("vinilo-fuente-flujo"),
usuario = exigir("trago-útil"),
vigilar = exigir("vigilar"),
origen = {
js: “./src/main.js”
},
destino = {
js: "./construir/"
};
dejar empaquetador;
función manojos(perfiles) {
if (paquete === undefiNED) {
if (perfil === "mirar") {
paquete = watchify(browserify(src.js));
} más {
paquete = browserify(src.js);
}
}
manojo();
}
función liar() {
dejar inicio = nueva Fecha().consigue tiempo(),
_ = empaquetador
.manojo()
.nosotros("Error", util.log.bind(util, “Error de navegación”))
.pipe(fuente("principal.js"))
.pipe(búfer())
.pipe(gulp.dest(dest.js)),
tiempo = nueva Fecha().getTime() – inicio;
util.log("[browserify] rebundle tomó" , usar.colores.cian(`${tiempo} señora`), util.colores.gris(`(${src.js})`));
volvemos _;
}
trago.tarea("js", paquetes.bind(nulo));
trago.tarea("mirar", función () {
manojos("mirar");
empaquetador.on("Actualizar", paquete.enlazar(nulo));
});
trago.tarea("por defecto", ["mirar", "js"]);

Aquí tienes un ejemplo extremadamente simplificado pero funcional. Este código podría simplificarse aún más, pero le muestra un boceto del código que se debe producir para manejar un recarga en caliente efectiva.

Para simplificar su tarea, le proporciono un archivo con un guplfile.js más completo, que maneja la compilación de archivos JavaScript con Babel (y los presets como ES2015) pero también archivos Menos mientras gestiona perfiles como para el desarrollo con o sin reloj pero también Production con minificación!

Conclusión

Es muy posible usar Navegador efectivamente con Trago siempre que juegues con API. Esto te obliga a salirte un poco de los caminos trillados y prescindir de complementos. Trago que solemos usar.

★ ★ ★ ★ ★