Automatización (Pre procesadores)
Clase 7 de 25 • Curso de Sistemas de Diseño para Desarrolladores
Contenido del curso
Harold David Avila Sabogal
student•
hace 7 años
Luis Palomo
student•
hace 6 años
Jhonny Lincol Quispe Navarro
student•
hace 6 años
Clase 7 de 25 • Curso de Sistemas de Diseño para Desarrolladores
Contenido del curso
Harold David Avila Sabogal
Luis Palomo
Jhonny Lincol Quispe Navarro
Enrique Alexis Lopez Araujo
Jair Neri
Juan Ignacio Contreras
María Sierra
Leonardo David Martinez Hernandez
Erick Alemán Aragón
Rafael Alvarez Cardona
Platzi Team
Eduardo Campo
Cristhian Daza
Harold David Avila Sabogal
Juan Manuel Patiño Valencia
Jorge Alejandro Niglia
Wilson Yesid Espitia Zarate
Diego Rodriguez
Bryan Duarte
María Sierra
Gonzalo Pimentel
Estiventh Leonardo Neira Aldana
Aarón Fabricio Santa Cruz Valdez
Usuario anónimo
Alvise Leal
Roger Carlos Ariel Alba
Karla Cruz
Raycris Maldonado
Wilkins Bernardo Brito Serrano
MARTIN SGATTONI
Harold David Avila Sabogal
Johan Elián Apolinario Véliz
Ruben Eduardo Acosta Vela
Camilo Castillo
Jesus Sandrea
Rafael Alvarez Cardona
Eduardo Reyes
Julisa Gabriela León Corrales
Reynaldo Francisco Moreno Briceño
Andrés Osorio
Wilson Romero
Juan Castro
Harold David Avila Sabogal
Alexander Valencia
Diego Forero
A la fecha funciono siguiendo estos pasos
<var gulp = require('gulp'); gulp.task('hello', done => { console.log('Hello World!!') done() }) >
Muy bueno tu aporte. Importante tener instalado gulp de manera global y no solo para la carpeta de desarrollo
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.
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 () => { console.log('Hello '); }); //npm install gulp-sass gulp.task('sass', async () => { return gulp .src('scss/**/*.scss') .pipe(sass()) // Converts Sass to CSS with gulp-sass .pipe(gulp.dest('public/stylesheets')); });
gracias
GENIOOO!! gracias :D
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
NOOOOO y cuando hace el ademan de corazoncito hahahahahaha
Prefiero Usar Prepross menos configuracion y mas directo
es cuestion de gustos! es recomendable saber de las 2 formas!
Prefiero Usar Prepross menos configuracion y mas directo X2
Window:
npm install gulp-cli -g
npm install gulp -D
Gracias
gracias
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')); });
Perfecto
Gracias por el dato actualizado buen hombre
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!!
Loco muchas gracias!!!, en el enlace se explica todo super bien
Muchas gracias por tu aporte!
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í:
Graciaaaaassss
instalo gulp pero cuando pongo gulp -v me aparece que no encuentra el comando
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!
¿Para que es la opción -D ?
Hola Alvisex
el -D es para que corra en tu proyecto, si fuera -g se instala de forma global.
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’));
Gracias Karla!
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
hice todo pero cuando pongo gulp hello me tira error...
me pasa lo mismo, sigo todo tal cual y da error en la consola
El problema es que la version del curso es 3.x.x y la version actual de Gulp es 4.x.x.
¿Porque usar Gulp y no Webpack?
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.
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
Me gustaria que hicieran un curso especifico de Gulp
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
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')); 💚💚
Todo esto lo podemos hacer con Prepos...
Excepto si quieres hacer un cambio rápido directamente en el servidor
Me gusta el poder
gracias por el aporte
gulp es como un webpack?
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.