Algunos paquetes de Gulp para principiantes

El software como Gulp y otras utilidades no son nuevos. Para aquellos que no los han usado antes, puede ser un poco desalentador comenzar (pero en realidad no debería ser así).

En comparación con herramientas como CodeKit (que todavía me gusta y recomiendo, según el proyecto), tienen un poco más de gastos generales con respecto a configurarlos y prepararlos para funcionar.

Pero una vez que lo haya configurado todo, puede ser realmente útil con un equipo distribuido independientemente del sistema operativo, y puede ayudar a que su proceso de compilación sea un poco más sólido.

Sin embargo, ese no es el propósito de la publicación. En cambio, aquí hay una lista de algunos paquetes para empezar.

Piénselo de esta manera: si está buscando formas de trabajar con Sass, JavaScript y optimización de imágenes, estas son buenas bibliotecas.

Paquetes Gulp para principiantes

Antes de saltar a cada uno de los siguientes paquetes, quiero señalar que es importante leer cada una de las páginas vinculadas. La documentación ayuda a recorrer las opciones que ofrecen las bibliotecas que el código que proporcioné no muestra.

Es decir, no copie y pegue simplemente lo que he proporcionado. Úselo como punto de partida, pero también lea la documentación. Puede que no encuentres nada nuevo.

Por otra parte, es posible que encuentre que hay opciones para ajustar su proyecto en particular.

1 descaro

Puedes optar por trabajar con Less (no estoy ni aquí ni allá, en realidad), pero tiendo a favorecer a Sass. Por lo tanto, uso una biblioteca, gulp-sass, específicamente para compilar archivos Sass en CSS.

Normalmente tengo un  directorio de activos y dentro de ese directorio hay algunos subdirectorios para imágenes, estilos y scripts.

Dentro del  directorio de estilos, tengo dos subdirectorios:

1. scs
2. CSS

Guardo todos mis archivos SCSS en el directorio respectivo y luego uso gulp-sass para generar los archivos compilados en CSS.

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

A partir de ahí, pongo en cola los archivos CSS utilizando la función necesaria de la API de WordPress.

2 Minificación de JavaScript

En este punto, los beneficios de minimizar los archivos JavaScript se han demostrado una y otra vez, por lo que no voy a profundizar más en este punto.

Hay algunos paquetes que he probado en relación con el trabajo con la minimización de JavaScript y gulp-uglify es el que más me gusta usar.

Recuerde de la sección anterior que tengo mi  directorio de activos y dentro de él tengo mi subdirectorio de scripts . Ese directorio contiene un solo subdirectorio propio: dev.

Tomo los archivos JavaScript que se encuentran en dev y los envío a la raíz del  directorio de scripts.

gulp.task('minify-js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

A partir de ahí, como hice anteriormente, los pongo en cola usando la misma función API de WordPress.

3 Optimización de imagen

Finalmente, una cosa que puede ser de gran ayuda para asegurarse de que su (s) página (s) se cargue (n) rápidamente es asegurarse de que sus activos de imagen estén optimizados.

Claro, hay algunas herramientas que puede usar manualmente para hacer esto, pero si se encuentra agregando, cambiando o modificando activos de imagen con frecuencia y desea automatizar el proceso de compilación de optimización, le recomiendo usar gulp-imagemin.

[imagen]

Hay algunas dependencias para esta biblioteca en particular, por lo que deberá asegurarse de que también estén incluidas. Éstos incluyen

• imagen-gifsicle,
• imagein-jpegtran,
• imagen en la opción,
• imagein-svgo.

Estos pueden agregarse manualmente a sus archivos de configuración, instalarse a través de la línea de comando o de otra manera. Independientemente, asegúrese de tenerlos antes de intentar optimizar sus imágenes.

gulp.task('image-optimization', function() {
    return gulp.src('assets/images/*')
      .pipe(imagemin())
      .pipe(gulp.dest('assets/images'))
  }
);

Tenga en cuenta del código anterior (y lo que mencioné antes) que mi  directorio de imágenes está ubicado en activos, por lo que cuando ejecute la tarea como se mencionó anteriormente, optimizará cualquiera de los tipos de imágenes admitidos en esa ubicación.

¿Archivos de paquetes, archivos Gulp y todo eso?

Si es nuevo en Gulp, Node u otros sistemas de compilación, entonces hay un poco más que cubrir con respecto a la instalación y configuración de Node y Gulp.

He optado por omitir eso por ahora, ya que hay mucha documentación al respecto, pero tal vez echaré un vistazo a lo que usamos cada vez que lo incorporamos a nuestros proyectos.