Continuando con la automatización

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

Resumen

Continuamos la instalación de las funciones que necesitamos de gulp, y una vez instalados ahora vamos crear los siguientes archivos y funciones:

Dentro de la carpeta de SCSS crearemos una estructura atómica

Fundations
Atomos
Moléculas
Organismos
Páginas
Templates

En gulp vamos a crear las siguientes funciones:

Compilador de SCSS a main.css

Luis Lira

student•

Si a alguien no le funciona, es porque la versión de Gulp 4 cambia un poco su funcionamiento, les dejo el código como a mí me sirvió el watcher 😃 Es fácil de entender cómo funciona:

gulp.task('watch', () => {
    gulp.watch('scss/**/*.scss', gulp.series('style_min'));
});

Harold David Avila Sabogal

student•

muchas gracias

Jose Armando Acevedo Angarita

student•

Gracias me sirvió mucho

Jessica Carrillo Riaño

student•

para minificar sass no es tan necesario instalar otra dependencia, simplemente en la configuración de sass se da el tipo de salida.

.pipe(sass({outputStyle: "compressed"}).on('error', sass.logError))

Roger Carlos Ariel Alba

student•

Gracias Jessi!

Harold David Avila Sabogal

student•

que buen aporte muchas gracias

Héctor Gerardo Reyes Bautista

student•

El código completo actualizado a 05/2020 es:

let gulp = require(&quot;gulp&quot;);
let sass = require(&quot;gulp-sass&quot;);
let minifyCSS = require(&quot;gulp-minify-css&quot;);
let concat = require(&quot;gulp-concat&quot;);

//npm install gulp --save --only=dev
gulp.task(&quot;hello&quot;, function () {
  console.log(&quot;Hello!!!!! &quot;);
});

//npm install gulp-sass
gulp.task(&quot;sass&quot;, () =&gt; {
  return gulp
    .src(&quot;scss/**/*.scss&quot;)
    .pipe(sass())
    .pipe(gulp.dest(&quot;public/stylesheets&quot;));
});

//npm install gulp-minify-css
gulp.task(&quot;style_min&quot;, () =&gt; {
  return gulp
    .src(&quot;scss/**/*.scss&quot;)
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(concat(&quot;style_main.min.css&quot;))
    .pipe(gulp.dest(&quot;public/stylesheets&quot;));
});

gulp.task(&quot;watch&quot;, () =&gt; {
  gulp.watch(&quot;scss/**/*.scss&quot;, gulp.series(&quot;style_min&quot;));
});

Carlos Gómez Mont

student•

Excelente, funcionando Jun 2021

David Behar

student•

En gulp4 la sintaxis cambia un poco para el watch

gulp.task(‘watch’, function (){
gulp.watch(‘scss/**/*.scss’, gulp.series(‘style_min’));
});

Harold David Avila Sabogal

student•

muchas gracias

Juan Andrés Balsamo

student•

garcias!!!!!

Mariana Cortés

student•

Me puse a investigar, y gulp-minify ya no se usa, está "deprecated". Terminé llegando a algo llamado clean-css. (link aquí)

Igual siendo las cosas como son, seguiré aprendiendo siguiendo la clase con los paquetes que menciona Rulotico, y ya una vez dominados algunos conceptos ya sabré mejor cómo sacarle provecho a las actualizaciones. ;)

Enrique Devars

teacher•

clean-css es muy buena opción.

Miguel Angel Reyes Moreno

student•

Tal como en el vídeo anterior, les recomiendo muchísimo la extensión live sass compiler.

Luis Alejandro Vera Hernandez

student•

Gracias, me evitaste hacer todo ese tipo de instalaciones

Gonzalo Pimentel

student•

Les comparto el código que utilice y me funciono sin problemas como a Rulótico:

Alberto Castro Flores

student•

Clase 8 y no hemos hecho nada, increible :). Creo que solo tomare apuntes en este curso.

Eduardo Campo

student•

gulpfile.js

let gulp = require('gulp')
let sass = require('gulp-sass')
let minifyCSS = require('gulp-minify-css')
let concat = require('gulp-concat')

gulp.task('hello', function() {
  console.log('Hello!!!!! ')
})

