Organizando nuestros assets y agregando un favicon

Clase 12 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Vamos a crear una nueva tarea en Gulp, en este ocasión todos los recursos que tengamos en una carpeta los vamos a generar de manera automática en otra carpeta, esto incluye imágenes y código de css resultante. Igual vemos por primera vez los fav-icons, optimizados para todos los dispositivos.

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

Oscar Garcia

student•

Para que tenemos que crear una carpeta assets si de todas maneras luego con gulp lo vamos a pasar a public? por que no colocar de una ves los archivos dentro de public?

Enrique Benitez

student•

Porque lo que queremos es automatizar las tareas con gulp, al hacer esto, gulp puede hacer muchas cosas cómo compilar el código css que nosotros escribimos en sass y gulp lo transforma en css, también lo puede minificar para que nuestra aplicación cargue más rápido, busca en npm "minify-css" o "minify-gulp" o algo así no recuerdo, hay muchos minificadores para css y js, que cuando lo corremos con gulp, esto te lo convierte y lo pasa al directorio de public, que es lo que el usuario final recibe. :)

Luigi Pizarro Caceda

student•

Porque tienes un source, que son tus archivos base, .scss, .pug, .jpg, etc. y un destino que son los archivos que ve tu usuario.

La ventaja de esto es que a esos archivos source les puedes hacer lo que quieras, concatenarlo, minificarlos, compilarlos, optimizarlos, autoprefixearlos y un largo etcetera, pero siempre tendras tus archivos base para trabajar.

Haciendo una analogía es como tener un archivo photoshop .psd y un .jpg generado de ese archivo, el .psd lo guardas para futuras modificaciones y el .jpg para mostrarlo.

Omar Crespo

student•

Este es un link para los que quieran el favicon 😄 https://raw.githubusercontent.com/platzi/platzigram/master/assets/android-icon-192x192.png

Edgardo T

student•

Enserio si hay un curso de git y github los archivos deberían estar en un repo y las modificaciones de las clases hechas con ramas. Así sería muchísimo mas sencillo descargar el proyecto y seguirle el paso.

Camilo Arguello

student•

Que quedaran guardadas como commits.

Luis Carlos Mencia

student•

Que ironía que en la web de favicon generator no tengan un favicon xD

Ricardo Gonzales Gonzales Gonzales

student•

