Package bundling con gulp y sass

Clase 9 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Las primeras dudas que tendremos como desarrolladores JavaScript serán prácticamente sobre qué herramientas usar: Gulp, grunt, browserify, webpack, sass, less, stylus: ¿Qué son y qué usar en cada caso?. Es importante distinguir primero su funcionalidad: Tenemos constructores de paquetes, gestores de tares y preprocesadores de CSS. Cada herramienta tiene su forma de uso, e incluso, puedes combinarlos entre sí. Para nuestro proyecto elegimos: browserify (lo usamos más adelante), gulp y sass, y así es como lo configuramos.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-6.zip

Jorge Mario Carrillo Lopez

student•

Nota: Para activar el Syntax de Sass en Sublime Text 2 & 3, vayan a:
Preference ==> Package Control ==> Allí escriben - Package Control: Install + Enter ==> en las opciones escriben - Sass y dan clic encima para que se active. Una vez hagan esto van: View ==> Sintax y allí seleccionan Sass, para que la siguiente línea de comandos se active con los colores correspondientes que indican que se esta escribiendo css para Sass.

fabian cantillo

student•

asdasd

fabian cantillo

student•

gracias pana

Bky Bk

student•

En el minuto 9:55 nos explican algo relacionado a las versiones.
Si consideramos un formato de versión del tipo X.Y.Z (Major.Minor.Patch) éstas se componen de (Major.Minor.Patch).

"^" o "exponencial" nos va a traer la versión más reciente del "minor".
"~" o "circunflejo" indica que buscará la última versión del PATCH.

Fernando López Moreno

student•

Gracias.

Manuel Martínez Ortiz

student•

Falto agregar “*” o “asterisco” nos va a traer la Major Version.

Yoel Velasquez Valencia Velasquez

student•

browserify? no se implemento.. :S

Daniel Hernández

student•

en el video falto quitar el CDN a normalize en nuestro html, no lo olviden

Diyar Bakir

student•

se actualizó la manera de instalar gulp de forma global

aca les dejo el comando actual

npm install gulp-cli -g

mas info en https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Roberto Prince

student•

gracias

Cristian Nuñez

student•

o se puede hacer sudo npm install -g gulp

Jose Meira

student•

Todos los cursos igual… que pesadilla con express, express, express… pero ninguno que explique el funcionamiento a nivel interno de express. Es como estar tirando código sin saber lo que hace o por qué lo hace de esa manera… creo que no se pierde nada abriendo el core de express y explicando algunas cuestiones técnicas, sobre todo para los que venimos de hacer MVC en otros lenguajes y con JS nos cuesta entender algunos conceptos.

Francisco Jose

student•

Te doy toda la razón.

Nacho Cornejo

student•

En que momento aclaran cuando se instala express?

Alberto Fabian

student•

¿Alguien tuvo problemas con el archivo de sass? es decir el index.scss

Gabriel Murillo Medina

student•

esto es para quienes no pudieron utilizar el gulp para automatizar el cambio del archivo .scss al .css

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

function style() {
  return gulp.src('index.scss')
   .pipe(sass())
   .pipe(rename('app.css'))
   .pipe(gulp.dest('public'));


}
exports.default = style;

Kevin Stiven Peña Sepúlveda.

student•

Gracias :D

Kevin Lozoya Giner

student•

En esta clasé he aprendido un montón, y me encanta esa forma de trabajar.
Aquí algunos concepto de la clase:

Un package bundler es constructor de paquetes o ensamblador de paquetes. Una vez tengamos esos paquetes instalados en nuestro ordenador, lo que falta es unirlo. Es decir, unir nuestro código con ese código que son todas nuestras dependencia. Por tanto, lo que va a hacer el ensamblador se meter más código en medio de eso para que se puedan relacionar unos con otros. Por ejemplo, si en dos lugares utilizamos un módulo o paquete o libreria de terceros, no tengamos que copiar el código de esos módulos, así que solo copiará el código una vez, haciendo que los require se hagan de forma correcta y sin duplicar código y utilizar la versión que se debe utilizar.
Un programa que hacer eso es browserify.
Otro package bundler muy estandarizado el webpack
También existen los automatizadores. Esto automatizadores lo que hace es automatizar tareas por nosotros, es decir, crear el archivo bundler.js (este archivo final que incluye todo) puede requerir varias líneas de código, por tanto, vamos a utilizar como automatizador librerias como grunt (el cual tiene un archivo de configuración que nos permites personalizar mucho cómo queremos que haga las cosas) y gulp (que a través de un archivo gulpfile detallaremos paso a paso cómo queremos que arme nuestro bundler).
Y por último, tenemos los pre-procesadores de estilos. Lo que permiten es escribir menos código mediante variables, ciclos, etc… Como sass,_ less_, stylus…

Raúl Giner Llorens

student•

