{"id":229565,"date":"2022-11-15T12:59:00","date_gmt":"2022-11-15T09:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229565"},"modified":"2022-11-09T08:29:35","modified_gmt":"2022-11-09T05:29:35","slug":"algunos-paquetes-de-gulp-para-principiantes","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/algunos-paquetes-de-gulp-para-principiantes\/","title":{"rendered":"Algunos paquetes de Gulp para principiantes"},"content":{"rendered":"\n

El software como Gulp<\/a> 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\u00eda ser as\u00ed).<\/p>\n

En comparaci\u00f3n con herramientas como CodeKit<\/a> (que todav\u00eda me gusta y recomiendo<\/a>, seg\u00fan el proyecto), tienen un poco m\u00e1s de gastos generales con respecto a configurarlos y prepararlos para funcionar.<\/p>\n

Pero una vez que lo haya configurado todo, puede ser realmente \u00fatil con un equipo distribuido independientemente del sistema operativo, y puede ayudar a que su proceso de compilaci\u00f3n sea un poco m\u00e1s s\u00f3lido.<\/p>\n

Sin embargo, ese no es el prop\u00f3sito de la publicaci\u00f3n. En cambio, aqu\u00ed hay una lista de algunos paquetes para empezar.<\/p>\n

Pi\u00e9nselo de esta manera: si est\u00e1 buscando formas de trabajar con Sass<\/a>, JavaScript y optimizaci\u00f3n de im\u00e1genes, estas son buenas bibliotecas.<\/p>\n

Paquetes Gulp para principiantes<\/h2>\n

Antes de saltar a cada uno de los siguientes paquetes, quiero se\u00f1alar que es importante leer cada una de las p\u00e1ginas vinculadas. La documentaci\u00f3n ayuda a recorrer las opciones que ofrecen las bibliotecas que el c\u00f3digo que proporcion\u00e9 no muestra.<\/p>\n

Es decir, no copie y pegue simplemente lo que he proporcionado. \u00daselo como punto de partida, pero tambi\u00e9n lea la documentaci\u00f3n. Puede que no encuentres nada nuevo.<\/p>\n

Por otra parte, es posible que encuentre que hay opciones para ajustar su proyecto en particular.<\/p>\n

1 descaro<\/h3>\n

Puedes optar por trabajar con Less<\/a> (no estoy ni aqu\u00ed ni all\u00e1, en realidad), pero tiendo a favorecer a Sass. Por lo tanto, uso una biblioteca, gulp-sass<\/a>, espec\u00edficamente para compilar archivos Sass en CSS.<\/p>\n

\"Algunos<\/a><\/p>\n

Normalmente tengo un\u00a0 directorio de activos<\/strong> y dentro de ese directorio hay algunos subdirectorios para im\u00e1genes<\/strong>, estilos<\/strong> y scripts<\/strong>.<\/p>\n

Dentro del\u00a0 directorio de estilos<\/strong>, tengo dos subdirectorios:<\/p>\n

    \n
  1. scs<\/strong><\/li>\n
  2. CSS<\/strong><\/li>\n<\/ol>\n

    Guardo todos mis archivos SCSS en el directorio respectivo y luego uso gulp-sass para generar los archivos compilados en CSS<\/a>.<\/p>\n

    gulp.task('sass', function(){\n  return gulp.src('assets\/styles\/scss\/*.scss')\n    .pipe(sass())\n    .pipe(gulp.dest('assets\/styles\/css'))\n});<\/code><\/pre>\n
    A partir de ah\u00ed, pongo en cola los archivos CSS utilizando la funci\u00f3n necesaria de la API de WordPress<\/a>.<\/p>\n
    2 Minificaci\u00f3n de JavaScript<\/h3>\n
    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\u00e1s en este punto.<\/p>\n
    Hay algunos paquetes que he probado en relaci\u00f3n con el trabajo con la minimizaci\u00f3n de JavaScript y gulp-uglify<\/a> es el que m\u00e1s me gusta usar.<\/p>\n
    \"Algunos<\/a><\/p>\n
    Recuerde de la secci\u00f3n anterior que tengo mi\u00a0 directorio de activos<\/strong> y dentro de \u00e9l tengo mi subdirectorio de scripts .<\/strong> Ese directorio contiene un solo subdirectorio propio: dev.<\/strong><\/p>\n
    Tomo los archivos JavaScript que se encuentran en dev<\/strong> y los env\u00edo<\/a> a la ra\u00edz del\u00a0 directorio de scripts<\/strong>.<\/p>\n
    gulp.task('minify-js', function() {\n  return gulp.src('assets\/scripts\/dev\/*.js')\n    .pipe(uglify())\n    .pipe(gulp.dest('assets\/scripts'));\n});<\/code><\/pre>\n
    A partir de ah\u00ed, como hice anteriormente, los pongo en cola usando la misma funci\u00f3n API de WordPress<\/a>.<\/p>\n
    3 Optimizaci\u00f3n de imagen<\/h3>\n
    Finalmente, una cosa que puede ser de gran ayuda para asegurarse de que su (s) p\u00e1gina (s) se cargue (n) r\u00e1pidamente es asegurarse de que sus activos de imagen est\u00e9n optimizados.<\/p>\n
    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\u00f3n de optimizaci\u00f3n, le recomiendo usar gulp-imagemin<\/a>.<\/p>\n
    [imagen]<\/p>\n
    Hay algunas dependencias para esta biblioteca en particular, por lo que deber\u00e1 asegurarse de que tambi\u00e9n est\u00e9n incluidas. \u00c9stos incluyen<\/p>\n