Cómo minificar, unificar y convertir código Javascript ES6 con Gulp y Babel
A día de hoy programar en JavaScript es mucho más sencillo y potente que hace unos cuantos años gracias a EcmaScript 6. El único inconveniente es que muchas de las nuevas funcionalidades que nos trae este estándar no son soportadas por navegadores antiguos. La mejor opción, es utilizar el compilador Babel, que transformará nuestro código JavaScript ES5/6 a código JavaScript estándar, el cual es soportado por todos los navegadores. Podéis ver y probar de forma online cómo compila código Babel desde su página oficial.
Además, cuando manejamos muchos archivos JavaScript, lo mejor es unificarlos todos en un único archivo. Por lo que combinando Gulp y Babel, vamos a compilar y unificar todo nuestro código JavaScript en un sólo fichero que sea compatible con cualquier navegador.
Lo primero es crear nuestro archivo package.json utilizando NPM
npm init
* Si no tienes instalado NPM, lo puedes instalar siguiendo estos pasos.
Instalamos Gulp:
npm install gulp
Ahora debemos instalar las siguientes dependencias:
npm install babel-code --save-dev npm install babel-preset-es2015 --save-dev npm install babel-preset-stage-2 --save-dev npm install gulp-babel --save-dev npm install gulp-concat --save-dev npm install gulp-uglify --save-dev npm install gulp-uglify-es --save-dev
Y creamos en la raíz de nuestro proyecto los siguientes archivos:
.babelrc
{ "presets": ["es2015"] }
gulpfile.js
var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var babel = require('gulp-babel'); // Array con la ruta de los archivos JavaScript que se van a minificar y combinar. var files = [ 'src/copy.js', 'src/paste.js', 'src/main.js' ] // La tarea por defecto (cuando ejecutas `gulp` desde la consola) gulp.task('default', ['minify']); // Minifica y combina todos los archivos JavaScript indicados en el array 'files'. gulp.task('minify', function() { return gulp.src(files) .pipe(babel()) .pipe(concat('index.min.js')) // el archivo que a generar .pipe( uglify({ mangle: false }).on('error', function(e) { console.log('Error uglify: ' + e); })) .pipe(gulp.dest('./')) // la ruta donde se guardará el archivo a generar ; });
Una vez tengamos todo esto, vamos en la consola a la raíz de nuestro proyecto y ejecutamos lo siguiente
gulp minify
Esperamos a que termine la tarea y si todo ha salido correctamente nos habrá generado el archivo index.min.js en la raíz de nuestro proyecto.