gulpfile.js

const { src, dest, watch, series, parallel } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const autoprefixer = require("autoprefixer");
const postcss = require("gulp-postcss");
const sourcemaps = require("gulp-sourcemaps");
const cssnano = require("cssnano");
const concat = require("gulp-concat");
const terser = require("gulp-terser-js");
const rename = require("gulp-rename");
const imagemin = require("gulp-imagemin"); // Minificar imagenes
const cache = require("gulp-cache");
const clean = require("gulp-clean");
const webp = require("gulp-webp");

const paths = {
    scss: "src/scss/**/*.scss",
    js: "src/js/**/*.js",
    imagenes: "src/img/**/*",
};

// css es una función que se puede llamar automaticamente
function css() {
    return (
        src(paths.scss)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .pipe(postcss([autoprefixer(), cssnano()]))
            // .pipe(postcss([autoprefixer()]))
            .pipe(sourcemaps.write("."))
            .pipe(dest("public/build/css"))
    );
}

function javascript() {
    return src(paths.js)
        .pipe(terser())
        .pipe(sourcemaps.write("."))
        .pipe(dest("public/build/js"));
}

function imagenes() {
    return src(paths.imagenes)
        .pipe(
            cache(
                imagemin({
                    optimizationLevel: 3,
                })
            )
        )
        .pipe(dest("public/build/img"));
}

function versionWebp() {
    return src(paths.imagenes).pipe(webp()).pipe(dest("public/build/img"));
}

function watchArchivos() {
    watch(paths.scss, css);
    watch(paths.js, javascript);
    watch(paths.imagenes, imagenes);
    watch(paths.imagenes, versionWebp);
}

function cleanBuild() {
    return src("./public/build", {
        read: false,
        allowEmpty: true,
    }).pipe(
        clean({
            force: true,
        })
    );
}

exports.css = css;
exports.watchArchivos = watchArchivos;
exports.default = series(
    cleanBuild,
    css,
    javascript,
    imagenes,
    versionWebp,
    watchArchivos
);
exports.build = series(cleanBuild, css, javascript, imagenes, versionWebp);