Gulp JS

Es un automatizador de tareas, todo lo que necesitemos correr de manera repetitiva, gulp lo hace por nosotros

Gulp solo se utiliza en desarrollo no en servidor

    Requerimientos

  • Descargar e instalar NODE

    Labores que hace Gulp

  1. IMagenes optimiza el tamaño de las imagenes
  2. gulp-babel transforma el codigo a es5
  3. gulp-terser ofusca el codigo
  4. gulp-concat une todos nuestros archivos js en uno solo

    Comandos de gulp

  • Instalacion: npm install --global gulp-cli instala de forma global Gulp pero solo se instala UNA VEZ
  • npm init te crea el archivo package.json, las posteariores instalaciones se guardaran aquí
  • npm install --save-dev gulp indica que usaremos una dependencia de desarrollo, osea que no va a subir al servidor
  • npm install --save-dev @babel/core @babel/register @babel/preset-env
  • npm install --save-dev gulp-babel transforma el codigo a es5
  • npm install --save-dev gulp-terser ofusca el codigo
  • npm install --save-dev gulp-concat une todos nuestros archivos js en uno solo

    Modo de uso, configuraciones e instalaciones

  1. Instalacion: npm install --global gulp-cli
  2. npm init te crea el archivo package.json
  3. npm install --save-dev gulp
  4. npm install --save-dev @babel/core @babel/register @babel/preset-env
  5. Create gulpfile.bable.js, ahí se crean las tareas
  6. Create .babelrc y pegamos { "presets": ["@babel/preset-env"] }, eso compilará nuestro codigo nuevo al codigo viejo
  7. npm install --save-dev gulp-babel transforma el codigo a es5
  8. npm install --save-dev gulp-terser ofusca el codigo
  9. npm install --save-dev gulp-concat une todos nuestros archivos js en uno solo
  10. Crear carpeta src
  11. Crear archivo index.js

    New use

  1. npm install gulp-cli -g
  2. npm init -y
  3. npm install gulp gulp-sass gulp-postcss cssnano gulp-terser browser-sync Para instalar sass,postcss,terser y browser

  5. NOtes

  6. css nano es un complemento de postcss y también sirve para minificar los archivos JS

    IMPORTANTE

  • por cada funcion que querramos hacer se usa un pipe
  • browser es un servidor para que las modificaciones se vean al momento sin recagar el sitio web