Gulp

Gulp.js en español - tutorial básico y primeros pasos https://frontendlabs.io/1669--gulp-js-en-espanol-tutorial-basico-primeros...
1 de 29 6/3/2018 6:19 p. m.
2 de 29 6/3/2018 6:19 p. m.
pipe()
3 de 29 6/3/2018 6:19 p. m.
4 de 29 6/3/2018 6:19 p. m.
npm install -g gulp
sudo
sudo npm install -g gulp
5 de 29 6/3/2018 6:19 p. m.
gulp -v
CLI version 3.8.6

Local version undefined
6 de 29 6/3/2018 6:19 p. m.
npm init
{
"name": "gulp-primeros-pasos",
"version": "0.0.1",
"description": "Gulp: Primeros pasos",
"main": "gulpfile.js",
"author": "jansanchez",
"license": "MIT"
}
7 de 29 6/3/2018 6:19 p. m.
npm install --save-dev gulp
npm install --save-dev gulp-concat
npm install --save-dev gulp-uglify
–save-dev
8 de 29 6/3/2018 6:19 p. m.
{
"name": "gulp-primeros-pasos",
"version": "0.0.1",
"description": "Gulp: Primeros pasos",
"main": "gulpfile.js",
"author": "jansanchez",
"license": "MIT",
"devDependencies": {
"gulp": "^3.8.7",
"gulp-concat": "^2.3.4",
"gulp-uglify": "^0.3.1"
}
}
devDependencies
9 de 29 6/3/2018 6:19 p. m.
// contenido del archivo 1.js
var sumar = function (a, b){

return a + b;
};
// contenido del archivo 2.js
var restar = function (a, b){

return a - b;
};
/*
* Dependencias
*/
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
/*
10 de 29 6/3/2018 6:19 p. m.
* Configuración de la tarea 'demo'

*/
gulp.task('demo', function () {
gulp.src('js/source/*.js')
.pipe(concat('todo.js'))
.pipe(uglify())
.pipe(gulp.dest('js/build/'))
});
gulp demo
[11:23:09] Using gulpfile ~/htdocs/gulp-primeros-

pasos/gulpfile.js
[11:23:09] Starting 'demo'...
[11:23:09] Finished 'demo' after 9 ms
11 de 29 6/3/2018 6:19 p. m.
var sumar=function(r,n){return r+n},restar=function(r,n)

{return r-n};
12 de 29 6/3/2018 6:19 p. m.
/*
* Dependencias
*/
gulp.task()
/*
*/
// Contenido de la tarea 'demo'
});
13 de 29 6/3/2018 6:19 p. m.
gulp demo
gulp.task('estaticos', ['imagenes', 'css', 'js']);
gulp
estaticos
14 de 29 6/3/2018 6:19 p. m.
gulp.task('css', ['imagenes'], function () {

/*
* Aquí iría el contenido de mi tarea 'css'
* Que se ejecutará solo cuando la tarea
* 'imagenes' haya terminado.
*/
});
gulp
default
gulp.task('default', function () {
/*
* Código de nuestra tarea por defecto.
15 de 29 6/3/2018 6:19 p. m.
*/
});
gulp.task('default', ['css', 'js']);
gulp
gulp.src()
gulp.dest()
16 de 29 6/3/2018 6:19 p. m.
js/source/1.js
js/source/*.js
js/source
js/**/*.js
js
!js/source/3.js
static/*.+(js|css)
static/
17 de 29 6/3/2018 6:19 p. m.
pipe()
pipe()
.pipe(uglify())
18 de 29 6/3/2018 6:19 p. m.
gulp.dest()
19 de 29 6/3/2018 6:19 p. m.
/*
* Dependencias
*/
/*
*/
.pipe(uglify())
});
gulp.watch(glob, tareas) gulp.watch(glob, callback)
20 de 29 6/3/2018 6:19 p. m.
gulp.watch('js/source/*.js', ['js']);
js
gulp.watch('js/source/*.js', function(){
/*
* Aquí iría el código de la acción que deseas realizar,
* Cuando hayan cambios en dichos archivos.
*
* También podrías ejecutar una tarea mediante el método
* gulp.start('js')
*
* Pero este método no es oficial, le pertenece al
* paquete 'Orchestrator' ya que Gulp hereda los
* métodos de 'Orchestrator'.
*/
});
21 de 29 6/3/2018 6:19 p. m.
gulpplugin
npm install --save-dev gulp-jshint
/*
* Dependencias
22 de 29 6/3/2018 6:19 p. m.
*/
jshint = require('gulp-jshint'),
/*
*/
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
});
23 de 29 6/3/2018 6:19 p. m.
ifconfig
eth0
inet addr:192.111.77.27 Bcast:192.111.77.255
Link encap:Ethernet HWaddr 00:1b:00:bb:1c:ab
Mask:255.255.255.0 Scope:Link
collisions:0 txqueuelen:1000
ifconfig | grep "HWaddr"
24 de 29 6/3/2018 6:19 p. m.
HWaddr 00:1b:00:bb:1c:ab Link encap:Ethernet
25 de 29 6/3/2018 6:19 p. m.
26 de 29 6/3/2018 6:19 p. m.
Twittear Me gusta 69 Compartir 69
27 de 29 6/3/2018 6:19 p. m.
50 Comentarios FrontEnd Labs 1 Iniciar sesión
Recomendar 9 Compartir ordenar por el más nuevo
Únete a la discusión...
INICIAR SESIÓN CON

