Blog de Jose Alvarado

Jose Alvarado

Venezolano. 21 años. Estudiante de ingeniería civil y desarrollador web.

Cómo configurar gulp.js para compilar React.js

hace 8 meses por
josealvaradoo
en

Compilar React.js con gulp.js

Es importante configurar un espacio de trabajo si queremos desarrollar de una manera fluida con React.js. El detalle está en que debemos estar constantemente compilando JSX en JavaScript convencional, y que mejor manera que tener a gulp ejecutando esta tarea automáticamente. Para ello, usaremos el paquete de Babel.

Lo primero que debemos tener es Node.js instalado en nuestro equipo, ya que usaremos el manejador de paquetes de Node (npm).

Ahora crearemos una carpeta para nuestro proyecto. Instalaremos allí nuestras dependencias.

Instalando dependencias

npm install --save-dev gulp

Con ésta dependencia, podremos crear las tareas utilizando gulp.js

npm install --save-dev gulp-babel

Con ésta dependencia, podremos utilizar babel en una de las tareas de gulp.js

npm install --save-dev babel-plugin-transform-react-jsx

Una de las dependencias más importante, compilará el JSX en JavaScript, que es lo que queremos.

npm install --save-dev babel-preset-es2015

Esta dependencia transformará ECS6 en ECS5. Básicamente es para quienes estamos escribiendo en ECS6, pero queremos que nuestro código sea compatible con los navegadores que no están actualizados.

Creando el archivo .babelrc

Crearemos un archivo en la raíz, llamado .babelrc, este será el responsable de compilar React.js. Dentro de él colocaremos lo siguiente

{
  "plugins": [
    ["transform-react-jsx"]
  ]
}

Creando las tareas en el archivo gulpfile.js

Ahora, usaremos gulp.js para crear la tarea que nos compilará React.js automáticamente. Para ello creamos un archivo llamado gulpfile.js y colocamos lo siguiente.

const gulp  = require('gulp')
const babel = require('gulp-babel')

gulp.task('babel', ()=>{
    gulp.src('./dev/*.{js,jsx}')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('./dist/'))
})

gulp.task('default', ()=>{
    gulp.watch('./dev/*', ['babel'])
})

Si no entiendes las funciones arrow ()=> {}, simplemente es ECS6, el nuevo estándar de JavaScript, que equivale a function() {}. Te recomiendo que empieces a escribir en ESC6. La mayoría de los navegadores lo soportan. No te quedes atrás.

Ejecutando la tarea en gulp.js

Escribimos en la consola

gulp

Con esto, ya tenemos a gulp pendiente de los cambios de algún archivo js o jsx en nuestra carpeta /dev/ para compilarlo y pasarlo a la carpeta /dist/ que será la ruta del archivo que usaremos en nuestro HTML. Por ejemplo ./dist/app.js

Utilizando React.js

Una vez tenemos configurado nuestro proyecto, y puesto en marcha, podemos realizar el ejemplo que ofrece la documentación oficial de React.js y probar que funcione correctamente.

Hay muchos tutoriales sobre esto pero que están en inglés, son complejos o hablan sobre Grunt.js. Por lo que me animó a realizar un post que para mí es más fácil de entender, más directo y trata de gulp.js.

¿Te ha funcionado? Comenta que te pareció, o si tienes alguna duda sobre como compilar ReactJS con gulpJS.