gulp.task('sass', () => {
  return gulp
    .src('scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('public/stylesheets'))
})

gulp.task('style_min', () => {
  return gulp
    .src('scss/**/*.scss')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(concat('style_main.min.css'))
    .pipe(gulp.dest('public/stylesheets'))
})

gulp.task('watch', ['style_min'], () => {
  gulp.watch('scss/**/*.scss', ['style_min'])
})```

Pedro Amaya-Araujo

student•

Esta ultima funcion gulp.task para operar el ‘watch’ con el nuevo gulp version 4 ya no sirve, y me da este error:

assert.js:350
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Users/elcheleamaya/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Users/elcheleamaya/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/Users/elcheleamaya/Documents/Tracked Repositories/DermaCenter/Software/Compartido/Design System/DermaCenter_DS/gulpfile.js:28:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)

alguien nos podria ayudar, he buscado por internet, pero no encuentro ninguna solucion 😦

Platzi Team

student•

Prueba esta configuración:

gulp.task('serve', function () {
    browserSync.init({
        server: "."
    });
    gulp.watch('./dist/scss/style.scss', gulp.series('sass'));
    gulp.watch("./*.html").on('change', reload);
});

Gutierrez Diego

student•

No se que aprender con este curso 🤷🏻‍♂️ creo que hay osas mas simples.

Valentina Arenas Lozano

student•

Que bueno aprender esto, pero sinceramente creo que mejor sigo usando Prepos :v

Luis Palomo

student•

![](

Gulp-minify-css ya no se usa, pero hay otra opción:

Nohora Patricia Moreno García

student•

Para usuarios MAC, les dejo este tutorial, que resume la instalación de Gulp 4 y sus dependencias. https://medium.com/@quidiello/gulp-ejemplo-de-proyecto-sass-cd7d5a5f22c2#:~:text=3%20min%20read-,Gulp.,que%20permite%20un%20mayor%20rendimiento.

Nelson Alayón

student•

instalo todo y al ejecutar un comando me sale No gulpfile found. ¿alguien sabe por que?

Nelson Alayón

student•

ya pude, habia puesto dentro del views el archivo gupfile.js

Belén Sosa

student•

Tu pregunta me sirvió porque me pasaba lo mismo. :D

Raycris Maldonado

student•

Si les sale este error en 2022

ReferenceError: primordials is not defined

aquí les dejo un link con la solución https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node-js

Jason Arias

student•

Si estan usando gulp sass y no compila y aparece el siguiente error

todo se soluciona con el siguiente comando y declarando la const:

npm install gulp-sass sass

y denominando la constante en el archivo gulpfile.js

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

Luis Angel Olivárez Estrada

student•

Si a alguien le aparece en su terminal un mensaje con: ReferenceError: primordials is not defined

Pueden arreglarlo en este link

Sebastian Heredia

student•

Me parece que a día de hoy existen mejores herramientas para hacer este proceso, pero es bueno aprender de todo un poco. :)

Luis Palomo

student•

Una mejor forma de hacer sin necesidad de instalar minify es con un método de gulp-sass

const express = require('express'),
	gulp = require('gulp'),
	sass = require('gulp-sass')

gulp.task('sass', ()=> {
	gulp.src('./scss/**/*.scss')
		.pipe(sass({
			outputStyle: 'compact'  // o "compress"
			sourceComments: true // Para que incluya comentarios
		}))
		.pipe(gulp.dest('./public/stylesheets/'))
}

Luis Palomo

student•

Hasta la parte de la primera tarea, todo bien. Pero luego no puedo avanzar de esto. Alguien sabe porqué? Será que cambió todo?

Continuando con la automatización

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

Automatización

Automatización (Pre procesadores)

Continuando con la automatización

Paradigmas

SMACSS: Arquitectura de CSS escalable y modular

OCSS: Orientación de objetos en CSS

BEM

Bonus: Bootstrap

Naming

Naming

Qué son los tokens

¿Qué son los tokens?

Espaciado

Espaciado

Grillas

Grillas

Bonus: Animando en CSS

Mi primer componente

Mi primer componente

Documentación

Documentación

Testing

Testing

Bonus: Debug en el navegador

Deploy y versionamiento

Cómo empezar en Github

Deploy y versionamiento

Design review

Design review

Cierre