Capitulo 3

tutorial/3-es6-babel-gulp/README.md

@@ -1,93 +1,92 @@
-# 3 - Setting up ES6 with Babel and Gulp
+# 3 - Configuración de ES6 con Babel y Gulp
 
-We're now going to use ES6 syntax, which is a great improvement over the "old" ES5 syntax. All browsers and JS environments understand ES5 well, but not ES6. So we're going to use a tool called Babel to transform ES6 files into ES5 files. To run Babel, we are going to use Gulp, a task runner. It is similar to the tasks located under `scripts` in `package.json`, but writing your task in a JS file is simpler and clearer than a JSON file, so we'll install Gulp, and the Babel plugin for Gulp too:
+Ahora vamos a utilizar la sintaxis de ES6, que es una gran mejora sobre la "antigua" sintaxis ES5. Todos los navegadores y entornos JS comprenden bien el ES5, pero no ES6. Así que vamos a utilizar una herramienta llamada Babel para transformar archivos ES6 en archivos ES5. Para ejecutar Babel, vamos a utilizar Gulp, un corredor de tarea. Es similar a las tareas que se encuentran bajo `scripts` en` package.json`, pero escribir tu tarea en un archivo JS es más sencillo y claro que un archivo JSON, así que instalaremos Gulp y el plugin de Babel para Gulp:
 
-- Run `yarn add --dev gulp`
-- Run `yarn add --dev gulp-babel`
-- Run `yarn add --dev babel-preset-latest`
-- In `package.json`, add a `babel` field for the babel configuration. Make it use the latest Babel preset like this:
+- Ejecuta `hilados agregar --dev gulp`
+- Ejecuta `hilados agregar --dev gulp-babel`
+- Ejecuta `yarn add --dev babel-preset-latest`
+- En `package.json`, agrega un campo` babel` para la configuración babel. Haz que use el último preset de Babel sea como este:
 
 ```json
 "babel": {
-  "presets": [
-    "latest"
-  ]
+  "presets": [
+    "latest"
+  ]
 },
 ```
 
-**Note**: A `.babelrc` file at the root of your project could also be used instead of the `babel` field of `package.json`. Your root folder will get more and more bloated over time, so keep the Babel config in `package.json` until it grows too large.
+**Nota**: También se podría usar un archivo `.babelrc` en la raíz de su proyecto en lugar del campo` babel` de `package.json`. Su carpeta raíz se hará cada vez más hinchada con el tiempo, así que mantenga la configuración de Babel en `package.json` hasta que crezca demasiado.
 
-- Move your `index.js` into a new `src` folder. This is where you will write your ES6 code. A `lib` folder is where the compiled ES5 code will go. Gulp and Babel will take care of creating it. Remove the previous `color`-related code in `index.js`, and replace it with a simple:
+- Mueve tu `index.js` a una nueva carpeta` src`. Aquí es donde escribirá su código ES6. Una carpeta `lib` es donde el código ES5 compilado irá. Gulp y Babel se encargarán de crearlo. Elimine el código anterior `color`-related en` index.js` y reemplácelo por un simple:
 
 ```javascript
 const str = 'ES6';
-console.log(`Hello ${str}`);
+console.log (`Hello ${str}`);
 ```
 
-We're using a *template string* here, which is an ES6 feature that lets us inject variables directly inside the string without concatenation using `${}`. Note that template strings are created using **backquotes**.
+Estamos usando una *una modelo de string* aquí, que es una característica ES6 que nos permite inyectar variables directamente dentro de la cadena sin concatenación usando `$ {}`. Tenga en cuenta que las cadenas de plantilla se crean utilizando **acentos graves**.
 
