AUTOMATIZANDO TAREAS CON GULP.

JS

Vamos a aprender a utilizar Gulp.js para mejorar y acelerar nuestro flujo

de trabajo al desarrollar y tratar de entender su funcionamiento.

¿QUÉ ES GULP.JS?
Es un build system(sistema de construcción) que permite automatizar
tareas comunes de desarrollo, tales como la minificación de código
JavaScript, recarga del navegador, compresión de imágenes, validación
de sintaxis de código y un sin fin de tareas más.
Si hoy en día no quieres perder tiempo realizando tareas comunes
“manualmente”, es momento de que aprendas a usar un automatizador
como Gulp.js.
Gulp.js está construído con Javascript, funciona sobre Node.js y es Open
Source,

¿POR QUÉ TE DEBERÍA INTERESAR USAR

GULP.JS?
Porque hoy en día el flujo de trabajo de un desarrollador se ha vuelto más
complejo, usamos muchas herramientas de desarrollo, por lo cual
configurar cada tarea y ejecutarla “manualmente” y por separado
requiere demasiado tiempo.

Porque Gulp.js no sólo soluciona este problema sino que le aporta

mejoras, convirtiendose en una herramienta que tiene prácticamente todo
en uno, así mismo nos permite administrar y controlar todas esas tareas
en un solo lugar.

Porque Gulp.js prefiere el código sobre la configuración, esto no sólo lo

hace muy fácil para escribir tareas, sino también lo hace más simple de
leer y mantener.
Porque Gulp.js tiene directrices estrictas para la creación de sus plugins,
lo cual asegura que estos sean simples y que funcionen como se espera.

Solo por mencionarlo, una de las directrices es la siguiente: “Un plugin

sólo debe hacer una cosa y hacerla bien”. Esta directriz ha sido muy
positiva para los usuarios de Gulp.js, lo comprobaremos más adelante
cuando veamos como configurar una tarea con Gulp.js.

¿CÓMO FUNCIONA GULP.JS?

Gulp.js utiliza el módulo Stream de Node.js, lo cual lo hace más rápido
para construir, a diferencia de Grunt.js.

Gulp.js no necesita escribir archivos y/o carpetas temporales en el disco

duro, lo cual supone que realizará las mismas tareas que Grunt.js pero en
menor tiempo.

Gulp.js utiliza el método pipe(), este método obtiene todos los datos de
un Stream legible(readable) y lo escribe en el destino que le indiquemos
ó de lo contrario lo entrega o sirve hacia otro pipe.

En la siguiente imagen veremos como Grunt.js manipula los archivos al

realizar sus tareas:

Y en esta veremos como Gulp.js manipula los archivos al realizar sus

tareas:
Como podemos ver, aunque los 2 hicieron la misma tarea Gulp.js no
escribió archivos temporales en el disco duro. Gulp.js realizó 4
operaciones y en cambio Grunt.js realizó 8 operaciones.

Gulp.js utiliza el poder del paquete Node.js vinyl-fs para leer y escribir
Streams.

Gulp.js también utiliza un paquete Node.js para la secuenciación,

ejecución de tareas y dependencias en máxima concurrencia,
llamado Orchestrator.

La gran diferencia de Gulp con Grunt radica en que

mientras Grunt usa un archivo de configuración y plugins
específicos de grunt, Gulp usa un script de node.js donde se
pueden usar módulos exclusivos de Gulp o módulos corrientes
de npm.
Es decir, mientras uno debe configurar Grunt, Gulp se debe
programar

VENTAJAS DE GULP SOBRE GRUNT

1. Se pueden usar prácticamente todos los módulos de npm
2. Al ser un programa puede hacer cosas muy complicadas como
condicionales y loops
3. Puedo extender su funcionalidad más facil con módulos de
node
 4. Puedo segmentar mi configuración (que en realidad es una
aplicación)

¿CÓMO INSTALAR GULP.JS?

1. Para instalar gulp.js el único requisito es tener instalado node.js, para
ello nos cercioramos si ya está instalado. Abrimos una consola de
Windows o de gitbash que es la que usare y escribimos los comandos

2. Nos aseguramos de que el paquete npm este instalado

3. Si todo ha ido bien, ahora nos toca instalar gulp de manera global, esto
lo haremos una sola vez en nuestro equipo. Si queremos asegurarnos si
ya tenemos instalado gulp, escribimos el comando:

Podemos ver que no tenemos instalado gulp, entonces procedemos a instalar:

Y comenzara la instalación, luego volvemos a verificar la versión de gulp instalada

 Si estás usando Linux o Mac, tal vez necesites anteponer la
palabra sudo para poder ejecutar este comando con los permisos de
administrador, así: sudo npm install –g gulp
4. Como toda aplicación de node, es necesario crear el archivo
pakacke.json en donde especificaremos todos los módulos de [npm] que
vamos a usar. Entonces ejecutamos:

Y nos ira pidiendo que ingresemos información, para saltarte los datos que no desees
llenar pulsa la tecla Enter
 En caso no deseamos ingresar información usaremos el siguiente comando: npm init –y

Y se ha creado el archivo package.json

5. Aunque ya tenemos el comando gulp instalado de manera global, es

necesario instalar el módulo en el directorio del proyecto y así crear nuestra
aplicación de automatización. Este paso debemos hacerlo para cada
proyecto en la que usaremos gulp

Le pasamos la bandera –save-dev ya que este módulo solo lo

