Agregando JavaScript en el cliente

Clase 14 de 46 • Curso Definitivo de JavaScript 2016

Gonzalo Blasco

student•

Solicito un favor al profe para sus futuros cursos:

POR FAVOR DEJA UN ESPACIO EN BLANCO DEBAJO DEL CODIGO (podes poner lineas en vacías apretando un par de veces ENTER) PARA QUE CUANDO NOS VEMOS OBLIGADOS A TOMAR NOTAS O ESCRIBIR EL CODIGO NOSOTROS ESTE NO SE VEA CUBIERTO POR LA BARRA DE REPRODUCCION INDICANDO PARA VOLVER A PONER PLAY

Muchas gracias, profe. Excelente curso.

Sacha Lifszyc

teacher•

Gracias por la recomendación!

Gonzalo Blasco

student•

Sacha, sigo tus cursos, me parecen excelentes. Espero en tus próximos cursos poder ver el código sin hacerlo tan complicado. Suerte, y éxitos.

Victor Hugo Cortés Posada

student•

es2015 ya es obsoleto, utilice el siguiente código para instalar:

npm install --save-dev browserify babelify babel-preset-env babel-core

En el archivo Gulpfile.js cambiar

.transform(babel)
por
.transform(babel, { presets: ['env'] })

Victor Gamez

student•

Gracias!

Brian Rene Valdez Gonzalez

student•

Gracias, igual me funcionó!

Mónica Ricardo

student•

Buenos días , existe alguna diferencia en utilizar gulp-concat , y dejar a un lado browserify ? , Gracias

RAMIRO GARCIA GONZALEZ

student•

Miren jeje XD

Usuario anónimo

user•

Yo estoy con el mismo problema de Martin, Hay alguna solución momentánea que no sea cámbiate a linux?

Eduardo Abad Tinoco

student•

Puedes utilizar codeanywhere 😄 asi no instalas nada en tu pc

Alfonso Jiménez Ruz

student•

A mí el código de gulpfile.js que me funcionó fue:

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var babelify = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

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

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

gulp.task('scripts', function() {
    return browserify('./src/index.js')
    .transform(babelify.configure({presets: ['env']}))
    .bundle()
    .pipe(source('index.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'))
})

gulp.task('default', ['compilar', 'assets', 'scripts']);

Espero que les sirva.

Fabián Ignacio Toro Riquelme

student•

Bueno, vengo teniendo dramas desde el video 9 por el tema de Gulp, mi solución fue simplemente usar Prepros para todas las compilaciones. Sera ps, no me quedaba otra xd

Cristhian Hernandez

student•

Para arreglar tu problema con gulp, solo tienes que usar npm i --save-dev gulp@3.9.0, en la época que se hizo este curso se uso la versión 3, y para la actualidad si instalas la versión mas reciente de gulp es la 4 y cambiaron varias cosas por lo que te dará error si intentas ejecutar código de este curso en la versión 4.

luis Guillermo zevallos

student•

buenas alguien que me ayude me sale cuando le pongo gulp cuando le poner el archivo de javascripts (index.js) minuto 11:30

C:\Users\TECNICO\OneDrive\platzi\javascrip\node_modules\babelify\index.js:16 throw err; ^

Error: Cannot find module '@babel/core' babelify@10 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babelify@8'. at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (C:\Users\TECNICO\OneDrive\platzi\javascrip\node_modules\babelify\index.js:9:11) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Diego Forero

Team Platzi•

Asegúrate de instalar babel/core npm install --save-dev @babel/core

leonardo Oteca

student•

Si estoy haciendo este curso en el 2018 es necesario realizar los pasos de babel teniendo en cuenta que es6 ya debe estar en la mayoría de navegadores?

Diego Forero

Team Platzi•

Algunas características no están soportadas por todos los navegadores, babel sigue siendo una herramienta a tener en cuenta para evitar problemas de compatibilidad.

Rodrigo Damián Martinez

student•

A mi tampoco, estaba buscando la misma respuesta y encima tengo activado JavaScript en todos los navegadores :c

Erick Neftalí Sarmiento Cortes

student•

me sale constantemente este aviso, como actualizo para que deje de salir?

(node:5379) fs: re-evaluating native module sources is not supported. If you are using
the graceful-fs module, please update it to a more recent version.

Yonathan Gutierrez

student•

A alguien mas le salta el problema 404 al intentar instalar browserify y babelify? no me a servido nada, ni borrar el manifiesto, ni limpiar la cache (npm cache clean), nada, si tienen la solucion se los agradeceria.

Yonathan Gutierrez

student•

ya lo pude instalar como super usuario, sin embargo cuando envío la orden "gulp" me sale ahora un error diferente...

Sebastián Durán

student•

En el minuto 7 el error es type="text/javascript" no type="application/javascript"

Daniel Acevedo

student•

El problema real no es el que tu dices realmete escribio mal puso "javsacript" en ves de "javascript"

Salvador Beltrán

student•

Error: Node Sass does not yet support your current environment: OS X 64-bit with false

FIX IT: npm rebuild node-sass

De nada 😃

Nestor Beltran

student•

que tal comunidad tengo una duda, al final cuando procesamos nuestro index.js con babel y lo guardamos en el archivo app.js, al revisar el código de el archivo de app.js no deberíamos de ver el código transpirado del arrow function? en otras palabras no debería de aparecer la función declarada de la siguiente forma ?

let numeros = [32,49,90,87,65];

