gulp
Kompleksowy przewodnik po automatyzacji przepływu pracy z interfejsem Gulpjs -1 z 2
Szukaj…
Składnia
- npm install [nazwa wtyczki] --save-dev
- npm install [nazwa wtyczki] --save
- Funkcja
<function-name>(glob) {$ .src (glob) .pipe ([plugin 1]). Pipe ([plugin 2]) .... pipe ([plugin n]). Pipe ($ .dest (<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
Uwagi
Kontynuuj czytanie - Tworzenie domyślnego zadania i konfigurowanie synchronizacji przeglądarki
Bibliografia
Ładowanie wszystkich wtyczek z Package.JSON
Zakładając, że wiesz, jak zainstalować gulp, pozwól nam zanurkować, aby wymagać wszystkich zależności gulp z package.json w folderze głównym projektów.
Jeśli nie masz jeszcze pliku gulpfile, utwórz pusty plik o nazwie
gulpfile.js
Po pierwsze, potrzebujemy łyku. tak jak:
var $ = require('gulp');
Następnie załadujmy wszystkie nasze wtyczki do naszego pliku gulp, za pomocą poniższego fragmentu
Uwaga
Zapoznaj się z komentarzami we wszystkich fragmentach, które będziemy uwzględniać w tym czytaniu, zapewniają one lepszy wgląd w każdą funkcjonalność
/*
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')();
UWAGA
W wielu przykładach, które będziemy mieć w tym artykule, mamy alias
- przełknąć jako $ i
- gulp-load-plugins as $$
wyłącznie dla ułatwienia pisania.
Instalowanie wtyczek dla responsywnych obrazów | Css Minification | Js minification
Naszym celem jest
- Dostosuj obrazy do szerokości i odpowiednio skaluj, generując baterię obrazów o różnych szerokościach i zmniejszając je
- Zaśmieć JavaScript
- Zminimalizuj swoje zasoby - JS / CSS / HTML, dzięki czemu możesz hostować jaśniejszy niż najlżejszy kod
- Obserwuj pliki css / js / image pod kątem zmian i odbuduj optymalizacje
- Synchronizowanie zmian w trakcie programowania w przeglądarce obsługującej witrynę.
Potrzebujemy wielu wtyczek, więc zainstalujmy je wszystkie. Uruchom je wszystkie w folderze głównym projektu.
Wtyczki przetwarzania obrazu
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
Wtyczki optymalizatora zasobów
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
Anatomia funkcji przełyku
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Uwaga
pipe jest metodą, która przesyła strumieniowo wszystkie pliki pasujące do wejścia glob, do naszych wtyczek (w tym przypadku minifyhtml).
Łatwo to sobie wyobrazić:
$ .src jest tym, co buduje potoki i potoki z każdego pliku dopasowującego glob w dół do każdej wtyczki w potoku. Każda wtyczka, do której plik jest przekazywany, modyfikuje jego zawartość w pamięci tylko do osiągnięcia $ .dest, który następnie aktualizuje / tworzy pliki przesyłane strumieniowo przez $ .src
gdzie,
$ -> łyk
$$ -> wtyczki gulp-load
Optymalizacja i minimalizacja zasobów
Dlatego przed wypisaniem funkcji optymalizatora musimy zainstalować kilka wtyczek buforujących.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Możesz się zastanawiać, dlaczego dwie skrzynki są, eh !. buforowane gulp , przekazuje tylko zmodyfikowane lub nowe treści w potoku do innych wtyczek. Ponieważ chcemy, aby pliki bez zmian były również używane do łączenia w jeden plik na zasób (css | js), potrzebujemy gulp-Remember oprócz gulp-cached
Najpierw używamy gulp-cache do zbudowania listy plików, które uległy zmianie
Po drugie, potrzebujemy gulp-Remember, aby przechowywać w pamięci wszystkie pliki, które są przekazywane przez tę listę.
Pierwsze uruchomienie: Żadne pliki nie są buforowane, więc cache-gulp przekaże je wszystkie do gulp-Remember
Kolejne uruchomienia: Tylko zmodyfikowane lub nowe pliki są przesyłane strumieniowo przez buforowane gulp. Ponieważ zawartość bieżącego pliku uległa zmianie, gulp-Remember aktualizuje swoją pamięć podręczną.
Fajnie, napiszmy nasz pierwszy optymalizator
Optymalizator stylu
// 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'))
}
Uwaga
$ -> łyk
$$ -> wtyczki gulp-load
$ .src -> buduje strumienie plików pasujące do globu przekazanego jako src
$ .dest -> zapisuje zmanipulowany plik w podanej ścieżce
Optymalizator skryptu
// 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'))
}
Uwaga
$ -> łyk
$$ -> wtyczki gulp-load
$ .src -> buduje strumienie plików pasujące do globu przekazanego jako src
$ .dest -> zapisuje zmanipulowany plik w podanej ścieżce
Generuj responsywne obrazy
Przejdźmy teraz do przetwarzania obrazu. Tak więc celem jest, aby mieć zestaw rozmiarów dla każdego obrazu, który będziesz wyświetlać.
Dlaczego?
Cóż, aby zrozumieć, dlaczego potrzebujemy baterii obrazów o różnych szerokościach, musimy zastanowić się nad faktem, że prawdopodobnie istnieją zyliony urządzeń o różnych rozdzielczościach. Potrzebujemy obrazu do skalowania bez dużej pikselizacji. Jednocześnie musimy poprawić czas ładowania strony, pobierając tylko jeden obraz, który pasuje do szerokości, w której jest zawarty, a także ma najmniejszy możliwy wymiar, aby to zrobić. Istnieją blogi naukowe takie jak ten napisany przez Erica Portisa, który podkreśla nieefektywność samych zapytań medialnych i służy jako kompleksowy przewodnik do zrozumienia pojęć takich jak srcset i rozmiary.
Możesz odnieść się do epickiego pisma Erica Portisa tutaj
Teraz nasza funkcja musi przyjmować glob i szerokość jako dane wejściowe, wykonywać swoją magię i przesyłać plik, który generuje każdy przebieg, do miejsca docelowego i minimalizować odpowiadający obraz.
W naszym pierwszym przykładzie zainstalowaliśmy dwie wtyczki kompresji obrazu
Ponieważ te wtyczki NIE zaczynają się od prefiksu „gulp-”, musimy ręcznie załadować je do naszego pliku gulp.
SO Wymagajmy ich ręcznie, po deklaracji gulp-load-plugins na górze naszego pliku gulp.
tak jak:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Warto zauważyć, że reagujący na przełyk jest wyposażony w ostry procesor obrazu, który jest lepszy niż imagemag BY FAAAAR !. Ostry jest używany przez reagujący na łyki, aby przyciąć zdjęcia do pożądanych szerokości.
możesz spojrzeć na opcje konfiguracji responsywnej gulp, aby uzyskać pełną listę parametrów konfiguracyjnych. Użyłem tylko
- szerokość - aby przyciąć nasze obrazy do szerokości w, przekazanej jako parametr
- rename - aby dodać sufiks do nazwy obrazu, aby pozostał unikalny
w mojej funkcji konfiguracyjnej poniżej. więc nasza funkcja spowoduje przycięcie obrazu do szerokości przekazanej jako dane wejściowe, dla wszystkich pasujących obrazów rozszyfrowanych przez dane glob. następnie każdy obraz jest kompresowany za pomocą jpeg-recompress lub pngquant i zapisywany w kompilacji / images.
Mając to na uwadze, nasza funkcja wyglądałaby tak:
/*
@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));
}
Uwaga
$ -> łyk
$$ -> wtyczki gulp-load
$ .src -> buduje strumienie plików pasujące do globu przekazanego jako src
$ .dest -> zapisuje zmanipulowany plik w podanej ścieżce
Dalsze referencje
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;
}));
}
Anatomia przełyku
Anatomia definicji zadania wygląda następująco:
$.task(<taskname> , [dependencies] , <body>);
zależności, to tablica zadań, które MUSZĄ zakończyć przed uruchomieniem zdefiniowanego zadania. Bardziej przypomina wymuszanie wykonania synchronicznego zamiast domyślnej funkcji asynchronicznej.
Dodawanie zadań Gulp
Więc teraz mamy
- Funkcja zdefiniowana powyżej w celu optymalizacji stylów
- Funkcja zdefiniowana powyżej w celu optymalizacji skryptów
- Funkcja zdefiniowana powyżej w celu optymalizacji HTML
- Funkcja generowania wielu obrazów na obrazie powyżej
Wszystko, co musimy teraz zrobić, to przywołać je w razie potrzeby.
Napiszmy nasze zadania zgodnie ze zdefiniowaną wcześniej składnią
/*
* $.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();
});