Automatización (Pre procesadores)

Clase 7 de 25 • Curso de Sistemas de Diseño para Desarrolladores

Resumen

Dentro de nuestro proyecto vamos a instalar otras dos dependencias npm install gulp y npm install scss

¿Qué es gulp?

Gulp es una herramienta para poder automatizar procesos por medio de pipelines, o sea flujos , digamos que le decimos primero haz esto y luego haz esto con tan solo un comando, justo lo que necesitamos.

¿Qué es SCSS?

Como CSS requiere de muchos caracteres pues SCSS lo hace más fácil donde utilizamos el poder de la programación para definir variables y construir de manera modular CSS, esto nos mantiene óptimos y sobre todo podemos asegurar la consistencia de nuestro sistema. Comenzamos a instalar las funciones que necesitas para potenciar tu SCSS y terminaremos de hacerlo en la siguiente clase.

Harold David Avila Sabogal

student•

A la fecha funciono siguiendo estos pasos

Revisar si están instalados correctamente node, npm, and npx
Instalamos gulp-cli mediante npm install --global gulp-cli de manera global
Una vez creada la carpeta del proyecto nos dirigimos a ella en la terminal. 4.igualmente dentro de esta debe existir el archivo package.jason de lo contrario iniciarlo mediante npm init. 5.Instalamos gulp mediante npm install --save-dev gulp guardándola en el entrono de desarrollo 6.Verificamos la versión de gulp mediante gulp --version 7.Para evitar el error de comunicación asíncrona basta con reemplazar el código del archivo gulpfile.js por el siguiente:

<var gulp = require('gulp');

gulp.task('hello', done => {
 console.log('Hello World!!')
 done()
})
>

Luis Palomo

student•

Muy bueno tu aporte. Importante tener instalado gulp de manera global y no solo para la carpeta de desarrollo

Jhonny Lincol Quispe Navarro

student•

Si no quieren installar Gulp de manera global, pueden correrlo de la siguiente manera: - con npx gulp hello - o crear un comando personalizado en package.json dentro de los scripts como por ejemplo "gulp": "gulp hello", y solo ejecutan npm run gulp en la terminal.

Enrique Alexis Lopez Araujo

student•

En las nuevas versiones de gulp hay que definir las funciones de diferente forma tanto con arrow function como funciones asincronas les comparto el codigo de mi archivo de gulpfile.js como es que esta:

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var version = require('./package.json');

//npm install gulp --save --only=dev
gulp.task('hello', async () =&gt; {
  console.log('Hello ');
});
//npm install gulp-sass

gulp.task('sass', async () =&gt; {
  return gulp
    .src('scss/**/*.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('public/stylesheets'));
});

Jair Neri

student•

gracias

Juan Ignacio Contreras

student•

GENIOOO!! gracias :D

María Sierra

student•

Muy buena clase :) Me encantan los sistemas de diseño. ¿Quería saber si no soy la única que se siente especial cuando Rulótico dice 'Bebés de luz'? Jejeje :p

Leonardo David Martinez Hernandez

student•

NOOOOO y cuando hace el ademan de corazoncito hahahahahaha

Erick Alemán Aragón

student•

Prefiero Usar Prepross menos configuracion y mas directo

Rafael Alvarez Cardona

student•

es cuestion de gustos! es recomendable saber de las 2 formas!

Platzi Team

student•

Prefiero Usar Prepross menos configuracion y mas directo X2

Eduardo Campo

student•

Window:
npm install gulp-cli -g
npm install gulp -D

Cristhian Daza

student•

Gracias

Harold David Avila Sabogal

student•

gracias

Juan Manuel Patiño Valencia

student•

Hola comunidad!, me encontre con un que la librería

gulp sass

estaba deprecada, entonces les ahorro la consulta de la librería que la reemplazo y fue

gulp-dart-sass

les comparto el código de mi fichero de gulp para que los prueben y me comenten como les fue , saludos a todos

var gulp = require('gulp')
var sass = require('gulp-dart-sass');
 