Pero no lo subes con todo y la carpeta node_modules al git pues :´(

Javier Gómez

student•

La carpeta node_modules no es necesaria, al hace npm install ya tienes todos los módulos de node.
No es buena idea el rastrear con git las dependencias de los proyectos.

Wilfredo Bardales

student•

Al parecer algo hice mal , copie los links los converti a jade y aun asi no logra a cambiar de icono , solo es poner los link de los iconos en el archivo ,pug en la parte del head
no se añade algo mas en el body?

Mario Ruano Fernández

student•

Me pasa igual, he revisado varias veces la lección y la sigo paso a paso.

No sé qué problema puede estar ocurriendo. Voy a seguir revisando.

Aviso si doy con la solución.

Mario Ruano Fernández

student•

Creo que el problema estaba en el refresco de la caché.

En el navegador, utiliza Ctrl + F5.

Luz Adriana Pinzón

student•

tengo un problema con los archivos que están en assets cuando corro gulp. No se copian a public. Supongo que es porque estoy en un pc y la ruta no la interpreta con /* ¿alguien sabe como sería la sintaxis para mi caso?

Luz Adriana Pinzón

student•

Ya lo encontré, la linea sería la siguiente:
.src(‘assets/.’)

Wildin Mota

student•

Descarguen nodemon asi no tienen que estar cerrando el server y abriendolo para ver cambios.

Para instalarlo ‘npm install -g nodemon’ y para correr el servidor ‘nodemon server.js(o como se llame tu main file express)’

ANDRES GERARDO LOPEZ CASTIBLANCO

student•

¿Se puede trabajar con una icono vectorial y así evitar tener un icono para cada resolución ?

Reinaldo Mendoza

student•

Creo que es una opcion, aunque esta bueno conocer esta opcion

Anahi Zentella Aguirre

company_admin•

Al ejecutar el proyecto en este punto, no me genera el Gulp la copia de los assets ni el app.css en la carpeta public, ¿qué puede ser? ya descargué los archivos que uds. adjuntan pero pasa lo mismo, están idénticos el archivo en el gulpfile.js y server.js

Utilizo Ubuntu y tengo los módulos instalados necesarios para este proyecto.

Roberto Prince

student•

intentaste

sudo gulp

lamentablemente nunca he usado gulp con ubunto y no te puedo ayudar

Kennedy ${{7*7}} Sanchez ${7*7}

student•

No entiendo la duplicidad de archivos de static/ y public/ es necesario?

CRISTIAN DAVID VILLOTA JACOME Villota J

student•

Cómo pudo pre visualizar la imagen desde sublime text?

Ricardo Azpeitia P.

student•

Sublime text 3 del build 3055 en adelante soporta preview de imágenes, solo tienes que arrastrar y soltar.

Alexander Morales Urrea

student•

Hola amigos, como es que defino la estructura de un proyecto web , las carpetas y que archivos lleva cada una?? Hay alguna guia para definirlo?? . Gracias.

Roberto Prince

student•

depende de cada proyecto,no hay una regla general, es algo que desarrollas intuicion. Tambien algunos frameworks de javascript como meteor y ember proponen una estructura de archivos

Irwing Khalisser Naranjo Brito

student•

¿Que sentido tiene que se cree otra carpeta con el mismo contenido que ya existe en la carpeta assets?

KEVIN BRAYAN LUNA FIGUEROA

student•

Sacha había comentado en un vídeo anterior que se realizaba ese paso es para que no pudieran accesar a la carpeta assets

Marifer Villarroel

student•

El favicon esta dentro de los materiales del curso?

Ricardo Azpeitia P.

student•

Si, en la carpeta de assets.

Jose Parra

student•

Cuando ejecuto el comando gulp me genera de nuevo el archivo css y la imagen del iphone.
Pero mi archivo css no tiene todo el código de materialize si no un import css… bueno no debería haber problema hasta allí, sin embargo los estilos no cargan, los dropdown no tienen efecto.
Que puede ser?

Diego Forero

Team Platzi•

Revisa que la ruta del import en el css es correcta, este puede ser el problema.

Jose Parra

student•

Tenías razón, estaba mal la extensión de mi archivo.

Gracias

Jesús Márquez Racero

student•

A mi me ocurre algo similar a anhy_s. La nueva tarea en gulp, assets, para copiar el archivo iphone.png de la carpeta assets a la carpeta public, no se ejecuta cuando ejecuto en consola el comando gulp. Es como si no tomara esa nueva tarea, como si no la hubiese escrito. La he revisado muchas veces y la sintaxis es correcta. Por favor espero una pronta respuesta ya que el avance en el curso se queda parado en este punto si no consigo actualizar y ejecutar el gulpfile.js

Este es mi archivo gulpfile.js

var gulp = require('gulp');

var sass = require('gulp-sass');

var rename = require('gulp-rename');

gulp.task('styles', function (){

gulp

.src('index.scss')

.pipe(sass())

.pipe(rename('app.css'))

.pipe(gulp.dest('public'));

})

gulp.task('assets', function (){

gulp

.src('assets/*')

.pipe(gulp.dest('public'));

})

gulp.task('default', ['styles'])

Guardo el archivo y esto es lo que ocurre cuando ejecuto en consola el comando gulp.

D:\platzigram>gulp

[11:52:13] Using gulpfile D:\platzigram\gulpfile.js

[11:52:13] Starting 'styles'...

[11:52:13] Finished 'styles' after 19 ms

[11:52:13] Starting 'default'...

[11:52:13] Finished 'default' after 17 μs

D:\platzigram>

Como veis solo se ejecutan las tareas styles y default, pero la tarea assets no.

Espero vuestra pronta respuesta. Gracias.

Jesús Márquez Racero

student•

Ok, ya vi el fallo, no adjutnte la tarea nueva al gulp.task, última linea

quedaría así....

gulp.task('default', ['styles', 'assets'])

que está muy bien explicado en el video y a mi se me paso por completo.. culpa mia.

Roberto Prince

student•

tambien pueden escribir

gulp assets

para lanzar la tarea de manera individual

Leonardo Barreto

student•

Estoy teniendo problemas para la tarea de css con gulp.

Les paso el error que me tira la consola ( en mac ), para ver si me puden ayudar. Comentando la variable rename, si cumple la tarea, el problema esta en la task de app.css

Error en consola :

Error: Cannot find module 'gulp-rename'

at Function.Module._resolveFilename (module.js:325:15)

at Function.Module._load (module.js:276:25)

at Module.require (module.js:353:17)

at require (internal/module.js:12:17)

at Object.<anonymous> (/Users/Lyonb/Desktop/platzi/Curso-javascript/platzigram/gulpfile.js:3:14)

at Module._compile (module.js:409:26)

at Object.Module._extensions..js (module.js:416:10)

at Module.load (module.js:343:32)

at Function.Module._load (module.js:300:12)

at Module.require (module.js:353:17)

at require (internal/module.js:12:17)

A alguien mas le paso esto? que puede ser? Muchas Gracias

Leonardo

student•

A mi me pasó lo mismo, no se exactamente cual fue el problema pero, te cuento como lo resolví:

Me meti en la carpeta node_modules del proyecto de platzi, busque allí la carpeta “gulp-rename” la copie y la pegue en el node_modules de mi proyecto

Balam Omaña

student•

Tengo el problema de que al momento de que sea crea la carpeta public no aparece el archivo iphone.js
Mi gulpfile

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');

gulp.task('styles', function () {
	gulp
		.src('index.scss')
		.pipe(sass())
		.pipe(rename('app.css'))
		.pipe(gulp.dest('public'));
})

gulp.task('assets', function () {
	gulp
		.src('assets/*')
		.pipe(gulp.dest('public'));
})

gulp.task('default', ['styles'])

Rodman M. Swanston C.

student•

No es un archivo js, es una imagen (png, jpg, gif, etc)

Pero puede que sea debido a que esta dentro de otra carpeta por ejemplo:
assets/img/iphone.png
De ser así tienes que cambiar lo siguiente

gulp.task('assets', function () {
	gulp
		.src('assets/**/*')
		.pipe(gulp.dest('public'));
})

Esto te permite copiar todo el contenido de otras carpetas tambien

Luis Enrique Muñoz Ibarra

student•

que mal, no me sale el p*to favicon