gulp
Omfattande guide till en främre arbetsflödesautomation med Gulpjs -1 av 2
Sök…
Syntax
- npm installera [plugin-name] - spara-dev
- npm installera [plugin-name] - spara
- Funktion
<function-name>(glob) {$ .src (glob) .pipe ([plugin 1]). Pipe ([plugin 2]) .... pipe ([plugin n]). Pipe ($ .dest (<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
Anmärkningar
Fortsätt läsa - Skapa en standarduppgift och ställa in webbläsarsynkronisering
referenser
Laddar alla plugins från Package.JSON
Antagande att du har ett grepp om hur du installerar gulp, låt oss dyk ner till oss för att kräva alla gulp-beroenden från package.json under din projektmapp.
Om du inte har en gulpfil ännu, skapa en tom fil med namnet
gulpfile.js
Först kräver vi gulp. såhär:
var $ = require('gulp');
Låt oss därefter ladda alla våra plugins, i vår gulpfil, nedan i utdraget
Notera
Läs igenom kommentarerna i alla utdrag som vi kommer att inkludera i den här läsningen, de ger mer inblick i alla funktioner
/*
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')();
NOTERA
Genom de många exemplen vi kommer att ha i artikeln, vi alias
- gulp som $ och
- gulp-load-plugins som $$
rent för att underlätta att skriva.
Installera plugins för responsiva bilder | Css Minification | Js minification
Vårt mål är att
- Få dina bilder att anpassa sig till bredder och skalor på lämpligt sätt genom att generera ett batteri med bilder med olika bredder och förminska dem
- Lint ditt Javascript
- Minimera dina tillgångar - JS / CSS / HTML, så att du kan vara värd för en lättare än lättaste kod
- Titta på css / js / bildfiler för ändring och återuppbygga optimeringar
- Synkronisera dina ändringar under utveckling, till en webbläsare som betjänar din webbplats.
Vi behöver ett antal plugins, så låt oss installera dem alla. Kör alla dessa i projektets rotmapp.
Inställningar för bildbehandling
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
Plugins för tillgångsoptimering
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
Anatomi av en gulpfunktion
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Notera
pipe är en metod som strömmar alla filer som matchar glob-ingången till våra plugins (minifyhtml i detta fall).
Det är enkelt att föreställa det så:
$ .src är det som bygger strömmen och rör rör ut varje enskild fil som matchar kloden nedåt till varje plugin i pipeline. Varje plugin som filen skickas till, ändrar dess innehåll i minnet tills $ .dest har nåtts, som sedan uppdateras / skapar filer som strömmas av $ .src
Där ,
$ -> gulp
$$ -> gulp-load-plugins
Kapacitet och optimering av tillgångar
Så innan vi skriver ut optimeringsfunktioner måste vi installera ett par cache-plugins.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Du kanske undrar varför två cachar eh !. cache cache , skickar endast modifierat eller nytt innehåll längs rörledningen till andra plugins. Så eftersom vi också vill att filer utan förändring ska användas för sammankoppling till en enda fil per tillgång (css | js) behöver vi gulp-kom ihåg förutom gulp-cached
Först använder vi gulpcachen för att skapa en lista över filer som har ändrats
För det andra behöver vi gulp-remember för att hålla reda på alla filer som passeras genom den listan i minnet.
Första körning: Inga filer är cachade, så skämtad cache kommer att skicka dem alla för att glömma
Efterföljande körningar: Endast modifierade eller nya filer pipetteras med cache-cache. Eftersom innehållet i den aktuella filen har ändrats uppdaterar gulp-remember sin cache.
Cool, låt oss skriva vår första optimizer
Style Optimizer
// 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'))
}
Notera
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> bygger filströmmar som överensstämmer med kloden som skickas som src
$ .dest -> sparar den manipulerade filen i den angivna sökvägen
Script Optimizer
// 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'))
}
Notera
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> bygger filströmmar som överensstämmer med kloden som skickas som src
$ .dest -> sparar den manipulerade filen i den angivna sökvägen
Generera responsiva bilder
Låt oss nu gå vidare till bildbehandling. Så målet är att ha en mängd storlekar för varje bild du ska servera.
Varför?
Tja, för att förstå varför vi behöver ett batteri med bilder med en mängd bredder, måste vi fundera över det faktum att det förmodligen finns zilljoner enheter med olika upplösningar. Vi behöver en bild för att skala utan mycket pixelering. Samtidigt måste vi förbättra sidbelastningstiderna genom att ladda ner bara en bild, som passar den bredd som den innehåller, och som också har den minsta möjliga dimensionen för att göra det. Det finns vetenskapliga bloggar som den som Eric Portis skrev, som belyser ineffektiviteten för just mediafrågor och fungerar som en omfattande guide för att förstå begrepp som srcsets och storlekar.
Du kan hänvisa till Eric Portis episka skrivning här
Nu måste vår funktion ta ett glob och en bredd som ingångar och göra sin magi och skjuta filen som varje körning genererar, till en destination och förminska den svarade bilden.
Vi har installerat två plugin-filer för bildkomprimering i vårt första exempel
Eftersom dessa plugins INTE börjar med ett "gulp-" prefix måste vi ladda dem manuellt på vår gulpfil.
SÅ Låt oss kräva dem manuellt, efter deklarationen av gulp-load-plugins högst upp på vår gulpfil.
såhär:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Det är värt att notera att gulp-responsive kommer med den skarpa bildprocessorn, vilket är bättre än att tänka av FAAAAR !. Sharp är det som används av gulp-responsive för att beskära dina bilder till önskad bredd.
du kan titta på gulp-responsive-konfigurations-alternativ för en omfattande lista med konfigurationsparam. Jag har bara använt
- bredd - för att beskära våra bilder till en bredd w, skickas som en parameter
- byta namn - för att lägga till ett suffix till bildnamnet så att det förblir unikt
i min konfigurationsfunktion nedan. så vår funktion kommer att beskära bilden till den bredd som skickas som ingång, för alla matchande bilder dekrypterade via glob-ingången. sedan komprimeras varje bild med jpeg-komprimering eller pngquant och sparas i build / bilder.
Med det i åtanke skulle vår funktion vara så:
/*
@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));
}
Notera
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> bygger filströmmar som överensstämmer med kloden som skickas som src
$ .dest -> sparar den manipulerade filen i den angivna sökvägen
Ytterligare referenser
HTML Minifier
*
*@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;
}));
}
Anatomi av en gulp uppgift
Anatomi för en uppgiftsdefinition är så:
$.task(<taskname> , [dependencies] , <body>);
beroenden, är en rad uppgifter som måste slutföras innan den aktuella uppgiften du definierar körs. Mer som att tvinga en synkron körning istället för den asynkrona standardfunktionen.
Lägga till gulpuppgifter
Så har vi nu
- En funktion definierad ovan för att optimera stilar
- En funktion definierad ovan för att optimera skript
- En funktion definierad ovan för att optimera HTML
- En funktion för att generera flera bilder per bild ovan
Allt vi behöver göra nu är att åberopa dem när det behövs.
Låt oss skriva våra uppgifter enligt den syntax vi definierade tidigare
/*
* $.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();
});