-- Create a `gulpfile.js` containing:
+- Crea una `gulpfile.js` que contenga:
 
 ```javascript
-const gulp = require('gulp');
-const babel = require('gulp-babel');
-const del = require('del');
-const exec = require('child_process').exec;
+const gulp = require ('gulp');
+const babel = require ('gulp-babel');
+const del = require ('del');
+const exec = require ('child_process').
 
 const paths = {
-  allSrcJs: 'src/**/*.js',
-  libDir: 'lib',
+  allSrcJs: 'src / ** / *. Js',
+  libDir: 'lib',
 };
 
-gulp.task('clean', () => {
-  return del(paths.libDir);
+gulp.task ('clean', () => {
+  Return del (paths.libDir);
 });
 
-gulp.task('build', ['clean'], () => {
-  return gulp.src(paths.allSrcJs)
-    .pipe(babel())
-    .pipe(gulp.dest(paths.libDir));
+gulp.task ('build', ['clean'], () => {
+  Return gulp.src (paths.allSrcJs)
+    .pipe (babel ())
+    .pipe (gulp.dest (paths.libDir));
 });
 
-gulp.task('main', ['build'], (callback) => {
-  exec(`node ${paths.libDir}`, (error, stdout) => {
-    console.log(stdout);
-    return callback(error);
-  });
+gulp.task ('main', ['build'], (devolución de llamada) => {
+  Exec (`node $ {paths.libDir}`, (error, stdout) => {
+    Console.log (stdout);
+    Devolver devolución de llamada (error);
+  });
 });
 
-gulp.task('watch', () => {
-  gulp.watch(paths.allSrcJs, ['main']);
+gulp.task ('watch', () => {
+  gulp.watch (paths.allSrcJs, ['main']);
 });
 
-gulp.task('default', ['watch', 'main']);
+gulp.task ('default', ['watch', 'main']);
 
 ```
 
-Let's take a moment to understand all this.
+Tomemos un momento para entender todo esto.
 
