Automatización de tareas con Gulp.js

Clase 15 de 32 • Curso de Responsive Design 2015

Oscar Vidal

student•

Primeros Plugins para instalar. npm install gulp --save-dev
npm install --save-dev gulpwebserver (plugin para servidor simulado)
npm install --save-dev gulp-stylus(plugin para automatizar proceso de pasar a css)
npm install --save-dev nib(plugin de prefijos de compatibilidad en exploradores)
npm install --save-dev gulp-minify-css(plugin para minimizar css)

Mauricio Chavez

student•

el correcto para el gulpserver es npm install --save-dev gulp-webserver

Oscar Vidal

student•

Instalar herramientas Stylus y Gulp de forma global (-g).
npm install stylus -g
npm install gulp -g

Maria Elena Orozco Chavarria

student•

instalaciones :

nmp install stylus -g  
npm install gulp -g  
  
//pluggins css  (dependencias)  
npm install gulp --save-dev   
npm install --save-dev gulp-webserver  //Servidor web de desarrollo  
npm install --save-dev gulp-stylus   
npm install --save-dev nib           //para prefijos de nav antiguos  
nmp install --save-dev gulp-minifyle-css

Cristian Nuñez

student•

es minify no minifyle :)

Emmanuel Federico Sanchez Gayosso

student•

Hola disculpen me sale este error al ejecutar gulp, me podrían ayudar de antemo gracias:
gulpfile.js:13
html: {
^^^^

SyntaxError: Unexpected identifier
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:414:25)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Liftoff.handleArguments (C:\Users\netflix\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:116:3)
at Liftoff.<anonymous> (C:\Users\netflix\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:192:16)
at module.exports (C:\Users\netflix\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\node_modules\flagged-respawn\index.js:17:3)

Si me ayudaran a entenderlo se los agradeceria :), y este es el codigo del gulpfile.js:
var gulp = require('gulp');
var webserver = require('gulp-webserver');
var stylus = require('gulp-stylus');
var nib = require('nib');
var minifyCSS = require('gulp-minify-css');

var config = {
styles: {
main: './src/styles/main.styl',
watch: './src/styles/**/*.styl',
output: './build/css'
}
html: {
watch: './src/*.html'
}
}

gulp.task('server', function () {
gulp.src('./dist')
.pipe(webserver({
host: '0.0.0.0',
port: 8080,
livereload: true
}));
});

gulp.task('build:css',function() {
gulp.src(config.styles.main)
.pipe(stylus({
use.nib(),
'include css':true
}))
.pipe(minifyCSS())
.pipe(gulp.dest(config.styles.output))
});

gulp.task('watch',function (){
gulp.watch(config.styles.watch, ['build:css']);
gulp.watch(config.html.watch, ['build']);
})

gulp.task('build',[build:css])

gulp.task('default', ['server','watch','build']);
gracias

Arturo Jesus Martínez Sáenz

student•

terminando esta fila: .pipe(gulp.dest(config.styles.output)) va un ";" (sin comillas)
terminando el segundo y tercer gulp.task() también va el ;

Arturo Jesus Martínez Sáenz

student•

También, la tarea gulp.task('build',[build:css]) el build:css que esta dentro del array [] va en comillas simples, quedando así: gulp.task('build',['build:css']);

Julian Andres Builes Cajiao

student•

creo que seria genial, una clase completa o dos de aprender a configurar los automatizadores aun mas a fondo

Dídier Valladares

student•

Para crear packge.json se usa el comando: npm init

Plugins:
npm install stylus -g
npm install gulp -g
npm install --save-dev
npm install --save -dev stylus
npm install --save-dev gulp-webserver
npm install --save-dev nib
npm install --save-dev gulp-minify-css

Luisa Fernanda Cortés

student•

cuando pongo en Node el comando "gulp server" me aparece en rojo "gulpfile found" no habia tenido problemas hasta ahora, alquien sabe qué hacer?

JUAN DAVID BURGOS OQUENDO

student•

tienes que definir a lo ultimo de tu archivo de gulp, una tarea llamada "default", que ejecute tus tareas mencionadas en gulpfile.js

JUAN DAVID BURGOS OQUENDO

student•

tienes que definir a lo ultimo de tu gulpfile.js, una tarea llamada "default" que ejecute las tareas que tienes en tu archivo gulp.

Jaime Diaz

student•

Buenas tárdes, he instalado gulp de manera global:

npm install -g gulp

me aparece que se instalo normalmente pero cuando intento ver la version antes de inicializar tareas con:

gulp -v

me sale que GULP no se reconoce como comando interno o externo (EN WINDOWS); Alguien sabe como puedo solucionar dicho problema?? gracias

Jaime Diaz

student•

Hola! pude solucionar mi problema, una vez instalé de manera global gulp, tuve que volver a instalarlo en modo desarrollo con:

npm install gulp --save-dev

y una vez instalado, cerré la consola de administrador (WINDOWS) y la volví a ejecutar con la combinacion de teclas:

Windows + X y luego la tecla: A

Diego Hernández Ramírez

student•

Me costó uno y la mitad del otro instalar Stylus y Gulp... Pero lo logré. :3

Yeraldin Acevedo Acevedo

student•

