Continuando con la automatizació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(‘watch’, function (){
gulp.watch(‘scss/**/*.scss’, gulp.series(‘style_min’));
});

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. 😉

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. 😃

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