necesitamos para el proceso de desarrollo, más no para la ejecución
del programa.
6. Si verificamos la versión de gulp instalada

Donde CLI version es la versión de Gulp.js instalada en nuestro sistema y Local

version es la versión de Gulp.js instalada en nuestro proyecto local, si aún no hemos
creado nuestro proyecto nos saldrá undefined.

Verificamos en el archivo package.json la dependencia instalada

7. crea un archivo llamado gulpfile.js en el directorio raíz de tu

proyecto. es en este donde especificaremos las tareas
o tasks que queremos ejecutar automáticamente cada vez
que guardamos un archivo y creemos una nueva imagen o
se cumpla cierto período.
8. Creemos entonces la tarea de gulp más sencilla: La
tarea Hola Mundo

Y lo ejecutamos escribiendo en la consola

9. Aprendemos como funciona gulp

Gulp.js tiene una pequeña API, esto te permitirá aprender Gulp.js rápidamente

GULP.TASK() definimos una tarea, este método toma 3 argumentos: el nombre

de la tarea, la ó las tareas de las que depende esta tarea y la función que
ejecutará al llamar esta tarea.
ejemplo sólo usamos 2 parámetros: el nombre y la función, así:

Para llamar esta tarea tan solo escribimos en nuestra terminal: gulp
demo
Una tarea también puede actuar como una lista de tareas,
supongamos que queremos definir una tarea que corra otras 3
tareas por ejemplo: imágenes, css y js. Entonces escribiríamos lo
siguiente:

quiere decir que al ejecutar la tarea “estaticos” con el

comando gulp estaticos se ejecutarán estas 3 tareas.
El detalle es que estas tareas correran asíncronamente, osea que
correrán todas juntas al mismo tiempo sin ningún orden de
ejecución.

Si deseamos que una tarea se ejecute sí y solo sí otra tarea haya

terminado antes, entonces podemos hacer lo siguiente:

Entonces, cuando corramos la tarea “css”, Gulp.js ejecutará

primero la tarea “imagenes”, esperará a que esta tarea termine y
luego recién ejecutará la tarea “css”.
Gulp.js nos permite definir una tarea por defecto, que corra tan solo
al escribir el comando gulp. Esto se puede hacer tan solo
poniendole a la tarea el nombre de default, así:

Y claro, también puedes hacer que tu tarea por defecto sea una lista
de tareas, así:

Esta tarea ejecutará las tarea ‘css’ y ‘js’, tan solo escribiendo en
nuestra terminal:
GULP.SRC()toma como parámetro un valor glob es decir, una cadena que
coincida con uno o más archivos usando los patrones que usa el
intérprete de comandos de unix(shell) y retorna un stream que puede ser
“pipeado” a un plugin adicional ó hacia el método gulp.dest().

Este parámetro puede ser una cadena o una colección(Array) de valores

glob.

Gulp.js usa el paquete de Node.js node-glob para obtener los archivos

especificados en él ó los globs ingresados.

Ejemplos de glob:

necesitabamos encontrar todos los archivos que terminen en .js dentro de

la carpeta js/source, así:

Cada vez que Gulp.js encuentre un archivo que coincida con nuestro
patrón, lo irá metiendo dentro de un Stream, que será como una
colección de archivos. Claro, respetando las propiedades de cada
archivo(ruta, etc).

Entonces podemos decir que tendremos todos esos archivos con sus
respectivas propiedades dentro de un Stream, Este Stream puede ser
manipulado por Gulp.js.
El método pipe() puede leer, ayudar a transformar y grabar los datos de
un Stream.

Es por eso que en nuestro ejemplo usamos el método pipe() 3 veces.

La primera vez lo usamos para leer el Stream y se lo pasamos al plugin

“concat” para que este realize la concatenación y así transforme los datos
del Stream, así:

La segunda vez lo usamos para leer los datos actuales(js concatenado) y

se lo pasamos al plugin “uglify”, para que realize la minificación del
archivo concatenado. Todo esto sin escribir en el disco ningún archivo
temporal, así:

La tercera vez se lo pasamos a el método gulp.dest(), así que veamos

que hace este método.

GULP.DEST()Canaliza y escribe archivos desde un Stream, por lo que

puede canalizar a varias carpetas. Creará las carpetas que no existan y
retornará el Stream, por si deseamos realizar alguna acción más.

En pocas palabras, sirve para escribir los datos actuales de un Stream.

Y en nuestro ejemplo lo usamos así:

Con lo cual escribimos los datos resultantes del Stream dentro de la

carpeta js/build/.

GULP.WATCH()Ver archivos y hacer algo cuando se modifique un

archivo. Esto siempre devuelve un EventEmitter que emite los eventos
de cambio. Tiene 2 formas de usar:
Con lo cual, cada vez que se modifique un archivo .js que se encuentre
dentro de la carpeta js/source/automáticamente se ejecutará la tarea js.

Con esto ya podemos usar el API de Gulp.js con mucha facilidad

Ahora veamos varios ejemplos para entender:

1. comprimir todo nuestro código javascript en un solo archivo y

de manera casi ilegible

Empecemos entonces instalando el plugin gulp-uglify que se

encargara de realizar dicha tarea

Luego de unos segundos tendremos el módulo de gulp-

uglify instalado y el archivo package.json actualizado. Ahora
lo que hay que hacer es modificar el
archivo gulpfile.js agregando una tarea que se encargue
de uglificar los archivos javascript que creemos.
Ejecutamos la tarea

