gulp
Guía completa para una automatización de flujo de trabajo de front-end con Gulpjs -1 de 2
Buscar..
Sintaxis
- npm install [nombre del plugin] --save-dev
- npm install [nombre del plugin] --save
- Función
<function-name>(glob) {$ .src (glob) .pipe ([plugin 1]). Pipe ([plugin 2]) .... pipe ([plugin n]). Pipe ($ .dest (<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
Observaciones
Continuar leyendo - Crear una tarea predeterminada y configurar la sincronización del navegador
Referencias
Cargando todos los complementos de Package.JSON
Suponiendo que tiene una idea de cómo instalar trago, permítanos sumergirnos hasta requerir todas las dependencias de gulp de package.json en la carpeta raíz de su proyecto.
En caso de que todavía no tenga un gulpfile, cree un archivo vacío con el nombre
gulpfile.js
Primero, requerimos un trago. al igual que:
var $ = require('gulp');
A continuación, vamos a cargar todos nuestros complementos, en nuestro gulpfile, por el siguiente fragmento de código
Nota
Lea los comentarios en todos los fragmentos que incluiremos en esta lectura, ya que brindan más información sobre cada funcionalidad.
/*
require gulp-load-plugins, and call it
gulp-load-plugins will require individually,
all the plugins installed in package.json at the root directory
these required plugins, are lazy loaded
that is, gulp-load-plugins will only require them when they are referenced in this file
plugins are available for perusal, via camelcased names, minus gulp
eg: gulp-clean-css is accessed by $$.cleanCss
*/
var $$ = require('gulp-load-plugins')();
NOTA
A lo largo de los muchos ejemplos que tendremos en el artículo, tenemos alias
- trago como $ y
- gulp-load-plugins como $$
puramente para facilitar la escritura.
Instalación de complementos para imágenes receptivas | Minificación Css | Minificación Js
Nuestro objetivo, es
- Haga que sus imágenes se ajusten a los anchos y las escalas de manera adecuada, generando una batería de imágenes de anchos variados, y para minimizarlas
- Lint tu Javascript
- Minimice sus activos: JS / CSS / HTML, lo que le permite alojar un código más ligero que el más ligero
- Mire los archivos css / js / image para ver si hay cambios y reconstruya las optimizaciones
- Sincronizar los cambios durante el desarrollo, en un navegador que sirva su sitio.
Necesitamos una serie de complementos, así que instalémoslos todos. Por favor, ejecute todos estos en la carpeta raíz del proyecto.
Complementos de procesamiento de imágenes
bash $ npm install --save-dev gulp-responsive
bash $ npm install --save-dev gulp-imagemin
bash $ npm install --save-dev imagemin
bash $ npm install --save-dev imagemin-jpeg-recompress
bash $ npm install --save-dev imagemin-pngquant
Complementos optimizador de activos
bash $ npm install --save-dev gulp-clean-css
bash $ npm install --save-dev gulp-uglify
bash $ npm install --save-dev gulp-minify-html
bash $ npm install --save-dev gulp-jshint
bash $ npm install --save-dev gulp-concat
bash $ npm install --save-dev gulp-autoprefixer
Anatomía de una función trilla.
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Nota
pipe es un método que transmite todos los archivos que coinciden con la entrada global, a nuestros complementos (minifyhtml en este caso).
Es simple de imaginarlo así:
$ .src es lo que construye el flujo y la tubería canaliza cada archivo individual que hace coincidir el globo hacia abajo a cada complemento en la tubería. Cada complemento al que se pasa el archivo, modifica su contenido en la memoria solo hasta que se alcanza $ .dest, que luego se actualiza / crea archivos transmitidos por $ .src
Cuando,
$ -> trago
$$ -> gulp-load-plugins
Optimización y Minificación de Activos.
Entonces, antes de escribir las funciones del optimizador, necesitamos instalar un par de complementos de almacenamiento en caché.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Usted podría preguntarse por qué dos cachés eh !. gulp-cached , pasa solo contenido modificado o nuevo por la tubería a otros complementos. Por lo tanto, dado que queremos que los archivos sin cambios se utilicen para concatenar en un solo archivo por activo (css | js) también, necesitamos un truco, además de gulp-cached
Primero usamos gulp-cached para construir una lista de archivos que han cambiado
En segundo lugar, necesitamos un trago, recordar para mantener un seguimiento de todos los archivos que pasan por esa lista en la memoria.
Primera ejecución: no hay archivos en caché, por lo que gulp-caché los pasará a todos para recordarlos.
Ejecuciones subsiguientes: solo los archivos nuevos o modificados se canalizan por gulp-cached. Dado que el contenido del archivo actual ha cambiado, gulp-remember actualiza su caché.
Genial, escribamos nuestro primer optimizador.
Optimizador de estilo
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is autoprefixed with cross browser compatible prefixes for any css property ( justify-content for e.g)
b. Is concatenated into app.css
3. app.css is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'images/**/*' or '**/*.css' or, an array eg ['glob1','glob2']
*/
var optimizeStyles = function(src) {
return $.src(src).
pipe($$.cached('styles')).
pipe($$.autoprefixer({
browsers: ['last 2 versions']
})).
pipe($$.remember('auto-prefixed-stylesheets')).
pipe($$.concat('app.css')).
pipe($.dest('build/css')).
pipe($$.cleanCss()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/css'))
}
Nota
$ -> trago
$$ -> gulp-load-plugins
$ .src -> crea secuencias de archivos que coinciden con el globo pasado como src
$ .dest -> guarda el archivo manipulado en la ruta especificada
Optimizador de secuencias de comandos
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is linted with jshint
b. Is concatenated into app.js
3. app.js is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'js/**/*' or '**/*.js' or, an array eg ['glob1','glob2']
*/
var optimizeScripts = function(src) {
return $.src(src).
pipe($$.cached('scripts')).
pipe($$.jshint()).
pipe($$.jshint.reporter('default')).
pipe($$.jshint.reporter('fail')).
pipe($$.remember('linted-scripts')).
pipe($$.concat('app.js')).
pipe($.dest('build/js')).
pipe($$.uglify()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/js'))
}
Nota
$ -> trago
$$ -> gulp-load-plugins
$ .src -> crea secuencias de archivos que coinciden con el globo pasado como src
$ .dest -> guarda el archivo manipulado en la ruta especificada
Generar imágenes responsivas
Pasemos ahora al procesamiento de imágenes. Por lo tanto, el objetivo es tener una variedad de tamaños para cada imagen que se va a servir.
¿Por qué?
Bueno, para comprender por qué necesitamos una batería de imágenes con un rango de anchos, debemos reflexionar sobre el hecho de que probablemente haya millones de dispositivos con resoluciones variadas. Necesitamos una imagen a escala sin mucha pixelación. Al mismo tiempo, necesitamos mejorar los tiempos de carga de la página, descargando solo una imagen, que se ajuste al ancho que contiene, y también con la dimensión más pequeña posible, para hacerlo. Hay blogs académicos como el que escribió Eric Portis, que resalta la ineficacia de las consultas de los medios de comunicación y sirve como una guía completa para comprender conceptos como conjuntos y tamaños.
Puede referirse a la epopeya de Eric Portis aquí.
Ahora, nuestra función, necesita tomar un globo, y un ancho como entradas, y hacer su magia y empujar el archivo que genera cada ejecución, a un destino y minimizar la imagen respondida.
Hemos instalado dos complementos de compresión de imagen en nuestro primer ejemplo
Dado que estos complementos NO comienzan con un prefijo "trago", debemos cargarlos manualmente en nuestro archivo de gulp.
Por lo tanto, exigámoslos manualmente, después de la declaración gulp-load-plugins en la parte superior de nuestro archivo gulp.
al igual que:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Vale la pena tener en cuenta que el procesador de imagen nítido responde a tragos, lo que es mejor que imagemagick BY FAAAAR !. Sharp es lo que utiliza gulp-responsive para recortar sus imágenes a los anchos deseados.
Puede consultar las opciones de configuración que responden rápidamente, para obtener una lista completa de los parámetros de configuración. Solo he usado
- ancho: para recortar nuestras imágenes al ancho w, pasado como parámetro
- renombrar - para agregar un sufijo al nombre de la imagen, para que siga siendo único
en mi función de configuración a continuación. por lo tanto, nuestra función recortará la imagen al ancho pasado como entrada, para todas las imágenes coincidentes descifradas a través de la entrada global. luego, cada imagen se comprime con jpeg-recompress o pngquant y se guarda dentro de build / images.
Con eso en mente, nuestra función sería así:
/*
@generateResponsiveImages
*@Description:takes in a src of globs, to stream matching image files , a width,
*to resize the matching image to, and a dest to write the resized and minified files to
*@src - input a glob pattern - a string eg 'images/** /*' or 'images/*' or, an array
eg ['glob1','glob2']
*@return returns a stream
*/
var generateResponsiveImages = function(src, width, dest) {
//declare a default destination
if (!dest)
dest = 'build/images';
//case 1: src glob - images/**/*
// the base is the directory immediately preceeding the glob - images/ in this case
//case 2: images/fixed/flourish.png : the base here is images/fixed/ - we are overriding
// that by setting base to images.This is done so that, the path beginning after images/
// - is the path under our destination - without us setting the base, dest would be,
//build/images/flourish.png.But with us setting the base, the destination would be
// build/images/fixed/flourish.png
return $.src(src, {
base: 'images'
})
//generate resized images according to the width passed
.pipe($$.responsive({
//match all pngs within the src stream
'**/*.png': [{
width: width,
rename: {
suffix: '-' + width
},
withoutEnlargement: false,
}],
//match all jpgs within the src stream
'**/*.jpg': [{
width: width,
rename: {
suffix: '-' + width
},
progressive: true,
withoutEnlargement: false,
}]
}, {
errorOnEnlargement: false,
errorOnUnusedConfig: false,
errorOnUnusedImage: false
}))
//once the file is resized to width, minify it using the plugins available per format
.pipe($$.if('*.jpg', compressJpg({
min: 30,
max: 90,
target: 0.5
})()))
//use file based cache gulp-cache and it will minify only changed or new files
//if it is not a new file and if the contents havent changed, the file is served from cache
.pipe($$.cache($$.imagemin({
verbose: true
})))
//write to destination - dest + path from base
.pipe($.dest(dest));
}
Nota
$ -> trago
$$ -> gulp-load-plugins
$ .src -> crea secuencias de archivos que coinciden con el globo pasado como src
$ .dest -> guarda el archivo manipulado en la ruta especificada
Referencias adicionales
Minificador de HTML
*
*@minifyHtml
*Description:takes in a glob src, and minifies all '.html' files matched by the glob
*@src - input a glob pattern - a string eg '/**/*.html /*' or '*.html' or, an array eg ['glob1','glob2']
*@dest=file.base means, the modified html file will be in the same directory as the src file being minified
*often means, the process is just a modification on the existing src file
*@return returns a stream
*/
var minifyHtml = function(src) {
return $.src(src)
.pipe($$.minifyHtml())
.pipe($.dest(function(file) {
//file is provided to a dest callback -
// Refer here https://github.com/gulpjs/gulp/blob/master/docs/API.md#path
return file.base;
}));
}
Anatomía de una tarea trillada.
La anatomía de una definición de tarea es así:
$.task(<taskname> , [dependencies] , <body>);
dependencias, es una serie de tareas que TIENEN que finalizar antes de que se ejecute la tarea actual que está definiendo. Más como forzar una ejecución síncrona en lugar de la funcionalidad asíncrona predeterminada.
Añadiendo tareas Gulp
Así que ahora tenemos
- Una función definida arriba para optimizar los estilos.
- Una función definida arriba para optimizar scripts.
- Una función definida arriba para optimizar HTML.
- Una función para generar múltiples imágenes por imagen arriba.
Todo lo que tenemos que hacer ahora, es invocarlos cuando sea necesario.
Escribamos nuestras tareas de acuerdo con la sintaxis que definimos anteriormente
/*
* $.task('name','dependency array',function)
results in building a task object as below
task:{
'name':name,
'dep':[array of dependencies],
'fn':function
}
*/
//*@return returns a stream to notify on task completion
$.task('optimizeHtml', function() {
var src = ['**/*.html', '!{node_modules}/**/*.html'];
return minifyHtml(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeScripts', function() {
var src = ['js/**/*.js'];
return optimizeScripts(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeStyles', function() {
var src = ['css/**/*.css', 'fonts/google/**/*.css'];
return optimizeStyles(src);
});
//Take in a callback to ensure notifying the gulp engine, that the task is done
//required since, you are not returning a stream in this task
$.task('generateResponsiveImages', function(callback) {
var src = ['images/**/*.{jpg,png}'];
for (var i = widths.length - 1; i >= 0; i--) {
generateResponsiveImages(src, widths[i]);
}
callback();
});