Fix para agregar JavaScript en el cliente

Clase 13 de 46 • Curso Definitivo de JavaScript 2016

Antes de continuar con el siguiente material es muy importante que prestes atención a este fix.

Por una actualización en la librería de Babelify, debemos hacer unos ajustes para que lo que hagamos en el siguiente video funcione correctamente.

Cuando estemos instalando babelify, debemos instalar también una librería que define qué cosas Babel debe transformar. Para eso corremos el comando:

babel-preset-es2015

Y cuando estemos escribiendo en el archivo Gulpfile.js la función:

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

Debemos colocar:

gulp.task('scripts', function () {
  browserify('./src/index.js')
    .transform(babel, {presets: ["es2015"]})
    .bundle()
    .pipe(souce('index.js'))
});

La línea más importante es la de

.transform(babel, {presets: ["es2015"]})

Ante cualquier duda o problema, no dejen de comentar en este material o en el siguiente!

Ramon Molina

student•

holaa que tal tengo problemas con el gulp antes de poner el scripts andaba todo bien asi que quizas es solo en esta ultima parte este seria mi codigo

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

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('scripts',function(){
  browserify('./src/index.js')
    .transform(babel,{presets: ['env']})
    .bundle()
    .pipe(source('index.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'));
})

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

y el packge.json

"author": "platzi",
  "license": "MIT",
  "dependencies": {
    "express": "^4.16.2",
    "materialize-css": "^0.100.2",
    "pug": "^2.0.0-rc.4",
    "save": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babelify": "^8.0.0",
    "browserify": "^14.5.0",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

desde ya muchas gracias hasta el momento me parece super interesante todo 😄

Ramon Molina

student•

cambie

var babel = require('babel-core');

por

var babel = require('babelify');

😄 por si le sirva a alguien

Gabriel Novoa

student•

Gracias me funciono!!! 😃

Fix para agregar 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)