{"id":4095,"date":"2024-07-04T10:12:04","date_gmt":"2024-07-04T08:12:04","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=4095"},"modified":"2024-07-04T13:58:07","modified_gmt":"2024-07-04T11:58:07","slug":"automatizacion-tareas-gulp-npm","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/automatizacion-tareas-gulp-npm\/","title":{"rendered":"Automatizaci\u00f3n de tareas con Gulp y NPM"},"content":{"rendered":"<p>En este art\u00edculo vamos a ver qu\u00e9 es\u00a0<strong>Gulp, c\u00f3mo a\u00f1adirlo<\/strong>\u00a0a nuestro\u00a0<strong>workflow<\/strong>, cu\u00e1les son los paquetes imprescindibles de NPM y c\u00f3mo configurar tareas en gulpfile.js.<\/p>\n<h2>\u00bfQu\u00e9 es Gulp?<\/h2>\n<p>GULP es una herramienta de <strong>construcci\u00f3n y automatizaci\u00f3n de tareas para desarrolladores web<\/strong>. Facilita y agiliza tareas repetitivas como la minificaci\u00f3n de archivos, la compilaci\u00f3n de preprocesadores CSS (como Sass o LESS), la optimizaci\u00f3n de im\u00e1genes, y la recarga autom\u00e1tica del navegador, entre otras. Utiliza un sistema basado en flujos de trabajo y dependencias de nodos, permitiendo escribir tareas en JavaScript y ejecutarlas en una secuencia espec\u00edfica, lo que simplifica la gesti\u00f3n y el mantenimiento del c\u00f3digo del proyecto. GULP es especialmente popular en el desarrollo frontend por su eficiencia y flexibilidad.<\/p>\n<h2>C\u00f3mo instalar GULP<\/h2>\n<p>Vamos a instalar todo lo necesario para que funcione y vamos a ver c\u00f3mo funciona\u00a0<strong>NPM<\/strong>\u00a0y el\u00a0<strong>package.json<\/strong>\u00a0que son los pilares b\u00e1sicos para utilizar\u00a0<strong>Gulp<\/strong>.<\/p>\n<ul>\n<li><strong>Node<\/strong>: Lo primero es tener instalado <strong>Node.js<\/strong> en nuestro equipo, para ello nos vamos a la web de Node.js y descargamos la version \u00abRecommended for most users\u00bb, a d\u00eda de hoy es la 4.4.7. A la vez que instalamos node.js tambi\u00e9n instalamos NPM.<\/li>\n<li><strong>NPM<\/strong>: NPM es el gestor de paquetes de node. Gracias a NPM tenemos a nuestra disposici\u00f3n miles de librer\u00edas para usar en nuestros proyectos. Si la versi\u00f3n de <strong>NPM<\/strong> que instalamos con Node.js est\u00e1 desactualizada as\u00ed que lo primero que vamos a hacer es instalar la \u00faltima versi\u00f3n.<\/li>\n<li><strong>package.json<\/strong>: El package.json es un archivo en formato JSON que almacena la informaci\u00f3n del proyecto como el nombre, repositorio, descripci\u00f3n, licencia, dependencias etc&#8230;<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>C\u00f3mo creamos nuestro archivo .json<\/h2>\n<p>Para crear este archivo vamos desde la consola a la ra\u00edz del directorio de nuestro proyecto y escribimos lo siguiente<\/p>\n<pre><code>\r\nnpm init\r\n\r\n<\/code><\/pre>\n<p>La consola nos har\u00e1 una serie de preguntas como las que vemos en la imagen<\/p>\n<div id=\"attachment_4097\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4097\" class=\"wp-image-4097 size-large\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/09\/terminal-npm-init-1024x754.png\" alt=\"terminal-npm-init\" width=\"1024\" height=\"754\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/09\/terminal-npm-init-1024x754.png 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/09\/terminal-npm-init-300x221.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/09\/terminal-npm-init-768x565.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/09\/terminal-npm-init-1536x1130.png 1536w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/09\/terminal-npm-init-360x265.png 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/09\/terminal-npm-init.png 1840w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-4097\" class=\"wp-caption-text\">terminal-npm-init<\/p><\/div>\n<p>Una vez terminado el proceso se habr\u00e1 creado un archivo con el nombre <strong>package.json<\/strong><\/p>\n<p>Si lo abrimos con nuestro editor de c\u00f3digo veremos lo siguiente<\/p>\n<pre><code>\r\n{\r\n\r\n\"name\": \"prueba\",\r\n\r\n\"version\": \"1.0.0\",\r\n\r\n\"description\": \"Esto es una prueba\",\r\n\r\n\"main\": \"index.js\",\r\n\r\n\"scripts\": {\r\n\r\n\"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"\r\n\r\n},\r\n\r\n\"keywords\": [\r\n\r\n\"prueba\"\r\n\r\n],\r\n\r\n\"author\": \"Hiberus Digital\",\r\n\r\n\"license\": \"MIT\"\r\n\r\n}\r\n\r\n<\/code><\/pre>\n<h3><\/h3>\n<h3>C\u00f3mo instalar paquetes de NPM<\/h3>\n<p>Los paquetes de <strong>NPM<\/strong> los podemos instalar de maneral global o local. Para instalar de manera global utilizamos <em><strong>-g<\/strong><\/em> para instalarlos de manera local utilizamos <em><strong>&#8211;save o -D<\/strong><\/em>.<\/p>\n<p>Para instalar un paquete de <strong>NPM<\/strong> vamos a la consola y escribimos lo siguiente<\/p>\n<pre><code>\r\nnpm install npm -g\r\n\r\n<\/code><\/pre>\n<p>Vamos a diseccionar el comando.<\/p>\n<p>[npm] Siempre que vayamos a instalar un paquete de <strong>NPM<\/strong> empezamos con npm<\/p>\n<p>[install] para que instale el paquete, podemos sustituir <em><strong>install por i<\/strong><\/em> y as\u00ed no tenemos que estar escribiendo<em><strong> install<\/strong> <\/em>todo el rato.<\/p>\n<p>[nombre-del-paquete] en este caso es <strong>Gulp<\/strong><\/p>\n<p>[-g | &#8211;save ] Aqu\u00ed indicamos como queremos instalar el paquete de manera global o local.<\/p>\n<p>Si instalamos todos los paquetes de manera local con <em><strong>&#8211;save o -S<\/strong> <\/em>se a\u00f1ade una nueva secci\u00f3n a nuestra package.json, aqu\u00ed se ir\u00e1n a\u00f1adiendo todos los paquetes que vamos instalando.<\/p>\n<pre><code>\r\n\"dependencies\": {\r\n\r\n\"gulp-postcss\": \"^6.1.1\"\r\n\r\n}\r\n\r\n<\/code><\/pre>\n<p>Esto es fundamental, por eso es muy importante instalar todas las dependencias con <em><strong>-S<\/strong><\/em> para que todas se a\u00f1adan a la secci\u00f3n de <em>dependencies<\/em>. Si se nos olvida <em><strong>-S<\/strong><\/em> no quedara constancia en el <strong>package.json<\/strong> de que estamos utilizando este paquete. Si una persona se descarga el proyecto y hace un <em><strong>npm i<\/strong><\/em> se instalar\u00e1 todas las dependencias que se han a\u00f1adido a la secci\u00f3n de <strong>dependencies<\/strong>.<\/p>\n<h3>Comandos de NPM cruciales<\/h3>\n<p>De ahora en adelante tendremos que familiarizarnos con una serie de comandos de <strong>NPM:\u00a0<\/strong><\/p>\n<ul>\n<li>npm init que como ya hemos visto sirve para inicializar el package.json<\/li>\n<li>npm i [nombre del paquete] [&#8211;save | -D] para instalar los paquetes como dependencias en nuestro package.json<\/li>\n<li>npm uninstall &#8211;save [nombre del paquete] para desinstalar de manera local un paquete en concreto<\/li>\n<li>npm help para mostrar una lista con todos los comandos disponibles<\/li>\n<\/ul>\n<h2><\/h2>\n<h2>Paquetes imprescindibles para Gulp<\/h2>\n<h3><strong>BrowserSync<\/strong><\/h3>\n<p>Es un paquete con la cual vamos a<strong>\u00a0levantar un servidor que ir\u00e1 actualizando el proyecto conforme vayamos haciendo cambios en nuestros archivos<\/strong>. Tambi\u00e9n nos ofrece la posibilidad de crear un servicio que levantara todo nuestro proyecto con una URL, la cual podemos pasar al cliente para que vaya viendo como avanza el proyecto. Genial para presentaciones.<\/p>\n<ul>\n<li><strong>Gulp Imagemin: <\/strong>Es un paquete para optimizar todo el apartado gr\u00e1fico de nuestra web, desde las im\u00e1genes hasta toda la iconograf\u00eda de nuestra web.<\/li>\n<li><strong>Gulp Newer: <\/strong>Este paquete la vamos a enlazar con otras tareas. Por ejemplo si estamos usando imagemin para optimizar nuestras im\u00e1genes newer se encargar\u00e1 de optimizar solamente las nuevas im\u00e1genes que vayamos a\u00f1adiendo a nuestro proyecto. As\u00ed no estar\u00e1 continuamente optimizando todas.<\/li>\n<li><strong>Gulp SASS: <\/strong>Es un paquete para compilar tus archivos de SASS.<\/li>\n<li><strong>Gulp rename: <\/strong>Es un paquete para renombrar f\u00e1cilmente cualquier archivo de nuestro proyecto.<\/li>\n<li><strong>Gulp Notify: <\/strong>Es un paquete para mostrar notificaciones en los diferentes sistemas operativos. As\u00ed no tienes que estar constantemente pendiente del terminal para ver las notificaciones.<\/li>\n<li><strong>Gulp Autoprefixer: <\/strong>Es un paquete para olvidarnos de a\u00f1adir todos los prefijos para que algunas propiedades de CSS funcionen en todos y cada uno de los navegadores modernos.<\/li>\n<li><strong>Gulp CSSnano: <\/strong>Es un paquete para optimizar todos nuestros archivos de CSS.<\/li>\n<\/ul>\n<h2>Tareas NPM<\/h2>\n<p>Vamos a asociar a todos estos paquetes que hemos instalado a una serie de tareas.<\/p>\n<p>Vamos a dividir nuestro <em>gulpfile.js<\/em>\u00a0en tres partes. La primera de ellas es la que hace referencia a los paquetes que vamos a utilizar. Para ello vamos a declarar las variables de cada paquete. Para este ejemplo vamos a usar algunos de los paquetes de\u00a0<strong>NPM<\/strong>\u00a0que vimos en el anterior art\u00edculo: BrowserSync y\u00a0<strong>SASS<\/strong>.<\/p>\n<pre><code>var gulp = require('gulp'),\r\nsass = require('gulp-sass'),\r\nnewer = require('gulp-newer'),\r\nimagemin = require('gulp-imagemin'),\r\nbrowserSync = require(\"browser-sync\");\r\n\r\n<\/code><\/pre>\n<p>En primer lugar siempre haremos referencia a\u00a0<strong>Gulp<\/strong>, y despu\u00e9s referencia a los paquetes que hayamos instalado.<\/p>\n<p>Ahora vamos a ver la segunda parte, vamos a configurar las diferentes tareas para cada paquete, vamos a ir viendo una a una. En la documentaci\u00f3n de cada paquete nos suele venir la tarea por defecto. Podemos copiar de all\u00ed y luego modificarla a nuestro gusto.<\/p>\n<h3><strong>SASS<\/strong><\/h3>\n<p>Vamos a ver la tarea para compilar <strong>SASS<\/strong>. Para lanzarla tendremos que ir a la consola y escribir <code>gulp sass<\/code><\/p>\n<pre><code>gulp.task('sass', function () {\r\nreturn gulp.src('.\/sass\/**\/*.scss')\r\n.pipe(sass().on('error', sass.logError))\r\n.pipe(gulp.dest('.\/css'));\r\n});\r\n<\/code><\/pre>\n<p>Podemos cambiar el nombre de la tarea por el que nosotros queramos, para cambiarlo solamente tendremos que sustituir sass por la palabra que nosotros queramos. Si lo vas a cambiar lo mejor es elegir un nombre que haga referencia a la tarea.<\/p>\n<p>&nbsp;<\/p>\n<pre><code>return gulp.src('.\/sass\/*.scss')\r\n<\/code><\/pre>\n<p>Aqu\u00ed vamos a a\u00f1adir la ruta donde esta alojados nuestros <strong>SASS<\/strong>. En este caso compilara cualquier archivo con la extensi\u00f3n scss que este dentro de la carpeta <strong>SASS<\/strong><\/p>\n<p>&nbsp;<\/p>\n<pre><code>.pipe(gulp.dest('.\/css'));\r\n<\/code><\/pre>\n<p>Y aqu\u00ed a\u00f1adimos la ruta donde ir\u00e1 el <strong>CSS<\/strong> compilado. En este caso se alojar\u00e1 en la carpeta <strong>CSS<\/strong>.<\/p>\n<h2>Tarea BrowserSync<\/h2>\n<p>Ahora vamos a ver la tarea para lanzar un servidor con todo nuestro proyecto.<\/p>\n<pre><code>gulp.task(\"browserSync\", function() {\r\nbrowserSync({\r\nserver: {\r\nbaseDir: \".\/\"\r\n}\r\n})\r\n});\r\n<\/code><\/pre>\n<p>Aqu\u00ed simplemente le vamos a indicar la ruta donde se aloja nuestro proyecto.<\/p>\n<h3>C\u00f3mo crear nuestras propias tareas<\/h3>\n<p>Ahora vamos con la \u00faltima parte. En esta vamos a crear nuestra propia tarea de <strong>Gulp<\/strong>. Vamos a usar el watch de <strong>Gulp<\/strong>. Lo que hace el watch es vigilar la carpeta y cada vez que hagamos un cambio en un archivo vuelve a lanzar las tareas. Vamos a ver un ejemplo:<\/p>\n<pre><code>\/\/Watch task\r\ngulp.task(\"watch\", [\"browserSync\"], function() {\r\ngulp.watch('sass\/*.scss', ['sass']);\r\ngulp.watch([\".\/*.html\", \"css\/*.css\", \"js\/*.js\"]).on(\"change\", browserSync.reload);\r\n});\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>Cada vez que se haga un cambio en cualquier archivo <strong>SCSS<\/strong> que este dentro de la carpeta <strong>SASS<\/strong> el watch lanzar\u00e1 la tarea <strong>SASS<\/strong>. En la siguiente linea le decimos que cada vez que se haga un cambio en un <strong>HTML<\/strong>, <strong>CSS<\/strong> o <strong>JS<\/strong> se refresque BrowserSync, as\u00ed veremos en la web los cambios que vamos haciendo en el proyecto.<\/p>\n<h2>Gulpfile<\/h2>\n<p>Y ya por \u00faltimo vamos a ver como quedar\u00eda todo nuestro <code>gulpfile.js<\/code><\/p>\n<p>\u00ab`<br \/>\nvar gulp = require(&#8216;gulp&#8217;),<br \/>\nsass = require(&#8216;gulp-sass&#8217;),<br \/>\nbrowserSync = require(\u00abbrowser-sync\u00bb);<\/p>\n<p>gulp.task(&#8216;sass&#8217;, function () {<br \/>\nreturn gulp.src(&#8216;.\/sass\/**\/*.scss&#8217;)<br \/>\n.pipe(sass().on(&#8216;error&#8217;, sass.logError))<br \/>\n.pipe(gulp.dest(&#8216;.\/css&#8217;));<br \/>\n});<\/p>\n<p>gulp.task(\u00abbrowserSync\u00bb, function() {<br \/>\nbrowserSync({<br \/>\nserver: {<br \/>\nbaseDir: \u00ab.\/\u00bb<br \/>\n}<br \/>\n})<br \/>\n});<\/p>\n<p>\/\/Watch task<br \/>\ngulp.task(\u00abwatch\u00bb, [\u00abbrowserSync\u00bb], function() {<br \/>\ngulp.watch(&#8216;sass\/<em>.scss&#8217;, [&#8216;sass&#8217;]);<br \/>\ngulp.watch([\u00ab.\/<\/em>.html\u00bb, \u00abcss\/<em>.css\u00bb, \u00abjs\/<\/em>.js\u00bb]).on(\u00abchange\u00bb, browserSync.reload);<br \/>\n});<\/p>\n<p>&nbsp;<\/p>\n<p>Desde nuestra <a href=\"https:\/\/www.hiberus.com\/agencia-digital\" target=\"_blank\" rel=\"noopener\">Agencia Digital<\/a>, nuestros <a href=\"https:\/\/www.hiberus.com\/agencia-digital\/usabilidad-y-experiencia-de-usuario\" target=\"_blank\" rel=\"noopener\">expertos en Usabilidad, Dise\u00f1o y Multimedia<\/a>, damos formaci\u00f3n a equipos para entornos de front para agilizar el proceso de trabajo. \u00bfTe ayudamos?<\/p>\n        <div class=\"row\">\n            <div class=\"block-cta-form\" style=\"background-color: #003664;\">\n                <div class=\"content-cta-form\">\n                    <div class=\"text-cta-form\">\n                        <p class=\"title-cta-form\">\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de UX\/UI?<\/p>\n                        <p>Contacta con nuestro equipo de User Research, User Experience y User Interface<\/p>\n                    <\/div>\n                    <div class=\"form-fields\">\n                        \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f33973-o1\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"33973\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/4095#wpcf7-f33973-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"33973\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f33973-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div id=\"responsive-form\" class=\"clearfix\">\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nombre *\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellido\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Apellido *\" value=\"\" type=\"text\" name=\"apellido\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Correo corporativo *\" value=\"\" type=\"email\" name=\"correo\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telf-contacto\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tel\u00e9fono *\" value=\"\" type=\"tel\" name=\"telf-contacto\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"compania\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Compa\u00f1ia *\" value=\"\" type=\"text\" name=\"compania\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mensaje *\" name=\"mensaje\"><\/textarea><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"politica\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"politica\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">He le\u00eddo y acepto la <a href=\"https:\/\/www.hiberus.com\/politica\" target=\"_blank\"><u>Pol\u00edtica de privacidad<\/u><\/a><\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"marketing\"><span class=\"wpcf7-form-control wpcf7-acceptance optional\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"marketing\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Me gustar\u00eda recibir comunicaciones de marketing de Hiberus y sobre sus productos, servicios y eventos.<\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Contacta con nosotros\" \/>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div id=\"campos_ocultos\" class=\"hidden\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new1\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new1\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new1\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new2\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new2\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new2\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new3\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new3\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new3\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new4\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new4\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new4\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new_p\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new_p\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new_p\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<!--end responsive-form--><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a ver qu\u00e9 es\u00a0Gulp, c\u00f3mo a\u00f1adirlo\u00a0a nuestro\u00a0workflow, cu\u00e1les son los paquetes imprescindibles de NPM y c\u00f3mo configurar tareas&#8230;<\/p>\n","protected":false},"author":68,"featured_media":43611,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,230],"tags":[31,143,91],"class_list":{"0":"post-4095","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-ux-analitica","9":"tag-diseno","10":"tag-diseno-web","11":"tag-usabilidad"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/4095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=4095"}],"version-history":[{"count":4,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/4095\/revisions"}],"predecessor-version":[{"id":43613,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/4095\/revisions\/43613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/43611"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=4095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=4095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=4095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}