gulp
Umfassender Leitfaden für eine Front-End-Workflow-Automatisierung mit Gulpjs
Suche…
Syntax
- npm install [plugin-name] --save-dev
- npm install [plugin-name] --save
- Funktion
<function-name>(glob) {$ .src (glob) .pipe ([plugin 1]). Pipe ([plugin 2]) .... pipe ([plugin n]).<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
Bemerkungen
Lesen Sie weiter - Erstellen einer Standardaufgabe und Einrichten der Browser-Synchronisierung
Verweise
Laden aller Plugins aus Package.JSON
Angenommen, Sie haben ein Verständnis für die Installation von gulp. Lassen Sie uns gleich zu den erforderlichen Abhängigkeiten von package.json unter dem Stammordner Ihres Projekts gehen.
Falls Sie noch keine Datei haben, erstellen Sie bitte eine leere Datei mit dem Namen
gulpfile.js
Erstens benötigen wir Schluck. wie so:
var $ = require('gulp');
Lassen Sie uns als Nächstes alle unsere Plugins mit dem folgenden Snippet in unsere Gulpfile laden
Hinweis
Bitte lesen Sie die Kommentare in allen Ausschnitten, die wir in dieser Lektüre enthalten werden, durch. Sie bieten mehr Einblick in alle Funktionen
/*
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')();
HINWEIS
In den vielen Beispielen, die wir in diesem Artikel haben, werden wir Alias genannt
- Schluck wie $ und
- gulp-load-plugins als $$
rein zur Vereinfachung des Schreibens.
Installieren von Plugins für Responsive Images | Css Minification | Js Minification
Unser Ziel ist es zu
- Passen Sie Ihre Bilder an Breiten und Skalierungen an, indem Sie eine Reihe von Bildern unterschiedlicher Breite erzeugen und diese verkleinern
- Lint Dein Javascript
- Minimieren Sie Ihre Assets - JS / CSS / HTML. Dadurch können Sie leichteren als leichtesten Code hosten
- Überwachen Sie die Dateien css / js / image und stellen Sie die Optimierungen wieder her
- Synchronisieren Sie Ihre Änderungen während der Entwicklung in einem Browser, der Ihre Site bereitstellt.
Wir brauchen eine Reihe von Plugins, also lassen Sie uns alle installieren. Bitte führen Sie alle im Stammordner des Projekts aus.
Plugins für die Bildverarbeitung
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-Plugins
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 einer Schluckfunktion
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Hinweis
Pipe ist eine Methode, mit der alle Dateien, die der Glob-Eingabe entsprechen, an unsere Plugins (in diesem Fall minifyhtml) gestreamt werden.
Es ist einfach, sich das so vorzustellen:
$ .src erstellt die Stream- und Pipes-Pipes aus jeder einzelnen Datei, die mit dem Glob übereinstimmt, nach unten zu jedem Plugin in der Pipeline. Jedes Plugin, an das die Datei übergeben wird, ändert nur den Inhalt im Speicher, bis $ .dest erreicht ist / erstellt Dateien, die von $ .src gestreamt werden
Wo ,
$ -> Schluck
$$ -> gulp-load-plugins
Anlagenoptimierung und -minimierung
Bevor Sie Optimiererfunktionen ausschreiben, müssen wir ein paar Cache-Plugins installieren.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Sie fragen sich vielleicht, warum zwei Caches eh! gulp-cached , gibt nur modifizierte oder neue Inhalte entlang der Pipeline an andere Plugins weiter. Da wir möchten, dass Dateien ohne Änderung auch für die Verkettung in eine einzige Datei pro Asset (css | js) verwendet werden, benötigen wir zusätzlich zum gulp-zwischengespeicherten gulp-remember
Zuerst verwenden wir gulp-cached , um eine Liste der Dateien zu erstellen, die sich geändert haben
Zweitens müssen wir unbedingt daran denken , alle Dateien zu verfolgen, die von dieser Liste im Speicher durchlaufen werden.
Erster Durchlauf: Es werden keine Dateien zwischengespeichert, so dass alle zwischengespeicherten Dateien an gulp-remember übergeben werden
Nachfolgende Läufe: Nur geänderte oder neue Dateien werden vom gulp-Cache weitergeleitet. Da sich der Inhalt der aktuellen Datei geändert hat, aktualisiert gulp-remember seinen Cache.
Cool, schreiben wir unseren ersten Optimierer
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'))
}
Hinweis
$ -> Schluck
$$ -> gulp-load-plugins
$ .src -> erstellt Dateistreams, die mit dem als src übergebenen Glob übereinstimmen
$ .dest -> speichert die manipulierte Datei im angegebenen Pfad
Skript-Optimierer
// 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'))
}
Hinweis
$ -> Schluck
$$ -> gulp-load-plugins
$ .src -> erstellt Dateistreams, die mit dem als src übergebenen Glob übereinstimmen
$ .dest -> speichert die manipulierte Datei im angegebenen Pfad
Erstellen Sie Responsive Images
Lassen Sie uns nun zur Bildverarbeitung übergehen. Das Ziel ist also, für jedes Bild, das Sie liefern möchten, eine Reihe von Größen zu haben.
Warum?
Nun, um zu verstehen, warum wir eine Reihe von Bildern mit unterschiedlichen Breiten benötigen, müssen wir darüber nachdenken, dass es wahrscheinlich Tausende von Geräten mit unterschiedlichen Auflösungen gibt. Wir brauchen ein Bild zum Skalieren ohne viel Pixelierung. Gleichzeitig müssen wir die Seitenladezeiten verbessern, indem wir nur das eine Bild herunterladen, das zu der Breite passt, in der es enthalten ist, und die möglichst klein dimensioniert ist. Es gibt wissenschaftliche Blogs wie die, die Eric Portis schrieb, die die Ineffektivität von reinen Medienanfragen hervorhebt und als umfassende Anleitung zum Verständnis von Konzepten wie srcsets und Größen dient.
Sie können sich auf Eric Portis 'Epos hier beziehen
Unsere Funktion muss nun einen Glob und eine Breite als Eingaben nehmen, ihre Zauberei ausführen und die Datei, die bei jedem Lauf erzeugt wird, an ein Ziel verschieben und das zu verantwortende Bild verkleinern.
In unserem ersten Beispiel haben wir zwei Bildkomprimierungs-Plugins installiert
Da diese Plugins NICHT mit einem "gulp-" vorangestellt werden, müssen wir sie manuell in unsere gulpfile laden.
SO Lassen Sie uns diese manuell anfordern, nachdem Sie die gulp-load-plugins oben in unserer Datei angegeben haben.
wie so:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Es lohnt sich zu erwähnen, dass gulp-responsive mit dem scharfen Bildprozessor geliefert wird, der besser ist als der Imagemaker von FAAAAR !. Scharf ist das, was von gulp-responsive verwendet wird, um Ihre Bilder auf die gewünschte Breite zuzuschneiden.
In gulp-responsive-configuration-options finden Sie eine umfassende Liste von Konfigurationsparametern. Ich habe nur gebraucht
- width - um unsere Bilder auf eine Breite w zu beschneiden, die als Parameter übergeben wird
- umbenennen, um dem Bildnamen ein Suffix hinzuzufügen, damit er eindeutig bleibt
in meiner Konfigurationsfunktion unten. Unsere Funktion beschneidet das Bild also auf die Breite, die als Eingabe übergeben wird, für alle übereinstimmenden Bilder, die über die Glob-Eingabe entschlüsselt wurden. Dann wird jedes Bild mit jpeg-recompress oder pngquant komprimiert und in build / images gespeichert.
In diesem Sinne wäre unsere Funktion so:
/*
@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));
}
Hinweis
$ -> Schluck
$$ -> gulp-load-plugins
$ .src -> erstellt Dateistreams, die mit dem als src übergebenen Glob übereinstimmen
$ .dest -> speichert die manipulierte Datei im angegebenen Pfad
Weitere referenzen
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 einer Schluckaufgabe
Die Anatomie einer Aufgabendefinition sieht so aus:
$.task(<taskname> , [dependencies] , <body>);
Abhängigkeiten ist ein Array von Tasks, die beendet werden müssen, bevor die aktuelle Task ausgeführt wird, die Sie definieren. Mehr wie das Erzwingen einer synchronen Ausführung anstelle der standardmäßigen asynchronen Funktionalität.
Gulp-Aufgaben hinzufügen
So haben wir jetzt
- Eine oben definierte Funktion zum Optimieren von Styles
- Eine oben definierte Funktion zum Optimieren von Skripts
- Eine oben definierte Funktion zum Optimieren von HTML
- Eine Funktion zum Erzeugen mehrerer Bilder pro Bild
Jetzt müssen wir sie nur noch aufrufen, wenn sie benötigt werden.
Lassen Sie uns unsere Aufgaben gemäß der zuvor definierten Syntax schreiben
/*
* $.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();
});