Primeros pasos con los paquetes de inicio de Gulp

Hablar sobre CodeKit y los beneficios que ofrece para los desarrolladores front-end también se produjo justo después de una publicación y los beneficios que ofrece algo como Gulp.

Una publicación sobre la diferencia entre los dos, por qué es posible que desee uno sobre el otro y las ventajas o desventajas de cualquiera puede ser su publicación.

Pero para esto, me gustaría tomar los paquetes de inicio sobre los que escribí sobre Gulp y dar un ejemplo simple de un archivo Gulp de inicio y cómo usarlo en sus proyectos de WordPress.

Primeros pasos con Gulp

Primero, soy fanático de Homebrew, así que cuando se trata de administrar paquetes que no son parte de Mac App Store, lo uso. Esto hace que instalar paquetes, actualizarlos y desinstalarlos sea mucho más fácil.

Si no ha leído mi guía sobre Homebrew, hágalo, ya que el resto de esta publicación asume que lo tiene instalado.

1 Instalar trago

Si tiene Homebrew instalado, asegúrese de que todo se vea bien y esté actualizado. Tengo una guía completa para configurar Gulp en su máquina local.

Entonces, si aún no tiene esa configuración, consulte esta publicación para saber cómo hacerlo.

2 Escriba su archivo de configuración de Gulp, Parte 1

Para inicializar un archivo de configuración de Gulp, ingrese el siguiente comando en el directorio raíz de su proyecto en su terminal:

Fácil, ¿no?

Esto creará un gulpfile.js en blanco en el directorio raíz de su proyecto. A continuación, es hora de editar el archivo.

Para esta publicación, usaré cuatro paquetes que he descrito anteriormente:

• trago
• trago-sass
• tragar-imagen
• tragar-uglify

Cada una de estas son tareas responsables de transpilar Sass, optimizar imágenes y minimizar JavaScript.

Las tareas que desee ejecutar desde la línea de comandos no deben tener espacios.

Para configurar las tareas básicas para que pueda ejecutarlas desde la línea de comandos, deberá hacer lo siguiente:

Hablar con descaro a

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

JavaScript

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

Imágenes

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

Ejecutándolos individualmente

Ejecutar estas tareas individualmente requiere que escriba lo siguiente en la consola cada vez que desee, por ejemplo, transpilar sus archivos Sass y minimizar sus archivos JavaScript:

Pero esto envejece rápido. Además, es menos eficiente, especialmente cuando puede configurar un reloj para ejecutar automáticamente sus tareas cada vez que guarda un archivo.

2 Escriba su archivo de configuración de Gulp, parte 2

Configurar un reloj es probablemente lo mejor que puede hacer cuando se trata de ahorrar tiempo con Gulp.

Observe los archivos y haga algo cuando cambie un archivo. Esto siempre devuelve un EventEmitter que emite change eventos.

Configurar un reloj es fácil. Es muy parecido a una tarea (de hecho, requiere una tarea) pero también tiene argumentos especiales. Para agregar una tarea de observación que manejará Sass, JavaScript e imágenes, configure lo siguiente en su gulpfile.js:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Luego solo ejecuta la tarea :

A partir de aquí, cada vez que guarde un archivo Sass, un archivo JavaScript o realice un cambio en una imagen, la tarea se activará automáticamente y realizará el trabajo de la tarea definida. Tenga en cuenta que esto se ejecutará perpetuamente en su hilo, por lo que deberá abrir una nueva pestaña o ventana de terminal si necesita hacer algún trabajo adicional.

Una nota sobre las versiones

En versiones anteriores de Gulp, el segundo argumento de la función de vigilancia aceptaba una matriz; sin embargo, la última versión requiere una función real (que puede ver arriba en la serie que he declarado ).

En pocas palabras, Gulp 4 permite la ejecución secuencial, que se realiza a través de series, y la ejecución en paralelo (que puede usar la función paralela ). Esos están más allá del alcance de esta publicación, ya que está destinado únicamente a ayudarlo a comenzar.

Una vez hecho esto, debería tener mucha más automatización en su proceso de construcción.