Quisiera poder decir lo mismo... nisiquiera se que he hecho = ( jajaj

Jorge Luis Paiva Huamán

student•

me sale: npm ERR! 404 'gulpwebserver@latest' is not in the npm registry. :-(

Nohora Patricia Moreno García

student•

Hola a Todos: Les agradecería mucho, si me pudieran ayudar, al ejecutar en la consola, el comando gulp server, me aparece el siguiente error:

-bash: gulp: command not found

Alguien sabe, la solución? he instalado y des instalado 3 veces el node y los pluggins.

Gracias

Eduardo Quiñonez

student•

tienes que haber instalado gulp de modo global:

Debes de tener instalado Node.
Ejecutar "npm install -g gulp"

Antonio Illescas

student•

No consigo que me compile a css, este es el error que me da en la consola

[14:15:22] Starting 'build:css'...
[14:15:22] Finished 'build:css' after 3.34 ms
Potentially unhandled rejection [4] ParseError: /Users/srcorrecto/Desktop/web-baelo/src/styles/main.styl:2:15
1| body
2| font-size 17px
--------------------^

expected "indent", got "eos"

at Parser.error (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:257:11)
at Parser.expect (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:285:12)
at Parser.block (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:838:12)
at Parser.selector (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:1546:24)
at Parser.ident (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:1439:25)
at Parser.stmt (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:776:26)
at Parser.statement (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:683:21)
at Parser.parse (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:234:25)
at Renderer.render (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/renderer.js:80:22)
at dispatch (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/accord/node_modules/when/node.js:71:15)

Antonio Illescas

student•

"Solucionado el problema", algo tan tonto como que le tengo puesto un packge al sublime que me automatiza la sangría. por lo que al guardar y dejar todas las lineas al mismo nivel me daba error, el stylus estaba mas escrito.

Rafa Jiménez

student•

Hola,

Con el código de la clase nib no agrega los prefijos,cuando corro gulp o modifico algo no me salta ningún error en la consola y todo funciona correctamente pero nib no genera los prefijos, alguien sabe como solucionarlo

Rafa Jiménez

student•

Ya lo solucione:

gulp.task('build:css', function() {
gulp.src(config.styles.main)
.pipe(stylus({
use: nib(),
import: ['nib'],
'include css': true
}))
.pipe(minifyCSS())
.pipe(gulp.dest(config.styles.output));
});

Miguel Rodriguez

student•

Espero su ayuda...me sale error
C:\Users\oscar\Desktop\proyecto>gulp server
[23:33:38] Using gulpfile ~\Desktop\proyecto\gulpfile.
[23:33:38] Starting 'server'...
[23:33:39] Webserver started at
[23:33:39] Finished 'server' after 36 ms
events.js:141
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 0.0.0.0:8080
at Object.exports._errnoException (util.js:860:11)
at exports._exceptionWithHostPort (util.js:883:20)
at Server._listen2 (net.js:1234:14)
at listen (net.js:1270:10)
at net.js:1379:9
at doNTCallback3 (node.js:461:9)
at process._tickCallback (node.js:367:17)
at Function.Module.runMain (module.js:459:11)
at startup (node.js:136:18)
at node.js:972:3

Edgardo T

student•

Recuerden que los comandos también funcionan en el entorno Windows con CMD.

Jaime Diaz

student•

así es compañero, PERO un poco rebelde el tema de las instalaciones globales, algunas veces las dependencias no aparecen en el archivo package.json, razón por la cual recomiendo una vez instalado los plugins de manera global, hacerlo de igual manera para el entorno de desarrollo:

npm install [NOMBRE_PLUGIN ]--save-dev

una vez hecho esto, abren el archivo package.json y estaran nuestros plugins en la variable "devDependencies" : { ... }

Vicente

student•

No consigo acceder con el móvil a mi IP local 192.168.5.131.
¿Alguien lo ha conseguido?
¿Alguna sugerencia sobre el posible problema?

Alejandro Irimia Mesa

student•

Tienes que añadir también en la URL del móvil el puerto que hayas configurado en el gulpfile.js.

Suponiendo que el puerto es el 8080 y la IP que has puesto, la URL que tienes que poner en el movil es:

http://192.168.5.131:8080

Si no te funciona, yo comprobaría que el firewall no te esté filtrando las conexiones.

Geovanni Berdugo

student•

No me sale nada cuando ejecuto el "gulp server", instalé todos los plugin bien sin errores

Esme Lopez Escobar

student•

Aparece algún error en la consola? o simplemente puedes acceder al host desde otro lugar..

Esme Lopez Escobar

student•

Espro su ayuda, alguien sabe que significa
npm ERR! code 1
me salta cuando instalo gulp en el proyecto, busque informacion, pero no entiendo bien que pasa :S

Alejandro Irimia Mesa

student•

¿Qué comando ejecutas para que te devuelva dicho error?

Christopher Guzman Reyes

student•

Utilize ctrl+Z y el proceso sigue corriendo en el background alguien sabe como encontrarlo para deterlo? la unica solucion que encontre fue cambiar el puerto.
Saludos

Jesús Ildefonso Muro Esquivias

student•

Es con ctrl+c

Carlos Mancilla

student•

nmp install stylus -g  
npm install gulp -g  
  
//pluggins css  (dependencias)  
npm install gulp --save-dev   
npm install --save-dev gulp-webserver  //Servidor web de desarrollo  
npm install --save-dev gulp-stylus   
npm install --save-dev nib           //para prefijos de nav antiguos  
nmp install --save-dev gulp-minifyle-css

Automatización de tareas con Gulp.js

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?