-The API of Gulp itself is pretty straightforward. It defines `gulp.task`s, that can reference `gulp.src` files, applies a chain of treatments to them with `.pipe()` (like `babel()` in our case) and outputs the new files to `gulp.dest`. It can also `gulp.watch` for changes on your filesystem. Gulp tasks can run prerequisite tasks before them, by passing an array (like `['build']`) as a second parameter to `gulp.task`. Refer to the [documentation](https://github.com/gulpjs/gulp) for a more thorough presentation.
+El API de Gulp en sí es bastante sencillo. Define `gulp.task`s, que puede hacer referencia a los archivos` gulp.src`, aplica una cadena de tratamientos con `.pipe ()` (como `babel ()` en nuestro caso) y envía los nuevos archivos a `Gulp.dest`. También puede `gulp.watch` para los cambios en su sistema de archivos. Las tareas Gulp pueden ejecutar tareas previas, pasando una matriz (como `['build']`) como segundo parámetro de `gulp.task`. Consulte la [documentación] (https://github.com/gulpjs/gulp) para obtener una presentación más completa.
 
-First we define a `paths` object to store all our different file paths and keep things DRY.
+Primero definimos un objeto `paths` para almacenar todas nuestras diferentes rutas de archivos y mantener las cosas DRY.
 
-Then we define 5 tasks: `build`, `clean`, `main`, `watch`, and `default`.
+Luego definimos 5 tareas: `build`,` clean`, `main`,` watch` y `default`.
 
-- `build` is where Babel is called to transform all of our source files located under `src` and write the transformed ones to `lib`.
-- `clean` is a task that simply deletes our entire auto-generated `lib` folder before every `build`. This is typically useful to get rid of old compiled files after renaming or deleting some in `src`, or to make sure the `lib` folder is in sync with the `src` folder if your build fails and you don't notice. We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). Run `yarn add --dev del` to install that package.
-- `main` is the equivalent of running `node .` in the previous chapter, except this time, we want to run it on `lib/index.js`. Since `index.js` is the default file Node looks for, we can simply write `node lib` (we use the `libDir` variable to keep things DRY). The `require('child_process').exec` and `exec` part in the task is a native Node function that executes a shell command. We forward `stdout` to `console.log()` and return a potential error using `gulp.task`'s callback function. Don't worry if this part is not super clear to you, remember that this task is basically just running `node lib`.
-- `watch` runs the `main` task when filesystem changes happen in the specified files.
-- `default` is a special task that will be run if you simply call `gulp` from the CLI. In our case we want it to run both `watch` and `main` (for the first execution).
+- `build` es donde Babel está llamado a transformar todos nuestros archivos fuente ubicados bajo` src` y escribir los transformados a `lib`.
+- `clean` es una tarea que simplemente elimina toda nuestra carpeta` lib` generada automáticamente antes de cada `build`. Esto suele ser útil para deshacerse de los antiguos archivos compilados después de cambiar el nombre o eliminar algunos en `src`, o para asegurarse de que la carpeta` lib` está sincronizada con la carpeta `src` si su compilación falla y no se da cuenta. Utilizamos el paquete `del` para eliminar archivos de una manera que se integra bien con el flujo de Gulp (este es el [recomendado] (https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files -folder.md) para eliminar archivos con Gulp). Ejecutar `yarn add --dev del` para instalar ese paquete.
+- `main` es el equivalente a ejecutar` node .` en el capítulo anterior, excepto que esta vez, queremos ejecutarlo en `lib / index.js`. Dado que `index.js` es el archivo predeterminado que Node busca, podemos simplemente escribir` node lib` (usamos la variable `libDir` para mantener las cosas secas). La parte `require ('child_process'). Exec` y` exec` en la tarea es una función Node nativa que ejecuta un comando shell. Enviaremos `stdout` a` console.log () `y devolveremos un error potencial usando la función de devolución de llamada` gulp.task`. No se preocupe si esta parte no es muy clara para usted, recuerde que esta tarea es, básicamente, sólo ejecuta `nodo lib`.
+- `watch` ejecuta la tarea` main` cuando ocurren cambios en el sistema de archivos en los archivos especificados.
+- `default` es una tarea especial que se ejecutará si simplemente llama` gulp` desde la CLI. En nuestro caso queremos que ejecute tanto `watch` como` main` (para la primera ejecución).
 
-**Note**: You might be wondering how come we're using some ES6 code in this Gulp file, since it doesn't get transpiled into ES5 by Babel. This is because we're using a version of Node that supports ES6 features out of the box (make sure you are running Node > 6.5.0 by running `node -v`).
+**Nota**: Quizás se pregunte por qué estamos utilizando algún código ES6 en este archivo Gulp, ya que no se transporta a ES5 por Babel. Esto se debe a que estamos utilizando una versión de Node que soporta las características de ES6 fuera de la caja (asegúrese de que está ejecutando Nodr> 6.5.0 ejecutando `node -v`).
 
-Alright! Let's see if this works.
+¡Bien! Veamos si esto funciona.
 
-- In `package.json`, change your `start` script to: `"start": "gulp"`.
-- Run `yarn start`. It should print "Hello ES6" and start watching for changes. Try writing bad code in `src/index.js` to see Gulp automatically showing you the error when you save.
+- En `package.json`, cambia tu ` start` a: `"start": "gulp"`.
+- Ejecutw `yarn start`. Debe imprimir "Hello ES6" y empezar a ver los cambios. Trate de escribir un código malo en `src / index.js` para ver a Gulp mostrar el error automáticamente al guardar.
 
-- Add `/lib/` to your `.gitignore`
+- Agregue `/ lib /` a su `.gitignore`
 
+Siguiente sección: [4 - Uso de la sintaxis ES6 con una clase] (/tutorial/4-es6-syntax-class)
 
-Next section: [4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class)
-
-Back to the [previous section](/tutorial/2-packages) or the [table of contents](https://github.com/verekia/js-stack-from-scratch).
+Volver a la [sección anterior] (/tutorial/2-packages) o la [tabla de contenido] (https://github.com/verekia/js-stack-from-scratch#table-of-contents).