gulp.task('sass', async () => {
    return gulp
      .src('scss/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('public/stylesheets'));
  });

Jorge Alejandro Niglia

student•

Perfecto

Wilson Yesid Espitia Zarate

student•

Gracias por el dato actualizado buen hombre

Diego Rodriguez

student•

para los que no les haya servido gulp hello en este enlace les dejo unos pasos muy simples para que les funione, a mi me sirvio!!

Bryan Duarte

student•

Loco muchas gracias!!!, en el enlace se explica todo super bien

María Sierra

student•

Muchas gracias por tu aporte!

Gonzalo Pimentel

student•

Les comparto algunos detalles con los que me topé. (Uso Ubuntu 20.04 LTS) Para instalar gulp sin ningún problema seguí este tutorial: https://tecadmin.net/install-gulp-js-on-ubuntu/ *Instalé gulp escribiendo el siguiente comando en la terminal: sudo npm install -g gulp-cli *Luego entré a la carpeta del proyecto 'Platzi_DS' y agregué el módulo de gulp en la carpeta del proyecto con el comando: npm install --save-dev gulp *Para comprobar que se instaló sin problemas escribes gulp -v y si te aparece la versión todo bien! Otro detallito fue la forma de definir las funciones de gulp en el editor de código, tienen que ser funciones asíncronas, debería ser así:

Estiventh Leonardo Neira Aldana

student•

Graciaaaaassss

Aarón Fabricio Santa Cruz Valdez

student•

instalo gulp pero cuando pongo gulp -v me aparece que no encuentra el comando

Jaime Diaz

student•

Hola, les comparto un aporte sencillo
(Para usuarios windows o en otros SO quizás también aplica):

En una línea podrán descargar la dependencia de gulp-cli y sass de la siguiente manera (como dependencia de desarrollo):

npm install -D gulp gulp-cli gulp-sass

¡Saludos!

Alvise Leal

student•

¿Para que es la opción -D ?

Roger Carlos Ariel Alba

student•

Hola Alvisex

el -D es para que corra en tu proyecto, si fuera -g se instala de forma global.

Karla Cruz

student•

Amí me funcionó esto en 2022: Instalar los paquetes como devDependencies.

npm install --save-dev gulp
npm install sass gulp-sass --save-dev

Luego les aparecera un apartado en el package.json así: “devDependencies”: { “gulp”: “^4.0.2”, “gulp-sass”: “^5.1.0”, “sass”: “^1.55.0” }

para compilar gulp sass cambien las var por const asi:

‘use strict’;

const gulp = require(‘gulp’); const sass = require(‘gulp-sass’)(require(‘sass’));

Raycris Maldonado

student•

Gracias Karla!

Wilkins Bernardo Brito Serrano

student•

Ahora les cuento sobre el primer error que tuve, mi ventana de comando no podía terminar el gulp hello, tal como sale en el video de Rulotico, al profesor sí le salía star gulp y el finish gulp, así que me puse a investigar y resulta que en las nuevas actualizaciones del gulp, (en la fecha que escribo este comentario 26 de septiembre 2020) no puedes escribir function así nomás function() EPIC FAIL. y es frustrante cunado no te corre el código, así que lo cambié por una arrow function que investigué es la manera correcta de hacerlo hoy en día. y aquí les dejo mi código. Espero les sirva si están atorados como yo. guardas, y ejecutas en la ventana de comandos gulp hello. y ya está, te funciona

MARTIN SGATTONI

student•

hice todo pero cuando pongo gulp hello me tira error...

Harold David Avila Sabogal

student•

me pasa lo mismo, sigo todo tal cual y da error en la consola

Johan Elián Apolinario Véliz

student•

El problema es que la version del curso es 3.x.x y la version actual de Gulp es 4.x.x.

Ruben Eduardo Acosta Vela

student•

¿Porque usar Gulp y no Webpack?

Camilo Castillo

student•

Considero que es mejor Webpack, porque es el estándar y la inmensa cantidad de utilidades CLI que existen para él no es comparable a Gulp.

Jesus Sandrea

student•

Desde mi experiencia. Gulp es mejor para manejar sitios web mucho mas estaticos. Utilizando HTML, CSS y Javascript. Webpack es para projectos avanzados y mucho mas dinamicos. Es decir si vas a usar React, Angular o tu propio framework basado en JavaScript

Rafael Alvarez Cardona

student•

Me gustaria que hicieran un curso especifico de Gulp

Eduardo Reyes

student•

Creo que es mucho más fácil usar Prepros es mucho más fácil de usar, es gratis y está en el curso de Preprocesadores de CSS

Julisa Gabriela León Corrales

student•

Si es que tienen problemas les recomiendo que en vez de poner el npm install gulp-sass pongan npm install --save-dev sass y en vez de esto var sass = require('gulp-sass'); pongan esto var sass = require('gulp-sass')(require('sass')); 💚💚

Reynaldo Francisco Moreno Briceño

student•

Todo esto lo podemos hacer con Prepos...

Andrés Osorio

student•

Excepto si quieres hacer un cambio rápido directamente en el servidor

Wilson Romero

student•

Me gusta el poder

Juan Castro

teacher•

Advantages of Using a Preprocessor (Sass) in CSS Development

Harold David Avila Sabogal

student•

gracias por el aporte

Alexander Valencia

student•

gulp es como un webpack?

Diego Forero

Team Platzi•

No, con gulp puedes ejecutar tareas o código que quieras. Webpack te permite empaquetar y mejorar el proceso de distribución de tus apps. Si bien gulp puede hacer cosas similares a las que hace Webpack, webpack no puede hacer todo lo que hace gulp.

Automatización (Pre procesadores)

Introducción

Qué aprenderás sobre los sistemas de diseño para desarrolladores

Conoce Sistemas de Diseño populares

Instalación y flujos de trabajo

Bonus: Personalizando la Terminal

Instalación y flujos de trabajo

Instalación de Node / Express desde 0

Bonus: html, css, js