Guía de gulp prefijos para los navegadores gulp-autoprefixer

Hola amigos esta es la tercera parte de la guía de Gulp automatizador de tareas basado en node.js, bueno en esta ocasión tenemos un nuevo reto y creo que es un reto al que todos nos enfrentamos cuando estamos trabajando como frontend developers, y que se nos complica mucho y es el dar soporte a todos los navegadores con ciertas cosas como lo son compatibilidad con animaciones o con degradados, que en muchas versiones de algunos navegadores como IE o Opera no son compatibles.

Bueno este problema tiene solución y es una solución totalmente fácil que no lleva más de 5 minutos hacerlo con Gulp, no es muy complicado es lo que venimos haciendo desde los dos anteriores capítulos, que es la creación de tareas para minificar css y la creación de nuestro primer proyecto gulp te recomiendo los veas si no sabes nada de Gulp y quieres estar al día con esta información.

¿Para qué quiero prefijos en el css?

Bueno yo quiero prefijos como antes dije para dar soporte a navegadores antiguos con propiedades que ellos no soportan, aunque para mí esto ya no debería ser por que casi todos los problemas son enfocados en Internet explorer y pues ahí está pintado los de microsoft queriendo hacer todo a las patadas, pero no hay problema por que gracias a esto casi nadie usa su explorador, pero para quienes si lo usan aquí va la siguiente información.

pasos a seguir para agregar los prefijos.

  • en la carpeta de nuestro proyecto abrimos una terminal.
  • y escribimos el siguiente comando: npm install --save-dev gulp-autoprefixer
  • Luego procedemos a crear la tarea en el archivo gulpfile.js.

Basándonos en las tareas creadas anteriormente vamos a usar el mismo ejemplo para seguir agregando los prefijos.

   var gulp = require('gulp');
    var minifycss = require('gulp-minify-css');
    var autoprefixer = require('gulp-    autoprefixer'); //agregamos el plugin

    gulp.task('css', function(){
    return gulp.src('css/style.css')
    .pipe(autoprefixer('last 15 version'))//ejecutamos e indicamos las versiones
    .pipe(minifycss())
    .pipe(gulp.dest('css/min'));
    });

    gulp.task('default', function(){
    gulp.run('css'); // creamos una tarea default
    gulp.watch('css/*.css', function(){
    gulp.run('css'); //observamos cambios y los ejecutamos automáticamente
    });
    });

Con esto hemos agregado una nueva tarea si no entendiste de donde salió lo demás te invito a que revises el siguiente vídeo o que visites los link anteriormente mencionados que hablan sobre las dos últimas tareas creadas.