Gulp: desarrollo de una aplicación

En los capítulos anteriores, ha estudiado sobre la instalación de Gulp y los conceptos básicos de Gulp, que incluyen el sistema de compilación de Gulp, el administrador de paquetes, el ejecutor de tareas, la estructura de Gulp, etc.

En este capítulo, veremos los conceptos básicos para desarrollar una aplicación, que incluye lo siguiente:

• Declarar dependencias requeridas
• Creando tarea para las dependencias
• Ejecutando la tarea
• Mirando la tarea

Declaración de dependencias

Cuando instale complementos para la aplicación, debe especificar las dependencias para los complementos. Las dependencias son manejadas por el administrador de paquetes como bower y npm.

Tomemos un complemento llamado gulp-imageminpara definir dependencias para él en el archivo de configuración. Este complemento se puede usar para comprimir el archivo de imagen y se puede instalar usando la siguiente línea de comando:

npm install gulp-imagemin --save-dev

Puede agregar dependencias a su archivo de configuración como se muestra en el siguiente código.

var imagemin = require('gulp-imagemin');

La línea anterior incluye el complemento y se incluye como un objeto llamado imagemin.

Creación de tareas para dependencias

Task permite un enfoque modular para configurar Gulp. Necesitamos crear una tarea para cada dependencia, que iríamos sumando a medida que encontramos e instalamos otros complementos. La tarea Gulp tendrá la siguiente estructura:

gulp.task('task-name', function() {
   //do stuff here
});

Donde 'nombre-tarea' es un nombre de cadena y 'función ()' realiza su tarea. El 'gulp.task' registra la función como una tarea dentro del nombre y especifica las dependencias de otras tareas.

Puede crear la tarea para la dependencia definida anteriormente como se muestra en el siguiente código.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Las imágenes se encuentran en src/images/**/*que se guarda en el img_srcobject. Se canaliza a otra función creada por el constructor imagemin. Comprime las imágenes de la carpeta src y las copia en la carpeta de compilación llamandodest método con un argumento, que representa el directorio de destino.

Ejecutando la tarea

El archivo Gulp está configurado y listo para ejecutarse. Use el siguiente comando en el directorio de su proyecto para ejecutar la tarea:

gulp imagemin

Al ejecutar la tarea con el comando anterior, verá el siguiente resultado en el símbolo del sistema:

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)