{"id":229770,"date":"2022-11-19T19:00:00","date_gmt":"2022-11-19T16:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229770"},"modified":"2022-11-19T19:00:03","modified_gmt":"2022-11-19T16:00:03","slug":"primeros-pasos-con-los-paquetes-de-inicio-de-gulp","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/primeros-pasos-con-los-paquetes-de-inicio-de-gulp\/","title":{"rendered":"Primeros pasos con los paquetes de inicio de Gulp"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/es\/cual-es-la-diferencia-entre-codekit-y-composer\/\" title=\"Hablar sobre CodeKit\">Hablar sobre CodeKit<\/a> y los beneficios que ofrece para los desarrolladores front-end tambi\u00e9n se produjo justo despu\u00e9s de una publicaci\u00f3n y los beneficios que ofrece <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">algo como Gulp<\/a>.<\/p>\n<p>Una publicaci\u00f3n sobre la diferencia entre los dos, por qu\u00e9 es posible que desee uno sobre el otro y las ventajas o desventajas de cualquiera puede ser su publicaci\u00f3n.<\/p>\n<p>Pero para esto, me gustar\u00eda tomar los <a href=\"https:\/\/wordpress.mediadoma.com\/es\/algunos-paquetes-de-gulp-para-principiantes\/\" title=\"paquetes\">paquetes<\/a> de inicio sobre los que escrib\u00ed sobre Gulp y dar un ejemplo simple de un archivo Gulp de inicio y c\u00f3mo usarlo en sus proyectos de WordPress.<\/p>\n<h2>Primeros pasos con Gulp<\/h2>\n<p>Primero, soy fan\u00e1tico de Homebrew, as\u00ed 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\u00e1s f\u00e1cil.<\/p>\n<p>Si no ha le\u00eddo <a href=\"https:\/\/wordpress.mediadoma.com\/es\/homebrew-node-y-gulp-para-el-desarrollo-de-wordpress\/\" title=\"mi gu\u00eda sobre Homebrew\">mi gu\u00eda sobre Homebrew<\/a>, h\u00e1galo, ya que el resto de esta publicaci\u00f3n asume que lo tiene instalado.<\/p>\n<h3>1 Instalar trago<\/h3>\n<p>Si tiene Homebrew instalado, aseg\u00farese de que todo se vea bien y est\u00e9 actualizado. Tengo una gu\u00eda completa para configurar Gulp en su m\u00e1quina local.<\/p>\n<\/p>\n<p>Entonces, si a\u00fan no tiene esa configuraci\u00f3n, consulte <a href=\"https:\/\/wordpress.mediadoma.com\/es\/uso-de-homebrew-para-instalar-el-nodo-para-instalar-gulp\/\" title=\"esta publicaci\u00f3n\">esta publicaci\u00f3n<\/a> para saber c\u00f3mo hacerlo.<\/p>\n<h3>2 Escriba su archivo de configuraci\u00f3n de Gulp, Parte 1<\/h3>\n<p>Para inicializar un archivo de configuraci\u00f3n de Gulp, ingrese <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-00-gulpfile-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el siguiente comando<\/a> en el directorio ra\u00edz de su proyecto en su terminal:<\/p>\n<p>F\u00e1cil, \u00bfno?<\/p>\n<p>Esto crear\u00e1 un <strong>gulpfile.js<\/strong> en blanco en el directorio ra\u00edz de su proyecto. A continuaci\u00f3n, es hora de editar el archivo.<\/p>\n<p>Para esta publicaci\u00f3n, usar\u00e9 cuatro paquetes que he descrito anteriormente:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">trago<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">trago-sass<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tragar-imagen<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tragar-uglify<\/a><\/li>\n<\/ul>\n<p>Cada una de estas son tareas responsables de transpilar Sass, optimizar im\u00e1genes y minimizar JavaScript.<\/p>\n<blockquote>\n<p>Las tareas que desee ejecutar desde la l\u00ednea de comandos no deben tener espacios.<\/p>\n<\/blockquote>\n<p>Para configurar las <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulptaskname--deps--fn\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tareas<\/a> b\u00e1sicas para que pueda ejecutarlas desde la l\u00ednea de comandos, deber\u00e1 hacer lo siguiente:<\/p>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-01-gulp-task-sass-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Hablar con descaro a<\/a><\/h4>\n<pre><code>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<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-02-gulp-task-js-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JavaScript<\/a><\/h4>\n<pre><code>gulp.task('js', function() {\n  return gulp.src('assets\/scripts\/dev\/*.js')\n    .pipe(uglify())\n    .pipe(gulp.dest('assets\/scripts'));\n});<\/code><\/pre>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-03-gulp-task-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Im\u00e1genes<\/a><\/h4>\n<pre><code>gulp.task('images', function() {\n  return gulp.src('assets\/images\/*')\n    .pipe(imagemin())\n    .pipe(gulp.dest('assets\/images'))\n});<\/code><\/pre>\n<h4>Ejecut\u00e1ndolos individualmente<\/h4>\n<p>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:<\/p>\n<p>Pero esto envejece r\u00e1pido. Adem\u00e1s, es menos eficiente, especialmente cuando puede configurar un <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">reloj<\/a> para ejecutar autom\u00e1ticamente sus tareas cada vez que guarda un archivo.<\/p>\n<h3>2 Escriba su archivo de configuraci\u00f3n de Gulp, parte 2<\/h3>\n<p>Configurar un <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">reloj<\/a> es probablemente lo mejor que puede hacer cuando se trata de ahorrar tiempo con Gulp.<\/p>\n<blockquote>\n<p>Observe los archivos y haga algo cuando cambie un archivo. Esto siempre devuelve un EventEmitter que emite <code>change<\/code>\u00a0eventos.<\/p>\n<\/blockquote>\n<p>Configurar un reloj es f\u00e1cil. Es muy parecido a una tarea (de hecho, requiere una tarea) pero tambi\u00e9n tiene argumentos especiales. Para agregar una tarea de observaci\u00f3n que manejar\u00e1 Sass, JavaScript e im\u00e1genes, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-05-gulp-watch-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">configure lo siguiente<\/a> en su gulpfile.js:<\/p>\n<pre><code>gulp.task('watch', function() {\n    gulp.watch('assets\/styles\/scss\/*.scss', gulp.series('sass'));\n    gulp.watch('assets\/scripts\/dev\/*.js', gulp.series('js'));\n    gulp.watch('assets\/images\/*', gulp.series('images'));\n});<\/code><\/pre>\n<p>Luego solo ejecuta <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-06-gulp-watch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la tarea<\/a> :<\/p>\n<p>A partir de aqu\u00ed, cada vez que guarde un archivo Sass, un archivo JavaScript o realice un cambio en una imagen, la tarea se activar\u00e1 autom\u00e1ticamente y realizar\u00e1 el trabajo de la tarea definida. Tenga en cuenta que esto se ejecutar\u00e1 perpetuamente en su hilo, por lo que deber\u00e1 abrir una nueva pesta\u00f1a o ventana de terminal si necesita hacer alg\u00fan trabajo adicional.<\/p>\n<h2>Una nota sobre las versiones<\/h2>\n<p>En versiones anteriores de Gulp, el segundo argumento de la funci\u00f3n de vigilancia aceptaba una matriz; <strong>sin embargo, la \u00faltima versi\u00f3n requiere una funci\u00f3n real (que puede ver arriba en la serie<\/strong> que he declarado ).<\/p>\n<p>En pocas palabras, Gulp 4 permite la ejecuci\u00f3n secuencial, que se realiza a trav\u00e9s de <strong>series<\/strong>, y la ejecuci\u00f3n en paralelo (que puede usar la funci\u00f3n <strong>paralela<\/strong> ). Esos est\u00e1n m\u00e1s all\u00e1 del alcance de esta publicaci\u00f3n, ya que est\u00e1 destinado \u00fanicamente a ayudarlo a comenzar.<\/p>\n<p>Una vez hecho esto, deber\u00eda tener mucha m\u00e1s automatizaci\u00f3n en su proceso de construcci\u00f3n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comenzar con los paquetes de inicio de Gulp es una continuaci\u00f3n de una publicaci\u00f3n anterior que tiene como objetivo ayudar a automatizar las tareas comunes que usamos.<\/p>\n","protected":false},"author":1,"featured_media":165162,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716,747,914,840,861],"tags":[1172],"class_list":["post-229770","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-fuente-abierta","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229770"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/165162"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}