Vemos que se ha creado la carpeta que contiene los archivos

minificados

Antes de agregar más tareas, hagamos un poco de limpieza

de código: Saquemos todo el proceso de uglify de default y
hagamos que default ejecute una nueva tarea que
llamaremos uglify
Como se puede ver, tenemos aquí dos tareas: default y uglify y la
primera lo que hace es ejecutar la segunda.
Si queremos solo ejecutar la tarea de uglify entonces debemos
digitar en la consola el siguiente comando

gulp uglify

Con esto nos estamos asegurando que si hay más tareas

en gulpfile.js SOLO la de uglify será ejecutada.
crearemos una nueva tarea llamada watch en la cual usaremos la
tarea nativa de gulp llamada watch. Esto quiere decir que no
tenemos que instalar nuevos plugins para obtener esta
funcionalidad.
Aquí realizamos dos cambios:

1. Creamos la tarea watch especificando que cuando cambie un

archivo en el subdirectorio js con extensión js se debe
ejecutar la tarea uglify
2. Se modificó la tarea default para que ejecute uglify y watch

NOTA Las tareas de gulp corren en paralelo y no de forma

secuencial por lo que hay que tener cuidado con tareas que
necesitan que otra se halla terminado
Ejecutamos la tarea con gulp

2. Minificar archivos css

 La salida

Podemos consultar https://github.com/scniro/gulp-clean-css

3. Renombrar Archivos
Ejecutamos la tarea con gulp

El resultado es

Ver https://www.npmjs.com/package/gulp-rename

podemos querer que nuestro archivo se comprima cada vez que

guardamos los cambios.
4. Sass y minificar js con gulp
Resultado
5. Plumber

Y agreguemos plumber a las tareas que queremos que no

dejen de funcionar ante un error
6. Disminuir tamaño de imágenes
7. Require dir
https://www.npmjs.com/package/require-dir
var runSequence = require('run-sequence'); // importamos el
plugin

gulp.task('default', function() {

runSequence(
 ['minify-css', 'minify-js'], // estas dos corren en
paralelo de primero

'replace-build-ids', // luego esta

'create-backup-zip', // luego esta

['copy:fonts', 'copy:images'] // por último estas d

os en paralelo

);

});

https://www.npmjs.com/package/run-sequence

8. Concatenar y minificar js

Ejemplo
 Finalmente añadimos la opción drop_console en el plugin uglify para quitar los
comentarios y aprovechamos para introducir un watcher que ejecute la tarea
minify y añadimos la dependencia del watcher en la tarea por defecto. De esta
manera cuando ejecutemos la tarea gulp se ejecutará el watcher y cuando se
modifique algún fichero del código fuente se aplicará la tarea de minificación.

var gulp = require('gulp');

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('minify', function() {
console.log('minifying js ...');

return gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify({
compress: {
drop_console: true
}
}))
.pipe(gulp.dest('build/js/'));
});

gulp.task('watch-js', function() {
gulp.watch('src/js/*.js', ['minify'], function() {
console.log('watching js changes...');
});
});

gulp.task('default', ['watch-js'], function() {

console.log('Executing gulp...');
});

9. Ejemplo de sass con gulp

gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
Ejemplo
10. Ejemplo
Any other Sass file that's found within app/scss would automatically be included into
the sass task with this change. If you add a print.scssfile into the project, you'll see
that print.css will be generated in app/css.

We've now managed to compile all Sass files into CSS files with a single command. The
question is, what good does it do if we have to run gulp sass manually every time we
want to compile Sass into CSS?

Luckily, we can tell Gulp to automatically run the sass task whenever a file is saved
through a process called "watching".

Watching Sass files for changes

Gulp provides us with a watch method that checks to see if a file was saved. The
syntax for the watch method is:

// Gulp watch syntax

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

If we want to watch all Sass files and run the sass task whenever a Sass file is saved,
we just have to replace files-to-watch with the app/scss/**/*.scss,
and ['tasks', 'to', 'run'] with ['sass']:

// Gulp watch syntax

gulp.watch('app/scss/**/*.scss', ['sass']);

More often though, we'll want to watch more than one type of file at once. To do so,
we can group together multiple watch processes into a watchtask:

gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
If you ran the gulp watch command right now, you'll see that Gulp starts watching
immediately.

And that it automatically runs the sass task whenever you save a .scss file.

Let's take it a step further and make Gulp reload the browser whenever we save
a .scss file with the help of Browser Sync.

#Live-reloading with Browser Sync

Browser Sync helps make web development easier by spinning up a web server that
helps us do live-reloading easily. It has other features, like synchronizing actions across
multiple devices, as well.
We'll first have to install Browser Sync:

$ npm install browser-sync --save-dev

You may have noticed that there isn't a gulp- prefix when we install Browser Sync.
This is because Browser Sync works with Gulp, so we don't have to use a plugin.

To use Browser Sync, we'll have to require Browser Sync.

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

We need to create a browserSync task to enable Gulp to spin up a server using

Browser Sync. Since we're running a server, we need to let Browser Sync know where
the root of the server should be. In our case, it's the `app` folder:

gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})

We also have to change our sass task slightly so Browser Sync can inject new CSS
styles (update the CSS) into the browser whenever the sasstask is ran.

gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending
with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});

We're done with configuring Browser Sync. Now, we have to run both
the watch and browserSync tasks at the same time for live-reloading to occur.

