Gulp: combinación de tareas

Task permite un enfoque modular para configurar Gulp. Necesitamos crear una tarea para cada dependencia, que sumaríamos a medida que encontremos e instalemos 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.

Instalación de complementos

Tomemos un complemento llamado minify-csspara fusionar y minimizar todos los scripts CSS. Se puede instalar usando npm como se muestra en el siguiente comando:

npm install gulp-minify-css --save-dev

Para trabajar con "gulp-minify-css plugin", necesita instalar otro plugin llamado "gulp-autoprefixer" como se muestra en el siguiente comando:

npm install gulp-autoprefixer --save-dev

Para concatenar los archivos CSS, instale gulp-concat como se muestra en el siguiente comando:

npm install gulp-concat --save-dev

Después de la instalación de los complementos, debe escribir las dependencias en su archivo de configuración de la siguiente manera:

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Agregar tarea al archivo Gulp

Necesitamos crear una tarea para cada dependencia, que sumaríamos a medida que instalamos los complementos. La tarea Gulp tendrá la siguiente estructura:

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

El complemento 'concat' concatena los archivos CSS y el complemento 'autoprefix' indica las versiones actual y anterior de todos los navegadores. Minimiza todos los scripts CSS de la carpeta src y los copia a la carpeta de compilación llamando al método 'dest' con un argumento, que representa el directorio de destino.

Para ejecutar la tarea, use el siguiente comando en el directorio de su proyecto:

gulp styles

De manera similar, usaremos otro complemento llamado 'gulp-imagemin' para comprimir el archivo de imagen, que se puede instalar usando el siguiente comando:

npm install gulp-imagemin --save-dev

Puede agregar dependencias a su archivo de configuración usando el siguiente comando:

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

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 guardan en el img_srcobject. Se canaliza a otras funciones creadas por el constructor 'imagemin'. Comprime las imágenes de la carpeta src y las copia en la carpeta de compilación llamando al método 'dest' con un argumento, que representa el directorio de destino.

Para ejecutar la tarea, use el siguiente comando en el directorio de su proyecto:

gulp imagemin

Combinar varias tareas

Puede ejecutar varias tareas a la vez creando una tarea predeterminada en el archivo de configuración como se muestra en el siguiente código:

gulp.task('default', ['imagemin', 'styles'], function() {

});

El archivo Gulp está configurado y listo para ejecutarse. Ejecute el siguiente comando en el directorio de su proyecto para ejecutar las tareas combinadas anteriores:

gulp

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

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images