let numerosMasUno = numeros.map(function (numero) {
  return numero + 1;
});

console.log(numerosMasUno);

porque en mi archivo app.js sigue apareciendo declarada la función como arrow function 😕 , de antemano gracias, saludos 😃

Nestor Beltran

student•

Resuelto: me faltaba el fix del babel-preset-es2015 , xD saludos

Alexander Silvera

student•

Al generar el codigo de gulpfile.js con los complementos de babel y browserify me salta un error en la terminal:

C:\Users\Acer\desktop\Blog_InfoUmbanda\gulpfile.js:4
var babel = require(‘babel-preset-es2015’);
^

SyntaxError: Unexpected token ILLEGAL
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
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)
at Liftoff.handleArguments (C:\Users\Acer\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:116:3)
at Liftoff.<anonymous> (C:\Users\Acer\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:198:16)
at module.exports (C:\Users\Acer\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\node_modules\flagged-respawn\index.js:17:3)

Edgar Muñoz

student•

Me funciona con el atributo type del script de app.js, por qué no funciona en el video???

Edgar Muñoz

student•

sorry por no verificar el resto del video...

Juan Zafra Uceda

student•

¿Qué combinación de teclas hay que utilizar para terminar el servidor? Siempre me toca salir de la consola y volver a entrar T_T

Yafté Roberto Muñoz Lujano

student•

contrl + C en Windows
comand + C en Mac

Belén Prats

student•

En mac es ctrl + C también 😄

martin Berkhoff J.

student•

Creo que mi problema es que no puedo usar el vinyl-source-stream con gulp por eso no me procesa el BUNDLE mi archivo JS. adjunto imagen del error que me da por consola cuando instalo por npm vinyl.
Además dejo adjunto una consulta dónde creo tienen el mismo problema, alguna ayuda porfavor??? llevo 2 días atrapado porque no me procesa mi archivo JS

martin Berkhoff J.

student•

acá hay una discusión del tema del not supported, SACHA si sabes como arreglar este error porfavor?, no eh logrado solucionarlos.

Ángel Martín Bernal Martin

student•

Buenas, tengo una gran duda,

Hemos visto como añadir browserify y transformarlo con babelify para que el codigo ES5 lo transforme a Javascript.

Quisiera desde mi archivo app.js importar Jquery (previamente instalado con npm install --save jquery).

El siguiente código tiene errores pero creo que se ve la idea que quiero hacer:

//archivo.js

//Codigo ES5

var numeros = [400, 200, 1, -938];
//EMacScript 2015
var numerosMas1 = numeros.map( n => n + 10);
console.log(numerosMas1);

//codigo jquery sin ES5

(function ($) {
$(function () {

$('.class').click()....

})(jQuery);

¿Cómo podría hacer en un archivo.js que llame a la biblioteca jquery y poder utilizar ES5 y código JS jquery en el mismo fichero?¿Es posible?¿Q alternativas hay?

Usuario anónimo

user•

asi:

import $ from 'jquery'

$('class').click(...)

Giancarlo Vera

student•

Tengo mis carpetas con cierta variación en la estructura, ya que vengo acostumbrado a tener mis scripts en la carpeta 'js' y mis estilos scss en la carpeta 'sass', hice los siguientes cambios en los tasks del gulpfile.js:

El index.scss lo llamé desde la carpeta 'sass'

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

  gulp

     .src('sass/index.scss')

     .pipe(sass())

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

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

})

El index.js lo llamé desde la carpeta 'js' con browserify y luego con gulp llamé a los otros script que tengo en esa carpeta: jquery-2.1.1.min.js y materialize.min.js, ya que prefiero tenerlos en local que via CDN

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

  browserify('./js/index.js')

     .transform(babel)

     .bundle()

     .pipe(source('index.js'))

     .pipe(rename('app.js'))

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

  gulp

     .src('js/*')

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

})

Y en index.pug los scripts me quedan así:

script(type='application/javascript' src='jquery-2.1.1.min.js')

script(type='application/javascript' src='materialize.min.js')

script(type='application/javascript' src='app.js')

Emiliano Durán

student•

Yo también llegué a la misma conclusión, aunque encaré el problema al revés... en lugar de defirnirlo en el inicio lo hice en el destino.

.pipe(gulp.dest('public/img')); // por ejemplo.

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var babelify = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

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

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

gulp.task('scripts', function() {
    return browserify('./src/index.js')
    .transform(babelify.configure({presets: ['env']}))
    .bundle()
    .pipe(source('index.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'))
})

gulp.task('default', ['compilar', 'assets', 'scripts']);

Agregando JavaScript en el cliente

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API

Obteniendo una respuesta del servidor con async/await

Agregando un botón para subir una nueva foto

Subiendo la foto a nuestro servidor web

Conclusiones

Cierre del curso

Es hora de construir el backend de Platzigram

Desafio 1: Hacer la página de un usuario

Desafio 2: Agregar un spinner mientras carga las imágenes del timeline

Desafio 3: Agregar un modal para mostrar una imagen en el perfil del usuario

Sesiones en Vivo

Stream 1: Resolviendo el primer desafío

Stream 2: Resolviendo el segundo desafío

Stream 3: Resolviendo el tercer reto

Stream 4: Resolviendo el cuarto reto

Stream Extra: Acceder a la webcam usando JavaScript

Complementos del curso

Unit testing en JavaScript con Mocha

Entendiendo los tiempos de ejecución en JavaScript

Usando babel en el lado del servidor (en Node.js)