Por favor, hagan una actualización de esta clase

Erick Neftalí Sarmiento Cortes

student•

Tuve problemas ya que no me permitía correr el gulp y no generaba nada en el archivo package.json, alguien sabe a que se debe?

Sebastian Castillo

student•

Quizás no pusiste en la consola la ruta donde está ubicada el proyecto.

Ramiro Tolosa

student•

Tengo el mismo problema. Corro gulp y me salta un error. Copié Gulpfile.js de la libreria del curso y no funciona tampoco

Nicolas Alejandro Herrera

student•

al utilizar git, deberiamos ignorar la carpeta node_modules?

Talo Velasco

student•

Sí, ignorá la carpeta node_modules y bower_components. Los que debés de conservar es el package.json y bower.json ya que estos son los que llevan el control de los paquetes que necesitás en tu proyecto. Luego con un simple npm install o bower install podés tener todos tus módulos de node y los componentes de bower :)

José Granado

student•

Hola ¿Sabes como borrar la carpea node_modules? Es que lo subí y no se como quitarla… He intentado de todo…

José Andrés Salmerón Alfaro

student•

me sale este error al correr el comando gulp, no se que es ya tengo rato buscando el error y no lo encuentro me pueden ayudar por favor

assert.js:339 throw err; ^

AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (D:\platzi\Curso definitivo JavaScript\PlatziGram\node_modules\undertaker\lib\set-task.js:10:3) at Gulp.task (D:\platzi\Curso definitivo JavaScript\PlatziGram\node_modules\undertaker\lib\task.js:13:8) at Object.<anonymous> (D:\platzi\Curso definitivo JavaScript\PlatziGram\gulpfile.js:11:6) 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) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18)

Victor Flores

student•

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

sass.compiler = require('node-sass');

gulp.task('styles', function() { return gulp.src('index.scss') .pipe(sass()) .pipe(rename('app.css')) .pipe(gulp.dest('public')); }); gulp.task('assets', () => { gulp.src('assets/*') .pipe(gulp.dest('public')); })

gulp.task('watch', () => { gulp.watch('index.scss', gulp.series('styles')); gulp.watch('asset/*', gulp.series('assets')); });

gulp.task('default', gulp.parallel('styles', 'assets'));

Juan Sáez García

student•

Soy el único que se le instala package-lock.json?

Diego Forero

Team Platzi•

Ese archivo lo genera las nuevas versiones de npm a partir de la 5 si no estoy mal.

David Toca

student•

Es un archivo que genera npm para saber exactamente que dependencias tienes instaladas, el proposito del archivo es ponerlo en tu sistema de control de versiones y de ese modo todas las personas que trabajan en el repositorio tengan las mismas dependencias. Tambien es usado por npm para optimizar el proceso de instalacion, ya que evita bajar meta data de los paquetes que ya estan instalados.

helen osman

student•

Por que no Webpack ? lo encuentro mas facil de configurar que browserify y gulp juntos. sin usar tanto codigo

Sergio Daniel Xalambrí

student•

Para gustos colores, o herramientas y librerías de JS.

Alejandro Roa

student•

Esas mismas tareas pueden aplicar para less o stylus?

Daniel Pino

student•

Si, puedes buscar en las librerías de npm, hay gulp-less y gulp-stylus y más cosas.

Matias Trucido

student•

Si claro por ejemplo compilado de less, sass y stylus a Css.
También transpilado de JSX a javascript, de type-script también.
Transformación de ES6 a javascript viejo.
Compresión de imágenes, renombrado de archivos.
Levantar un servidor web, y un largo etc
Gulp tiene plugins para todo

JUAN PABLO GOMEZ GONZALEZ

student•

Muy paso a paso... excelente!!! Gracias Sacha & Platzi

George Bellota

student•

¿En que momento usamos browserify?

Ricardo Azpeitia P.

student•

No estoy seguro si te refieres al contenido del curso o si te refieres a técnicamente cuando usar browserify.

Para el primero, tal vez una búsqueda rápida te pueda decir en que video o curso.
https://platzi.com/search/?search=browserify

Si te refieres al aspecto técnico depende de tu proyecto, pero como “thumb rule” siempre que quieras hacer un “bundle” de todos los componentes que necesites.

Bewe Software Colombia SAS Bewe Software Colombia SAS

student•

Para quienes tiene problemas con el Gulpfile, la síntaxis ha cambiado un poco, ahora sería algo así:

const gulp = require ('gulp') const sass = require ('gulp-sass') const rename = require ('gulp-rename')

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

gulp.task('default', gulp.parallel('styles'));

Yoel Velasquez Valencia Velasquez

student•

browserify? no se implemento :S

Luigi Pizarro Caceda

student•

Cierto, seguramente fue un error en la edición pero ya lo instalarán luego, porque aún no lo hemos necesitado.