It'll be cumbersome to open up two command line windows and run gulp
browserSync and gulp watch separately, so let's get Gulp to run them together by
telling the watch task that browserSync must be completed before watch is allowed
to run.
We can do so by adding a second argument to the watch task. The syntax is:

gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before',

'watch'], function (){

// ...

})
gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`],
function (){

console.log('Building files');

})
Unfortunately, we wouldn't be able to write the build task this way because Gulp
activates all tasks in the second argument simultaneously.

There's a possibility that useref, images, or even fonts gets completed

before clean does, which means the entire `dist` folder gets deleted.

So, to ensure that cleans get completed before the rest of the tasks, we need to use an
extra plugin called Run Sequence.

gulp.task('task-name', function(callback) {

runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-

three', callback);

});
In this case, Gulp first runs task-one. When task-one is completed, Gulp runs every
task in the second argument simultaneously. All tasks in this second argument must be
completed before task-three is run.

So we can now create a task that ensures that clean:dist runs first, followed by all
the other tasks:

gulp.task('build', function (callback) {

runSequence('clean:dist',

['sass', 'useref', 'images', 'fonts'],

callback

})
To make things consistent, we can also build the same sequence with the first group.
Let's use default as the task name this time:

gulp.task('default', function (callback) {

runSequence(['sass','browserSync', 'watch'],
callback
)
})

Why default? Because when you have a task named default, you can run it simply
by typing the gulp command, which saves some keystrokes.

Finally, here's a github repo for all the work we've done!

#Wrapping it up

We've gone through the absolute basics of Gulp and created a workflow that's able to
compile Sass into CSS while watching HTML and JS files for changes at the same time.
We can run this task with the gulp command in the command line.
We've also built a second task, build, that creates a dist folder for the production
website. We compiled Sass into CSS, optimized all our assets, and copied the necessary
folders into the dist folder. To run this task, we just have to type gulp build into the
command line.

Lastly, we have a clean task that clears away from the generated distfolder any
image caches that are created, allowing us to remove any old files that were
inadvertently kept in dist.

We've created a robust workflow so far that's capable enough for most web
developers. There's a lot more to Gulp and workflows that we can explore to make this
process even better. Here are some ideas for you:

For development:

 Using Autoprefixer to write vendor-free CSS code

 Adding Sourcemaps for easier debugging
 Creating Sprites with sprity
 Compiling only files that have changed with gulp-changed
 Writing ES6 with Babel or Traceur
 Modularizing Javascript files with Browserify, webpack, or jspm
 Modularizing HTML with template engines like Handlebars or Swig
 Splitting the gulpfile into smaller files with require-dir
 Generating a Modernizr script automatically with gulp-modernizr

For optimization:

 Removing unused CSS with unCSS

 Further optimizing CSS with CSSO
 Generating inline CSS for performance with Critical

In addition to development or optimization processes, you can also add write

JavaScript unit tests with gulp-jasmine and even deploy your distfolder onto your
production server automatically with gulp-rync.

As you can see, even though the workflow we've created does quite a few things,
there's a lot more that can be done. Creating a workflow that suits your needs can be
extremely exciting and fulfilling, but it can be a lot to take in if you're new to this.
There's so much more to Gulp that it's impossible to cover within this blog post, or
even a series of posts. That's why I wrote a book on automating your workflow, and I
invite you to grab ten chapters for free if you're interested in finding out more :)

Let me know what you felt about this article in the comments below! Oh yes, feel free
to contact me if you have any questions on workflow. I'll be happy to reply!

11. Ejemplo

app: Carpeta donde vamos a desarrollar nuestra aplicación.

dist: Carpeta donde irán a parar todas nuestras compilaciones, es decir,
nuestro proyecto optimizado y listo para ser usado.

A continuación crearemos nuestra primera tarea en Gulp a través del

fichero gulpfile.js, el cual definimos a la hora de ejecutar el comando $
npm init y en el que se alojarán todas nuestras configuraciones.
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scs
s in app/scss and children dirs
.pipe(sass())
.pipe(gulp.dest('app/css'))
})

En tal caso cualquier otro archivo Sass será compilado de la misma

manera:
 Ejemplo Minificar mis ficheros JavaScript
12. HTML Minification
gulp rename
Add copyright
Using gulp-header
npm install --save-dev gulp-header

Copyright
/*
Gulp Examples by @julienrenaux:

* https://github.com/shprink

* https://twitter.com/julienrenaux

* https://www.facebook.com/julienrenauxblog

Full source at https://github.com/shprink/gulp-examples

MIT License, https://github.com/shprink/gulp-examples/blob/master/LICENSE

*/

// including plugins

var gulp = require('gulp')

, fs = require('fs')

, concat = require("gulp-concat")

, header = require("gulp-header");

// functions

// Get copyright using NodeJs file system

var getCopyright = function () {

return fs.readFileSync('Copyright');

};

// task

gulp.task('concat-copyright', function () {

gulp.src('./JavaScript/*.js') // path to your files

.pipe(concat('concat-copyright.js')) // concat and name it "concat-copyright.js"

.pipe(header(getCopyright()))

.pipe(gulp.dest('path/to/destination'));

});

gulp concat-copyright
// task
gulp.task('concat-copyright-version', function () {
gulp.src('./JavaScript/*.js')
.pipe(concat('concat-copyright-version.js')) // concat and name it
"concat-copyright-version.js"
.pipe(header(getCopyrightVersion(), {version: getVersion()}))
.pipe(gulp.dest('path/to/destination'));
});

Mix them up (Lint, Concat,

Compile, Minify etc.)
The purpose of this task is to mix the previous tasks into just one.

Copyright
/*

Gulp Examples by @julienrenaux:

* https://github.com/shprink

* https://twitter.com/julienrenaux

* https://www.facebook.com/julienrenauxblog

Version: <%= version %>

Full source at https://github.com/shprink/gulp-examples

MIT License, https://github.com/shprink/gulp-examples/blob/master/LICENSE

*/

Version
1.0.0

gulpfile.js:
// including plugins

var gulp = require('gulp')

, fs = require('fs')

, coffeelint = require("gulp-coffeelint")

, coffee = require("gulp-coffee")

, uglify = require("gulp-uglify")

, concat = require("gulp-concat")
, header = require("gulp-header");

// functions

// Get version using NodeJs file system

var getVersion = function () {

return fs.readFileSync('Version');

};

// Get copyright using NodeJs file system

var getCopyright = function () {

return fs.readFileSync('Copyright');

};

// task

gulp.task('bundle-one', function () {

gulp.src('./CoffeeScript/*.coffee') // path to your files

.pipe(coffeelint()) // lint files

.pipe(coffeelint.reporter('fail')) // make sure the task fails if not compliant

.pipe(concat('bundleOne.js')) // concat files

.pipe(coffee()) // compile coffee

.pipe(uglify()) // minify files

.pipe(header(getCopyrightVersion(), {version: getVersion()})) // Add the copyright

.pipe(gulp.dest('path/to/destination'));

});

Run:
gulp bundle-one

Tasks automation
Using gulp.watch you can easily automate any tasks when files are
modified. It is really convenient because you do not have to run single
tasks by hand every time a file is modified, and therefore your code is
always up to date.
// including plugins
var gulp = require('gulp');

// task
gulp.task('watch-coffeescript', function () {
gulp.watch(['./CoffeeScript/*.coffee'], ['compile-coffee']);
});

Run:
Now run the task:
gulp watch-coffeescript

and see what happens when you modify one of the source file.

13.

Compilar Archivos de SASS a CSS

Siempre que trabajemos un proyecto es recomendable hacerlo con un
pre-procesador css, ya que es mas cómodo y fácil de dar mantenimiento
en cualquier momento, te lo aseguro.

Dentro de nuestra carpeta gulp creamos una sub carpeta con el

nombre sassdonde se alojaran nuestros archivos .scss.

Instalamos el plugin gulp-sass

$ npm install gulp-sass --save-dev

Instalamos el plugin gulp-notify, servirá para mostrarnos un mensaje

una vez terminada la tarea Gulp

$ npm install --save-dev gulp-notify

Código para archivo gulpfile.js

var gulp = require('gulp');

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

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

//Tarea para compilar archivos sass a css

gulp.task('sass', function () {

return gulp.src('./sass/**/*.scss') //Ruta de la carpeta sass

apuntando a los archivos `.scss`

.pipe(sass().on('error', sass.logError)) //Compila los archivos

`.scss` y muestra posibles errores

.pipe(gulp.dest('./css'))//Carpeta donde se guardaran los archivos

`.css` compilado

.pipe(notify("Tarea sass terminada!")); //Mensaje gracias al plugin

`gulp-notify`

});

//Vuelve a ejecutar la tarea cuando se modifica algún archivo

gulp.task('watch', function(){

gulp.watch('./sass/**/*', ['sass']);

});

//Tarea por defecto

gulp.task('default',['watch', 'sass']);

var gulp = require('gulp');

var cleanCSS = require('gulp-clean-css');

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

//Tarea para comprimir archivos css

gulp.task('comprimir-css', function() {

return gulp.src('css/*.css') //Ruta de la carpeta css apuntando a los

archivos `.css`

.pipe(cleanCSS({compatibility: 'ie8'})) //Comprime los archivos

`.css`

.pipe(gulp.dest('dist')) //Carpeta donde se guardara el archivo

`.css` comprimido

.pipe(notify("Tarea comprimir-css terminada!")); //Mensaje

gracias al plugin `gulp-notify`
 });

//Vuelve a ejecutar la tarea cuando se modifica algún archivo

gulp.task('watch', function(){

gulp.watch('./css/**/*', ['comprimir-css']);

});

//Tarea por defecto

gulp.task('default',['watch', 'comprimir-css']);

Comprimir archivos JS
Crea una carpeta con el nombre js en el proyecto gulp.

Para comprimir archivos JS instalaremos el plugin gulp-uglify con el

siguiente comando.

var gulp = require('gulp');

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

var pump = require('pump');

//Tarea para comprimir archivos js

gulp.task('compress-js', function (cb) {

pump([

gulp.src('js/*.js'), //Ruta de la carpeta apuntando a los archivos

`.js`

uglify(), //Comprime los archivos `.js`

gulp.dest('dist')//Carpeta donde se guardara el archivo `.js`

comprimido

],

cb

);

});

//Vuelve a ejecutar la tarea cuando se modifica algún archivo

gulp.task('watch', function(){

gulp.watch('./js/**/*', ['compress-js']);

});

//Tarea por defecto

 gulp.task('default',['watch', 'compress-js']);

Comprimir Imágenes
Para poder ayudar en la carga de nuestra página web al momento de ser
renderizado en el navegador es aconsejable comprimir las imágenes
para producción.

Pero realizar esta tarea puede ser engorrosa o hasta aburrida, pero
gracias a Gulpesta tarea es mas fácil.

Crea una carpeta con el nombre images en el proyecto gulp.

Para poder comprimir nuestras imágenes instalaremos los siguientes

plugins.

var gulp = require('gulp');

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

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

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

//Tarea para comprimir imágenes

gulp.task('images', function() {

gulp.src('./images/**/*.{png,jpg,jpeg,gif,svg}')//Ruta a la carpeta
images a puntando a las imágenes

.pipe(imagemin({

progressive: true,

svgoPlugins: [{removeViewBox: false}],

use: [pngcrush()]

}))

.pipe(gulp.dest('./dist/images')) //Carpeta donde se guardaran las

imágenes comprimidas

.pipe(notify("La tarea images a culminado!"));//Mensaje gracias a

`gulp-notify`

});

//Vuelve a ejecutar la tarea cuando se modifica algún archivo

gulp.task('watch', function(){

gulp.watch('./images/**/*', ['images']);

});

//Tarea por defecto

gulp.task('default',['watch', 'images']);
Unir ó Concatenar archivos CSS y JS
Muchas veces trabajamos con múltiples archivos pero no los unimos en
un solo archivo, porque es mas cómodo trabajarlo por separado.

Tal es el caso de los pre-procesadores que nos permiten importar un sin

numero de archivos de su misma clase, para poder así tener una mejor
legibilidad del código.

También es el caso manejar múltiples librerías CSS, JS de terceros.

Lo recomendable es apuntar a un solo archivo CSS, JS en producción ya

que esto mejorara tu performance (carga de tu página web).

Para solventar este inconveniente vamos a aprender a unir múltiples

archivos de una misma clase ya sea archivos CSS ó archivos JS.

Para unificar los archivos instalamos el plugin gulp-concat

$ npm install gulp-concat --save-dev

Código para archivo gulpfile.js

var gulp = require('gulp');

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

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

//Tarea para unir ó concatenar archivos

gulp.task('unir-files', function() {

return gulp.src('./css/*.css') //Origen

 .pipe(concat('all.css')) //Concatenado los archivos

.pipe(gulp.dest('./dist/')) //Destino

.pipe(notify("La tarea unir-files a terminado!")); //Mensaje

});

//Vuelve a ejecutar la tarea cuando se modifica algún archivo

gulp.task('watch', function(){

gulp.watch('./css/**/*', ['unir-files']);

});

//Tarea por defecto

gulp.task('default',['watch', 'unir-files']);
 //Tareas por defecto

gulp.task('default',['watch', 'sass', 'minify-css', 'compress-js',

'images', 'unir-files']);

14. Ejemplo
15. Ejemplo
 16. Ejemplo

Estas son las actividades y elementos que necesitamos en nuestro

proyecto. Si agregamos más elementos como, por ejemplo, la
dependencia – plugin de Stylus; este aparecerá en esta sección de
nuestro código. Con el método gulp.task definimos una tarea. Este toma
3 argumentos: el nombre de la tarea, la o las tareas que dependen de
esta tarea y la función que llama a esta tarea. También es
 posible realizar varias tareas de manera simultánea o definir qué tarea
quieres realizar si una tarea anterior a terminado. Por ejemplo:
gulp.task('js', ['css'], function () {
El contenido de mi tarea js se ejecutará sólo cuando la tarea css haya
terminado. El método gulp.src('js/source/*.js'), que hace referencia
a gulp.src(globs[, options]), toma como valor un
parámetro globs. Los globs pueden ser tipo cadena o arreglos y
devuelven un Streamque luego será canalizado por un pipe(). Gulp.js
usa el paquete de Node.js node-glob para obtener los archivos y existen
distintos métodos de utilizarlo. En este caso, usaremos el
método pipe para leer y tomar un archivo y llevarlo a otra ubicación.
Este debe ser leíble y editable para poder moverlo. En nuestro
ejemplo, utilizamos tres veces este elemento para realizar el proceso de
tomar el archivo y aplicarle los cambios que le hemos pedido.
 .pipe(concat('compilacion.js')): Esta sección tomará nuestro
archivo(s) y utilizará Gulp-concat para concatenarlos. Al final, nos
entregará un archivo final llamado compilacion.js
 .pipe(uglify()): Esta sección tomará nuestro archivo o archivo y
utilizará Gulp-uglify y los minificará.
 .pipe(gulp.dest('js/build/')): Esta sección será la encargada de cerrar
nuestro archivo. Su función es escribir los datos actuales de
un Stream. En otras palabras, podemos decir que es la encargada de
guardar y sobrescribir la información en caso de que queramos
realizar otro cambio o agregar algún elemento.

¡Y ya tenemos todo listo! Para finalizar con este proceso, debemos

escribir en nuestra consola la siguiente línea de código, tomando
en cuenta que debemos ubicarnos en la ruta de nuestro
proyecto: gulp

miproyecto Si
ves esta pantalla, quiere decir que el proyecto se ha compilado de
 manera exitosa. Si ahora vamos a
la ubicación C:\Miproyecto\js\build, encontraremos un archivo
llamado compilacion.js y al abrirlo tendrá este aspecto: Gulp.js nos
facilitará la vida permitiéndonos optimizar distintos procesos. No
importa si eres desarrollador Front-end o Backend, Gulp.js es una
herramienta que te ahorrará muchos problemas a la hora de crear
un proyecto web.

17. Php y browser sync

npm install browser-sync gulp --save-dev

npm install --save-dev gulp-connect-php

Advanced Option Manipulation
gulp.task('connect', function() {
connect.server({
configCallback: function _configCallback(type, collection) {
// If you wish to leave one of the argument types alone, simply return the passed in collection.
if (type === connect.OPTIONS_SPAWN_OBJ) { // As the constant suggests, collection is an Object.

// Lets add a custom env var. Good for injecting AWS_RDS config variables.
collection.env = Object.assign({
MY_CUSTOM_ENV_VAR: "env_var_value"
}, process.env);

return collection;
} else if (type === connect.OPTIONS_PHP_CLI_ARR) { // As the constant suggests, collection is an Arr
ay.
let newArgs = [
'-e', // Generate extended information for debugger/profiler.
'-d', 'memory_limit=2G' // Define INI entry, Up memory limit to 2G.
];
 // Ensure our argument switches appear before the rest.
return newArgs.concat(collection);
}
}
}, function _connected_callback() {
console.log("PHP Development Server Connected.");
});
});

gulp.task('disconnect', function() {
connect.closeServer();
});

gulp.task('default', ['connect', 'disconnect']);

<?php
// router.php
if (preg_match('/\.(?:png|jpg|jpeg|gif)$/', $_SERVER["REQUEST_URI"])) {
return false; // serve the requested resource as-is
} else {
echo "<p>Thanks for using gulp-connect-php :)</p>";
}
?>
18. Ejemplo de php y gulp
19. Ejemplo
20. Ejemplo
Browsersync + Gulp.js

There's no official Browsersync plugin for Gulp, because it's not needed! You
simply require the module, utilise the API and configure it with options. The
following are some common use-cases as seen in popular projects such
as Google's web starter kit and many others.
Install^ TOP

First, you'll need to install Browsersync & Gulp as development dependencies.

$ npm install browser-sync gulp --save-dev

Then, use them within your gulpfile.js :

var gulp = require('gulp');

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"
});
});

SASS + CSS Injecting^ TOP

Streams are supported in Browsersync, so you can call reload at specific points
during your tasks and all browsers will be informed of the changes. Because
Browsersync only cares about your CSS when it's finished compiling - make sure
you call .stream() after gulp.dest

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']);

Browser Reloading^ TOP

Sometimes you might just want to reload the page completely (for example, after
processing a bunch of JS files), but you want the reload to happen after your tasks.
This will be easier in gulp 4.x.x , but for now you can do the following (make sure
you return the stream from your tasks to ensure that browserSync.reload() is
called at the correct time).

If you are using gulp 4.x.x now, then you can follow this documentation.

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('default', ['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']);
});

Manual Reloading^ TOP

If the streams support doesn't suit your needs, you can fire the reload method
manually by wrapping it in a task. This example will compile & auto-inject CSS just
as before, but when HTML files are changed, the browsers will be reloaded
instead.

var gulp = require('gulp');

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

// Save a reference to the `reload` method

// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {

// Serve files from the root of this project

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

gulp.watch("*.html").on("change", reload);
});
 21. Ejemplo

#GulpJS + SASS + BrowserSync ftw Being the new-kid-on-the-block, GulpJS is

getting plently of attention lately. Instead of contributing to the pool of opinion-
pieces out there though, I thought I'd walk you through setting it up with a really
nice little workflow including SASS for CSS along with my open-source project,
BrowserSync.io.

The end result will be a pretty sweet front-end development setup including:

 SCSS File watching/compilation.

 Live CSS injecting into multiple devices.
 A Server running on an IP address that can be accessed on multiple
devices/screens.
 Syncronized scroll, clicks, links & form fields across all devices.

##Prerequisites

Before starting, you should have:

1. A project containing at least an index.html & some scss files.

2. NodeJS installed.
3. GulpJS installed globally npm install -g gulp

##Assumptions

All following examples/configuration assume we're dealing with a simple

HTML/CSS/JS project with the following structure.

// Assumed file/dir structure

index.html
css/
scss/
js/
You should alter any path/filenames to match your project where needed.
##Step 1 - install the tools

We need to install 3 tools locally to our project - gulp, gulp-sass & browser-sync. In
your terminal/command line, navigate to your project directory and run

npm install gulp gulp-sass browser-sync

##Step 2 - create gulpfile.js
Also in your project root, create a file called gulpfile.js. This is the file in which we'll
configure our tools.

##Step 3 - require() the tools

Open up gulpfile.js in your favourite editing tool and place this at the top.

var gulp = require('gulp');

var sass = require('gulp-sass');
var browserSync = require('browser-sync');
##Step 4 - Create tasks

We'll have a separate task for compiling SCSS into CSS & one for starting
BrowserSync.

SASS - Here we specify the path to our main scss file (the one that contains all of
the @imports), then we pipe the files into the sass function (that we required
above) and finally into gulp.dest which will write the output into the CSS directory.

gulp.task('sass', function () {
gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('css'));
});
BrowserSync - First we tell BrowserSync to watch any css & js files for changes
(which will allow the live updating/reload features to work) & the second param
can contain any normal BrowserSync options. In our case though, we just want to
start a server in the root of the project.

gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js"], {
server: {
baseDir: "./"
}
});
});
Watch - So far we've configured two separate tasks & now we'll tie them together
using gulp's default task. First, we will run the sass compiler ONCE (to ensure the
first page load has the latest CSS) & then BrowserSync will start the server & open
up a browser. Finally we watch the scss files in the background for changes & run
the sass task each time.

gulp.task('default', ['sass', 'browser-sync'], function () {

gulp.watch("scss/*.scss", ['sass']);
});
##Seeing it all together
The entire gulpfile.js should now look like this.

var gulp = require('gulp');

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

gulp.task('sass', function () {
gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('css'));
});

gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js"], {
server: {
baseDir: "./"
}
});
});

gulp.task('default', ['sass', 'browser-sync'], function () {

gulp.watch("scss/*.scss", ['sass']);
});
##Running it.

We're all set up now. All that remains is to head back to the command-line and run.

gulp
A browser window will open up automatically & will serve up your index.html file.
Take note of the URL, you can use it on any device that's connected to your WIFI
network & all of the BrowserSync features will work across them all. (create for
reponsive stuff).

Don't forget, you're being watched - you now have a great development
workflow where any changes to scss files will automatically trigger the compilation.
When that's done, BrowserSync will notice that the css file was changed & will
auto-inject the new file into all browsers.

##Notes

1. For the sake of simplicity, I removed the step of creating a package.json. If

you do want to save your tooling dependencies as you install them, you can
run npm init before you start & then add --save-dev to any install
commands you run.
2. The gulp-sass plugin uses the node port of SASS, NOT the ruby version. This
is much, much faster - but it's not quite 100% compatible yet, so just be
careful when using with legacy projects.
 22. Ejemplo

/**
* This example:
* Uses the built-in BrowserSync server for HTML files
* Watches & compiles SASS files
* Watches & injects CSS files
*
* More details: http://www.browsersync.io/docs/gulp/
*
* Install:
* npm install browser-sync gulp gulp-sass --save-dev
*
* Then run it with:
* gulp
*/
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulp = require('gulp');
var sass = require('gulp-sass');

// Browser-sync task, only cares about compiled CSS

gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});

// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
return gulp.src('scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(reload({stream:true}));
 });

// Reload all Browsers

gulp.task('bs-reload', function () {
browserSync.reload();
});

// Default task to be run with `gulp`

// This default task will run BrowserSync & then use Gulp to watch files.
// When a file is changed, an event is emitted to BrowserSync with the
filepath.
gulp.task('default', ['browser-sync'], function () {
gulp.watch('css/*.css', function (file) {
if (file.type === "changed") {
reload(file.path);
}
});
gulp.watch("*.html", ['bs-reload']);
});

23. Ejemplo con ayuda para solucionar

Using Gulp with connect-php and Browser

Sync
var gulp = require('gulp'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');

var paths = {
css: 'assets/sass/**/*.scss',
php: '**/*.php'
};

gulp.task('connect-sync', function() {
return connect.server({}, function (){
browserSync({
 proxy: 'localhost:8000'
});
});
});

gulp.task('css', function() {
return gulp.src(paths.css)
.pipe(sass({
outputStyle: 'expanded',
indentWidth: 4
})
.on('error', sass.logError))
.pipe(postcss([ autoprefixer({
browsers: ['last 2 versions']
}) ]))
.pipe(gulp.dest('assets/css/'))
});

gulp.task('watch', function() {
gulp.watch(paths.php).on('change', browserSync.reload);
gulp.watch(paths.css, ['css']).on('change',
browserSync.reload);
});

gulp.task('default', ['connect-sync', 'css', 'watch']);

(Estoy usando una Mac con versión Gulp: 3.9.1.) Todo funciona
bien a excepción de la recarga del navegador. ¿Alguna idea sobre
cómo solucionarlo?

Intente iniciar tareas desde reglas de vigilancia separadas.

Recuerde que Gulp ejecuta las cosas en paralelo y no espera a
que finalicen otras tareas, aunque una tarea podría fallar si eso es
cierto. Acabo de desenterrar mi vieja tubería Gulp y parece que
esto

gulp.task('serve', function() {

browserSync(config.browserSync);

watch(config.styles.sass.src, function() {
 gulp.start('assets:styles');
});

watch(config.assets.scripts.watch, function() {
gulp.start('assets:scripts');
});

...

});

Entiendes la idea. Estoy usando gulp-watch en lugar del reloj

incorporado, que es un poco quisquilloso y no muy bueno.

mi regla browsersync estaba configurada para ver todos los

archivos en el destino:

browserSync: {
proxy: localhost:8000,
notify: false,
files: [dest + '/**/*']

24. Ejemplo
25. gulp.task('php-serve', ['styles', 'fonts'], function () {
26. connect.server({
27. port: 9001,
28. base: 'app',
29. open: false
30. });
31.
32. var proxy = httpProxy.createProxyServer({});
33.
34. browserSync({
35. notify: false,
36. port : 9000,
37. server: {
38. baseDir : ['.tmp', 'app'],
39. routes : {
40. '/bower_components': 'bower_components'
41. },
42. middleware: function (req, res, next) {
43. var url = req.url;
44.
45. if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
46. proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
47. } else {
48. next();
49. }
50. }
51. }
52. });
53.
54. // watch for changes
55. gulp.watch([
56. 'app/*.html',
57. 'app/*.php',
58. 'app/scripts/**/*.js',
59. 'app/images/**/*',
60. '.tmp/fonts/**/*'
61. ]).on('change', reload);
62.
63. gulp.watch('app/styles/**/*.scss', ['styles']);
64. gulp.watch('app/fonts/**/*', ['fonts']);
65. gulp.watch('bower.json', ['wiredep', 'fonts']);
66. });

67. Ejemplo
68. Asdsad
69. Sadsad
70. Asda
71. Sdasd
72. asdsad