Agregando JavaScript en el cliente

Clase 14 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Hemos hecho un poco de JavaScript del lado del servidor: ¿Cómo nos preparamos para el front-end?, muy sencillo nos apoyaremos de Browserify, Babel y Gulp. La combinación de estas herramientas nos permitirán ejecutar código de ECMAScript 6 para todos los navegadores desde ya. Por lo cual, aprovecharemos todas esas nuevas ventajas que nos da el nuevo standard.

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

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

Daniel Farnos

student•

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•

http://stackoverflow.com/questions/30794356/why-do-i-have-to-use-vinyl-source-stream-with-gulp

martin Berkhoff J.

student•

https://github.com/npm/npm/issues/9204#issuecomment-216853959
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?

Jeison Higuita

student•

asi:

import $ from 'jquery'

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

https://www.npmjs.com/package/jquery

Giancarlo Vera Burgos

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.