datos.txt

instalamos node.js habilitando la opción de instalar herramientas automáticamente
luego se abrirá power shield para instalar éstas herramientas, si tiene algún error; ejecutar nuevamente el instalador y seleccionar reparar

- abrimos la terminal en vscode e iniciamos npm; npm init
ésto nos creará un archivo de tipo .json (package.json), configuramos los parámetros solicitados y finalmente escribimos yes

* Despues con npm habilitando instalamos sass con la terminal; npm install sass
ésto nos instalará las dependencias de sass y nos creará otro archivo .json (borrada)

- Instalamos sass como dependencia de desarrollo
* npm install sass --save-dev
nos crea una carpeta donde se encontrarán todas las dependencias que instalemos (node_modules, ésta carpeta se puede eliminar al finalizar el proyecto ya que toda la información la tendrá el archivo .json ya que será fácil de recuperar ejecutando en nuestra terminal 'npm install' que leerá la información del archivo package.json y descargará todo lo necesario) y un archivo package-lock.json

*********************
creamos una carpeta src y otra dentro scss para contener nuestros archivos .scss

para que el navegador pueda reconocer el archivo .scss tenemos que compilarlo modificando el archivo package.json, en la sección scripts;

  "scripts": {
    "sass": "sass --watch src/scss:build/css"
  }
  "sass" = es el script que lo va a mandar a llamar
  sass = es el tipo de archivo que buscará en los binarios (.bin) de la carpeta node_modules para ver si se encuentra dicho archivo
  src/scss = es la ubicación del archivo
  :build/css = es la carpeta donde se guardarán los archivos compilados

  para ejecutar este script (sass) vas a la terminal y ejecutas; npm run sass

  si yo actualizo el archivo .scss no se actualizará el archivo compilado hasta que lo vuelva a compilar. para solucionar ésto usamos --watch que estará vigilando cualquier cambio producido y compilará automáticamente
  *con ctrl c detenemos la escucha cuando terminemos de trabajar

  /*******************
  Instalar gupl
  npm install -D guplp

  debemos crear un archivo en la raiz de nuestro programa llamado; gulpfile.js
  en el archivo gulpfile.js se crean funciones las cuales gulp las pasa a binario para ser utilizadas y llamadas dentro del programa
  * ésta taréa se puede mandar a llamar desde el package.json agregandola a la seción de script; "tarea": "gulp tarea"
  y la llamamos desde la consola con; npm run tarea

  **************
  instalamos una dependencia de gulp en la consola
  npm install --save-dev gulp-sass
  gulp-sass conecta gulp con sass

  mandamos llamar desde cmd
  npx gulp css

****************************
instalamos plumber para que no se detenga el autocompilado por algún error de escritura, en el cmd;
npm install --save-dev gulp-plumber
y lo importamos en el archivo gulpfile.js;
const plumber = require('gulp-plumber');

*********************************
Instalando dependencia de gulp para convertir imagenes a webp
cmd; npm install --save-dev gulp-webp

***********************************
Instalando conversor de imagenes con una api (imagemin) en la versión 7.1.0 (no es la más actual pero si la que funciona mejor), reduce el peso de las imágenes manteniendo el formato

npm i --save-dev gulp-imagemin@7.1.0

**********************************
Instalando dependencia de caché para que funcione el conversor de imagenes (imagemin) ya que debe guardar los datos en la memoria caché
npm i --save-dev gulp-cache

************************************
dependencia para crear imagenes .avif
npm i --save-dev gulp-avif

**********************************************
PARA REINSTALAR DEPENDENCIAS DESDE PACKAGE.JSON

npm install -D 	--save-dev 	Instala el paquete en el proyecto, como dependencia de desarrollo.
npm install 	--save-prod 	Instala el paquete en el proyecto, como dependencia de producción.
npm install -g 	--global 	Instala el paquete en el sistema, sin asociarlo al proyecto.

**********************************************
instalamos herramientas para comprimir el código css compilado

npm i --save-dev cssnano autoprefixer postcss gulp-postcss

**************************************************
instalamos una herramienta de gulp para mapear el código css y javascript

npm i --save-dev gulp-sourcemaps

******************************************************************
para comprimir el código de js

npm i gulp-terser-js

***************************
para subir a un hosting, en este caso el hosting gratuito de netlify
1 borramos la carpeta node_modules ya que esta carpeta se crea con el archivo package.json y no es necesaria ya que en la carpeta build ya estan todos los archivos trabajados con todas nuestras herramientas de la carpeta node_modules y solo es necesaria en desarrollo, no en producción
2 borramos el archivo package-lock.json porque también se creará sola