A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Continuando con la automatizaci贸n

8/25
Recursos

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

Aportes 20

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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'));
});

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))

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

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

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

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

//npm install gulp-minify-css
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", () => {
  gulp.watch("scss/**/*.scss", gulp.series("style_min"));
});

En gulp4 la sintaxis cambia un poco para el watch

gulp.task(鈥榳atch鈥, function (){
gulp.watch(鈥榮css/**/*.scss鈥, gulp.series(鈥榮tyle_min鈥));
});

Me puse a investigar, y gulp-minify ya no se usa, est谩 鈥渄eprecated鈥. 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. 馃槈

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

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

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'])
})```

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

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

![](

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

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 min read-,Gulp.,que permite un mayor rendimiento.

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'));

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

Pueden arreglarlo en este link

Me parece que a d铆a de hoy existen mejores herramientas para hacer este proceso, pero es bueno aprender de todo un poco. 馃槂

No se que aprender con este curso 馃し馃徎鈥嶁檪锔 creo que hay osas mas simples.

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/'))
}

Hasta la parte de la primera tarea, todo bien. Pero luego no puedo avanzar de esto. Alguien sabe porqu茅? Ser谩 que cambi贸 todo?

Y el c贸digo que va en el archivo gulpfile.js dentro de la carpeta de nuestro proyecto, que me funcion贸 en Julio de 2020 es:

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

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

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

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

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

f