gulp
Uitgebreide gids voor een front-end workflowautomatisering met Gulpjs -1 van 2
Zoeken…
Syntaxis
- npm install [plugin-naam] --save-dev
- npm install [plugin-naam] - opslaan
- Functie
<function-name>(glob) {$ .src (glob) .pipe ([plugin 1]). Pipe ([plugin 2]) .... pipe ([plugin n]). Pipe ($ .dest (<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
Opmerkingen
Verder lezen - Een standaardtaak maken en browsersynchronisatie instellen
Referenties
Alle plug-ins laden uit Package.JSON
Ervan uitgaande dat u begrijpt hoe u gulp installeert, laten we ons verdiepen in alle vereiste afhankelijkheid van package.json in de hoofdmap van uw project.
Als je nog geen gulpbestand hebt, maak dan een leeg bestand met de naam aan
gulpfile.js
Ten eerste hebben we slok nodig. zoals zo:
var $ = require('gulp');
Laten we vervolgens al onze plug-ins laden in ons bestand door het onderstaande fragment
Notitie
Lees de opmerkingen in alle fragmenten die we in deze read zullen opnemen, ze geven meer inzicht in elke functionaliteit
/*
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')();
NOTITIE
Door de vele voorbeelden die we in het artikel zullen hebben, hebben we alias
- slok als $ en
- gulp-load-plug-ins als $$
puur voor het gemak van typen.
Plug-ins installeren voor responsieve afbeeldingen | Css Minification | Js minification
Ons doel is om
- Maak uw afbeeldingen conform aan breedten en schaal op de juiste manier, door een reeks afbeeldingen van verschillende breedten te genereren en ze te verkleinen
- Lint je Javascript
- Minimaliseer uw activa - JS / CSS / HTML, zodat u een lichtere dan de lichtste code kunt hosten
- Bekijk de css / js / image-bestanden op verandering en herbouw optimalisaties
- Synchroniseer uw wijzigingen tijdens de ontwikkeling naar een browser die uw site bedient.
We hebben een aantal plug-ins nodig, dus laten we ze allemaal installeren. Voer deze allemaal uit in de hoofdmap van het project.
Plug-ins voor beeldverwerking
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
Asset optimizer plug-ins
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
Anatomie van een slijmfunctie
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Notitie
pipe is een methode die alle bestanden die overeenkomen met de globale invoer naar onze plug-ins (in dit geval minifyhtml) streamt.
Het is eenvoudig om het zo voor te stellen:
$ .src is wat de stream en pipe-pijpen bouwt uit elk individueel bestand dat overeenkomt met de glob naar beneden voor elke plug-in in de pijplijn. Elke plug-in waaraan het bestand wordt doorgegeven, wijzigt de inhoud ervan alleen in het geheugen totdat $ .dest is bereikt, dat vervolgens wordt bijgewerkt / maakt bestanden gestreamd door $ .src
Waar,
$ -> slok
$$ -> plug-ins voor gulp-load
Activa-optimalisatie en -minificatie
Dus voordat we optimiser-functies wegschrijven, moeten we een aantal caching-plug-ins installeren.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Je vraagt je misschien af waarom twee caches eh !. slaat in de cache op , geeft alleen gewijzigde of nieuwe inhoud door aan andere plug-ins. Dus, omdat we willen dat bestanden zonder wijziging worden gebruikt voor het samenvoegen in een enkel bestand per item (css | js), hebben we gulp-remember nodig naast gulp-cache
Eerst gebruiken we gulp-cache om een lijst met gewijzigde bestanden samen te stellen
Ten tweede, we moeten gulp-onthouden om alle bestanden die door die lijst worden doorgegeven in het geheugen bij te houden.
Eerste uitvoering: er worden geen bestanden in de cache opgeslagen, dus gulp-cache geeft ze allemaal door aan gulp-remember
Volgende runs: alleen gewijzigde of nieuwe bestanden worden doorgesluisd met cachegeheugen. Aangezien de inhoud van het huidige bestand is gewijzigd, werkt gulp-remember de cache bij.
Cool, laten we onze eerste optimizer schrijven
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'))
}
Notitie
$ -> slok
$$ -> plug-ins voor gulp-load
$ .src -> bouwt bestandsstromen die overeenkomen met de glob die is doorgegeven als src
$ .dest -> slaat het gemanipuleerde bestand op in het opgegeven pad
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'))
}
Notitie
$ -> slok
$$ -> plug-ins voor gulp-load
$ .src -> bouwt bestandsstromen die overeenkomen met de glob die is doorgegeven als src
$ .dest -> slaat het gemanipuleerde bestand op in het opgegeven pad
Responsieve afbeeldingen genereren
Laten we nu verder gaan met beeldverwerking. Het doel is dus om een reeks formaten te hebben voor elke afbeelding die u gaat weergeven.
Waarom?
Welnu, om te begrijpen waarom we een reeks afbeeldingen met verschillende breedten nodig hebben, moeten we nadenken over het feit dat er waarschijnlijk ontelbare apparaten met verschillende resoluties zijn. We hebben een afbeelding nodig om te schalen zonder veel pixelatie. Tegelijkertijd moeten we de laadtijden van pagina's verbeteren door alleen die ene afbeelding te downloaden, die past bij de breedte waarin deze zich bevindt, en die ook de kleinst mogelijke afmeting heeft om dit te doen. Er zijn wetenschappelijke blogs zoals die van Eric Portis, die de ineffectiviteit van alleen mediaquery's benadrukken en als een uitgebreide gids dienen voor het begrijpen van concepten zoals srcsets en formaten.
Je kunt hier verwijzen naar het epos van Eric Portis
Onze functie moet nu een glob en een breedte als invoer gebruiken, en zijn magie doen en het bestand dat elke run genereert, naar een bestemming duwen en de verantwoorde afbeelding verkleinen.
In ons eerste voorbeeld hebben we twee plug-ins voor beeldcompressie geïnstalleerd
Aangezien deze plug-ins NIET beginnen met een "gulp-" voorvoegsel, moeten we ze handmatig in ons gulpbestand laden.
Dus laten we ze handmatig nodig hebben, na de verklaring gulp-load-plug-ins bovenaan ons gulpbestand.
zoals zo:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Het is de moeite waard om op te merken, dat gulp-responsief wordt geleverd met de scherpe beeldprocessor, die beter is dan imagemagick BY FAAAAR !. Sharp is wat wordt gebruikt door gulp-responsive, om uw afbeeldingen bij te snijden tot de gewenste breedte.
u zou kunnen kijken naar gulp-responsieve-configuratie-opties, voor een uitgebreide lijst van configuratieparameters. Ik heb alleen gebruikt
- breedte - om onze afbeeldingen bij te snijden tot een breedte w, doorgegeven als een parameter
- hernoemen - om een achtervoegsel aan de afbeeldingsnaam toe te voegen, zodat deze uniek blijft
in mijn configuratiefunctie hieronder. dus onze functie snijdt de afbeelding bij tot de breedte die als invoer is doorgegeven, voor alle overeenkomende afbeeldingen die zijn ontcijferd via de globale invoer. vervolgens wordt elke afbeelding gecomprimeerd met behulp van jpeg-recompress of pngquant en opgeslagen in build / images.
Met dat in gedachten zou onze functie zo zijn:
/*
@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));
}
Notitie
$ -> slok
$$ -> plug-ins voor gulp-load
$ .src -> bouwt bestandsstromen die overeenkomen met de glob die is doorgegeven als src
$ .dest -> slaat het gemanipuleerde bestand op in het opgegeven pad
Verdere referenties
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;
}));
}
Anatomie van een slopende taak
De anatomie van een taakdefinitie is als volgt:
$.task(<taskname> , [dependencies] , <body>);
afhankelijkheden, is een reeks taken die moeten worden voltooid voordat de huidige taak die u definieert, wordt uitgevoerd. Meer zoals het dwingen van een synchrone uitvoering in plaats van de standaard Asynchrone functionaliteit.
Gulp-taken toevoegen
Dus dat hebben we nu
- Een hierboven gedefinieerde functie om stijlen te optimaliseren
- Een hierboven gedefinieerde functie om scripts te optimaliseren
- Een hierboven gedefinieerde functie om HTML te optimaliseren
- Een functie om meerdere afbeeldingen per afbeelding hierboven te genereren
Het enige wat we nu nog moeten doen, is ze te gebruiken wanneer dat nodig is.
Laten we onze taken schrijven volgens de syntaxis die we eerder hebben gedefinieerd
/*
* $.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();
});