Guía de gulp browsersync + notificaciones personalizadas gulp-notify

A veces necesitamos tener a la mano varias herramientas para verificar los cambios en nuestros diseños el problema es que cuando trabajamos de forma profesional perdemos mucho tiempo al tratar de estar abriendo tantos dispositivos y varios buscadores que pues llega a ser tedioso todo el tiempo.

Hay varias herramientas que nos ayudan a visualizar nuestro sitio web en diferentes dispositivos.

Pero como todos unos profesionales no necesitamos estar perdiendo el tiempo en esto así que nos toca una herramienta llamada browsersync que es un sincronizador de dispositivos y navegadores, que nos ayuda a mostrar los cambios en tiempo real de nuestras modificaciones sin tener que estar haciendo refresh en todas nuestras pantallas y dispositivos y no tener que perder tanto tiempo.
Para seguir con este artículo te recomiendo ver los artículos relacionados con la instalación de gulp y creación de tareas:

• Instalación de gulp
• Minificar Css
• Gulp-autoprefixer

Instalación de browsersync con gulp:

• Ingresamos a nuestra carpeta donde tenemos el archivo gulp y abrimos una terminal y copiamos el siguiente comando:

  npm install browser-sync gulp --save-dev

• Luego procedemos a declarar las variables que nos ayuden a obtener el plugin para que esto pueda funcionar y a crear la tarea que ejecuta el plugin:

var browserSync = require('browser-sync').create(); 
// Static server
gulp.task('browser-sync', function() { 
 browserSync.init({
 server: {
 baseDir: "./"
 }
 });
}); 

// or...

gulp.task('browser-sync', function() { 
 browserSync.init({
 proxy: "yourlocal.dev"
 });
});

Esas dos anteriores sirven de la misma manera la primera es para un servidor estático y la segunda igual solo que envía los datos a un nombre de dominio local previamente modificado.

• Si quieres hacer una inyección de tareas lo puedes hacer de la siguiente manera Recomendable para css y sass

var gulp = require('gulp'); 
var browserSync = require('browser-sync').create(); 
var sass = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

 browserSync.init({
 server: "./app"
 });

 gulp.watch("app/scss/*.scss", ['sass']);
 gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() { 
 return gulp.src("app/scss/*.scss")
 .pipe(sass())
 .pipe(gulp.dest("app/css"))
 .pipe(browserSync.stream());
});

gulp.task('default', ['serve']); 

• Si quieres recargar el navegador para ver cambios por ejemplo en Javascript puedes utilizar lo siguiente:

var gulp = require('gulp'); 
var browserSync = require('browser-sync').create();

// process JS files and return the stream.
gulp.task('js', function () { 
 return gulp.src('js/*js')
 .pipe(browserify())
 .pipe(uglify())
 .pipe(gulp.dest('dist/js'));
});

// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) { 
 browserSync.reload();
 done();
});

// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {

 // Serve files from the root of this project
 browserSync.init({
 server: {
 baseDir: "./"
 }
 });

 // add browserSync.reload to the tasks array to make
 // all browsers reload after tasks are complete.
 gulp.watch("js/*.js", ['js-watch']);
});

Y esta es la forma de utilizar gulp + browsersyc es algo que no es cosa del otro mundo, pero a veces no necesitamos estar haciendo reload de lo que queremos ver sino simplemente queremos crear tareas como minificar archivos y eso lleva a que necesitemos saber cuando se está creando la tarea y eso de minificar archivos no es cosa que se tenga que ver en pantalla así que necesitamos notificaciones personalizadas y recurrimos a esto.

Cómo personalizar notificaciones con gulp Gulp-notify

Bueno esto es lo mismo que hemos venido haciendo que es crear tareas solo que antes de empezar necesitamos las siguientes recomendaciones:

• Debemos instalar de forma global el plugin con el siguiente comando: sudo npm install -g gulp-notify.

• Lo instalamos en nuestra carpeta del proyecto: con el siguiente comando: npm install --save-dev gulp-notify.

• En caso de tener algún sistema operativo basado en debian o ubuntu se tiene que instalar esos complementos para que no de error esto soluciona el problema gulp-notify: [Error in notifier] Error in plugin 'gulp-notify' que da en kali linux y en otras distros:

sudo apt-add-repository ppa:izx/askubuntu 
sudo apt-get update 
sudo apt-get install libnotify-bin 

• Luego procedemos a crear la tarea que nos hace manipular las notificaciones, este ejemplo supone que nosotros ejecutamos las notificaciones cuando minificamos el css:

var gulp = require('gulp'); 
var minifycss = require('gulp-minify-css'); 
var autoprefixer = require('gulp-autoprefixer'); 
var notify = require('gulp-notify');

gulp.task('css', function () { 
 return gulp.src('hackemate1/original/*.css')
 .pipe(minifycss())
 .pipe(gulp.dest('limpia/assets/css'))
 .pipe(notify({
 title: 'Oss sensei', //título del mensaje
 message: 'your task is good master you are "el mero ninja"', //cuerpo del mensaje
 icon: __dirname + '/fixedlogo.png' //logo del mensaje
 }));
});

Esto solo es una tarea simple tu puedes visitar la documentación oficial para ver cuantas configuraciones más puedes hacer Gulp-notify

El ejemplo de la imagen es una muestra de cómo quedaría las notificaciones personalizadas.

No es necesario usar gulp con browsersync para sincronizar tareas puedes utilizar solo browsersync si lo único que quieres es sincronizar cambios, pero si ya estas usando gulp para otras tareas, lo más profesional es usar los dos juntos para no tener archivos sueltos por aparte.