O REGISTRARSE CON DISQUS ?
Juan Carlos Alonso Mostaza • hace 4 meses

Un artículo muy interesante para saber qué demonios es eso de Gulp.js... Ahora me toca
digerirlo;-)
¡Gracias por compartir el conocimiento!
• Responder • Compartir ›
Frontend Labs Juan Carlos Alonso Mostaza • hace 4 meses

Muchas gracias a ti por tu comentario!
Asier • hace 5 meses

Muy buen artículo! solo una pregunta: Cuando ya tienes numerosos proyectos y utilizas las
mismas dependencias para todos, es posible decirle al package.json que en vez de
dependencias propias del proyecto, utilice dependencias globales? que la carpeta node-
modules este fuera del proyecto?
Gracias!
Frontend Labs Asier • hace 5 meses

La verdad no se si eso se pueda hacer con el package.json, pero creo que lo que
buscas con esa solucion es que no tengas que re-instalar una y otra vez las mismas
dependencias que ya usas en otros proyectos, creo que te serviría mucho revisar
sobre el administrador de paquetes que creo Facebook llamadoYarn, te
recomendamos leer nuestro articulo sobre Yarn.
Asier Frontend Labs • hace 5 meses

La verdad me queda un poco grande kekeke. Gracias de todos modos!!
Selene Arzola • hace 8 meses

Me sirvió mucho para entender los conceptos básicos. Te agradezco!
28 de 29 6/3/2018 6:19 p. m.
29 de 29 6/3/2018 6:19 p. m.

Gulp

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Gulp

Cargado por

Copyright:

Formatos disponibles

Gulp.js en español - tutorial básico y primeros pasos https://frontendlabs.io/1669--gulp-js-en-espanol-tutorial-basico-primeros...

npm install -g gulp

sudo npm install -g gulp

CLI version 3.8.6

npm install --save-dev gulp

npm install --save-dev gulp-concat

npm install --save-dev gulp-uglify

// contenido del archivo 1.js

var sumar = function (a, b){

// contenido del archivo 2.js

var restar = function (a, b){

* Configuración de la tarea 'demo'

[11:23:09] Using gulpfile ~/htdocs/gulp-primeros-

var sumar=function(r,n){return r+n},restar=function(r,n)

gulp.task('estaticos', ['imagenes', 'css', 'js']);

gulp.task('css', ['imagenes'], function () {

gulp.task('default', ['css', 'js']);

gulp.watch(glob, tareas) gulp.watch(glob, callback)

npm install --save-dev gulp-jshint

ifconfig | grep "HWaddr"

HWaddr 00:1b:00:bb:1c:ab Link encap:Ethernet

Twittear Me gusta 69 Compartir 69

50 Comentarios FrontEnd Labs 1 Iniciar sesión

Recomendar 9 Compartir ordenar por el más nuevo

INICIAR SESIÓN CON

Juan Carlos Alonso Mostaza • hace 4 meses

Frontend Labs Juan Carlos Alonso Mostaza • hace 4 meses

Asier • hace 5 meses

Frontend Labs Asier • hace 5 meses

Asier Frontend Labs • hace 5 meses

Selene Arzola • hace 8 meses

También podría gustarte