Automatizando el build

Clase 16 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Vamos a mejorar nuestro entorno de desarrollo gracias al uso de “scripts” en nuestro package.json, gulp y watchify. Podemos crear un comando que haga desde ejecutar las tareas de construcción de proyecto hasta levantar el servidor. Imagina poder escuchar los cambios en cualquier archivo y observar de inmediato los cambios, seguro será tu entorno favorito.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-12.rar?raw=true

Esteban Alvarez

student•

Con Windows definitivamente:

"start": "gulp watch | node server.js"

Es una caca perfumada ¬¬

Ramiro Tolosa

student•

Siiiiii. Que buen comentario hiciste, por que me estaba volviendo loco, ya que no levantaba el servidor. Muchas gracias,

Alejandro Sobrevilla Viveros

student•

Uffff gracias por el tip. Estoy en windows y al usar & al correr "npm start" se detenía el watch y no levantava el server.

Juan Castro

teacher•

Para Windows el comando de npm start "&" no funciona...

Hay que usar concurrently... (https://www.npmjs.com/package/concurrently)

Para usarlo solo hay que instalarlo globalmente [ npm install -g concurrently ]

Ahora solo hay que hacer dos cosas...

Lo primero es revizar que no tengamos un archivo de error (npm-debug.log), este archivo sale cada vez que tenemos un error... Para quitarlo simplemente hay que corregir el error que nos marca este mismo archivo.
Y para ejecutar los dos comandos al mismo tiempo solo hay que dar este comando:
concurrently "comando 1" "comando 2" que en este caso seria:
concurrently "gulp watch" "node server"

Juan Castro

teacher•

Y finalmente el npm scripts quedaria así:
"start": "concurrently "gulp watch" "node server" "
Y así podremos realizar el comando npm start sin problemas!

Juan Castro

teacher•

@olivermezquitamorales Usas Windows? Yo tambien lo intente así y no me funciono... solo me lanza el server.. pero no gulp...

Juan Zafra Uceda

student•

A esta la llamaremos la lección de "me ha estallado el cerebro".

Sacha Lifszyc

teacher•

Víctor Arnau Gómez

student•

Gracias :D

Roberto Prince

student•

Nunca entendere por que los programadores somos tan masoquistas, solo pongan esto en su gulpfile en lugar de su otro 'default'

gulp.task('default', [], () => {

    console.log('Watching over your project platzigram')

    gulp.watch(['./src/*.js', './views/*.pug', './scss/*.scss'

, './assets/*.*'],

 ['styles','scripts','assets'], (event)=>{

        console.log(`Event ${event.type} ended`)

})

})

y pare de sufrir

Kevin Caicedo Riascos

student•

Estoy de acuerdo contigo yo también lo hago de esta manera

Alexander Agrazal

student•

Se trata de aprender para que es cada cosa. no tiene sentido ejecutar comandos sin entender bien para que son

William Reaño Reyes

student•

Hasta este punto del curso mis respetos para el profe y para platzi por tener profesionales excelentes en su team esto es otro nivel

Sacha Lifszyc

teacher•

muchísimas gracias!

Jesús Márquez Racero

student•

A mi me han funcionando ambas sintaxis para el package.json, para que el comando start, corra en Windows correctamente. Yo tengo Windos10 y ambas sintaxis me han funcionado. Estas sintaxis, son las que ya indican los compañeros. Resumiendo:

En lugar de escribir como hace el profesor:

"start": "gulp watch & node server.js"

Escribo:

"start": "gulp watch | node server.js"

"start": "start gulp watch && start node server.js"

Como digo a mi ambas me funcionan con Windows10 64bits

Snheidert Smalbach

student•

tambien tenia el mismo problema, gracias :D (tambien uso windows 10 )

Jose Carmona

student•

tengo win 10 y ninguno me funciona, o me ejecuta el server o gulp pero no ambos a la vez

Sebastián Durán

student•

Este capitulo es muuuy lento men.

Onar

student•

Osea, que ser desarrollador full Stack consiste básicamente en aprender 30.231012312 millones de librerías para hacer aplicaciones clónicas entre sí. No entiendo cómo se puede tardar tanto y que requiera tantos pasos generar un entorno de trabajo. Babel, pug y sass son pasos que espero que en un futuro no muy lejano no sean necesarios. Joder no puede ser tan complicado si esque todavía no hemos hecho nada más que instalar cosas!

Roberto Araoz

student•

por que si tengo "start": "gulp watch & node server.js" y ejecuto nmp start
solo ejecuta la parte gulp watch y nunca ejecuta la parte node server.js, me doy cuenta por que al entrar a http://localhost:3000/ me dice localhost refused to connect. pero si esta haciendo watch al cambiar un archivo me aparece --> Bundling...

Inno

student•

En windows es asi: "start": "gulp watch | node server.js"

HERNAN DANIEL PIÑA LANDINEZ

student•

Error ocurrido y solucionado, si es que les ocurre a uds!!!

Estaba corriendo el build con mi codigo

"scripts":{  
    "build": "gulp"  
  }

y me generaba un error en consola el npm que decia:

npm ERR! No value found for key scripts at 28:13
npm ERR! "scripts": {
npm ERR! ^

luego de verificar un poco, probe eliminando el espacio entre los dos puntos ":" y el inicio de corchete "{", en pocas palabras, escribiendolo corrido. y PERFECTO, funciono todo bien para el "npm run build"

Cesar Guillermo Amadori

student•

Resolví el problema de la ejecución de los dos procesos simultáneos para windows, pero no se si de la mejor forma. Buscando encontré, que de esta forma se ejecutan los dos procesos en ventanas separadas.

Esto puede llegar a consumir mas recursos Sasha?

La solucion:

"start": "start gulp watch && start node server.js"

Ya había probado invertir el orden de los procesos, cambiar por | el & y usar &&.

Lo único a tener en cuenta es que estos dos procesos se abren en ventanas separadas y para detenerlos es suficiente con cerrarlas

Saludos

Giancarlo Vera Burgos

student•

Yo también probé el código de Sasha y las otras opciones para windows que comentaron más abajo y ninguna me andubo, usando el fix que proponés todo bien. Esperemos que dice Sasha al respecto si es que hay una mejor solución.

Edgar Roquel

student•

Gracias por tu aporte

Yonathan Gutierrez

student•

Brutal, brutal este curso, se da a entender bastante bien, la estructura de todos los conceptos es armonica, por ello, aunque con mucho contenido uno no se pierde como pasaria en casi todos los casos donde hay mucho conocimiento de por medio. Felicitaciones al profe y en lo personal me gustaria llegar a ese nivel.

Sacha Lifszyc

teacher•

muchas gracias! practica, practica y practica... fácilmente llegarás!

Isabel Muñoz

student•

Para tener los dos comandos una opción que creo que es independiente de la plataforma es usar concurrently que además de ejecutar los dos comandos correctamente permite parar también correctamente si uno de los dos termina, en particular cuando lo paramos con ctrl + c.

Para usarlo lo instalamos tal cual especifica la documentación con

npm install concurrently --save

luego añadimos la línea en el package.json:

"start": "concurrently --kill-others \"gulp watch\" \"node server.js\""

Es necesario tal cual dice la documentación escapar los caracteres " ya que si no tomaría por ejemplo el gulp como un comando y el watchcomo otro.

Añadimos el --kill-others para que si termina cualquiera de los dos procesos el proceso global termine, en particular al presionar Ctrl + C

Yo estoy utilizando Windows y funciona correctamente.

Cesar Octavio de Jesus Meza Carrillo

student•

Esta solucion fue la que me jalo a mi 😄 las otras intente pero no pude echarlas a andar

Humberto Melendez Fernandez

student•

Excelente video

Sacha Lifszyc

teacher•

muchas gracias!

leonardo Oteca

student•

Creo que gulp ya tiene solucionado lo de los watch, y creo que de la siguiente manera quedaría mejor:

gulp.task('default',['assets'],()=>{
	gulp.watch('./index.scss',['styles']);
	gulp.watch('./src/index.js', ['scripts']);
});

Camila Di Virgilio

student•

excelente aporte.

moises mannarino

student•

o sea xq no usa el metodo nativo de gulp watch en vez de instalar una libreria para eso

Reinaldo Mendoza

student•

Tampoco lo entiendo

Jesús Heber Grajeda Barranco

student•

Yo solo tengo un comentario, y citaré una de las frases que usaste en una clase, “cada quién se aprieta la corbata tanto como quiere”. Desde mi punto de vista complicas mucho esta clase porque usamos librerías que no son necesarias. Gulp tiene su propio watcher, y no creo que sea muy conveniente meter 1000 librerías. Es solo un comentario, y me gustaría que explicaras porque el uso excesivo de librerías, ¿es más eficiente?¿es por algún motivo del método de enseñanza?
En deninitiva eres buen profesor, pero se debe de poner más atención al temario que se llevara en este curso. O simplemente cambiar el nombre a “Curso definitivo de NPM modules”

Luis Miguel Ramirez Castillo

student•

@sachalifszyc No funciona en windows, la funcion start solo corre el server.js y no el gulp watch, que podemos hacer (que no sea instalar linux =p)

Juan Castro

teacher•

Mira el primer comentario de abajo!!
:D

Luigi Pizarro Caceda

student•

Lo único que no me quedo muy claro de este video y no se de donde lo sacamos es la función bundle(), esa función es nativa de javascript? es de browserify? o la creamos en algún momento y no me di cuenta.

Carlos Sánchez

student•

Se creó en el video anterior, es de browserify.

Andres F. Clavijo T. Felipe

student•

como hacemos un livereload con automatización de tareas?

Daniel Pino

student•

Revisa el paquete que se llama gulp-livereload, el pipe de livereload dentro de cada tarea y llamar el livereload.listen dentro de una tarea que haga watch sobre los archivos que quieres estar escuchando.