Gulp - łączenie zadań

Zadanie umożliwia modułowe podejście do konfigurowania Gulp. Musimy utworzyć zadanie dla każdej zależności, które dodamy, gdy znajdziemy i zainstalujemy inne wtyczki. Zadanie Gulp będzie miało następującą strukturę -

gulp.task('task-name', function() {
   //do stuff here
});

Gdzie „nazwa-zadania” to nazwa ciągu, a „funkcja ()” wykonuje zadanie. „Gulp.task” rejestruje funkcję jako zadanie w nazwie i określa zależności od innych zadań.

Instalowanie wtyczek

Weźmy jedną wtyczkę o nazwie minify-cssaby scalić i zmniejszyć wszystkie skrypty CSS. Można go zainstalować za pomocą npm, jak pokazano w następującym poleceniu -

npm install gulp-minify-css --save-dev

Aby pracować z „wtyczką gulp-minify-css”, musisz zainstalować inną wtyczkę o nazwie „gulp-autoprefixer”, jak pokazano w następującym poleceniu -

npm install gulp-autoprefixer --save-dev

Aby połączyć pliki CSS, zainstaluj gulp-concat, jak pokazano w następującym poleceniu -

npm install gulp-concat --save-dev

Po zainstalowaniu wtyczek musisz zapisać zależności w swoim pliku konfiguracyjnym w następujący sposób -

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Dodawanie zadania do pliku Gulp

Musimy stworzyć zadanie dla każdej zależności, które dodamy podczas instalacji wtyczek. Zadanie Gulp będzie miało następującą strukturę -

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Wtyczka „concat” łączy pliki CSS, a wtyczka „autoprefix” wskazuje bieżącą i poprzednie wersje wszystkich przeglądarek. Minimalizuje wszystkie skrypty CSS z folderu src i kopiuje do folderu kompilacji, wywołując metodę „dest” z argumentem, który reprezentuje katalog docelowy.

Aby uruchomić zadanie, użyj następującego polecenia w katalogu projektu -

gulp styles

Podobnie użyjemy innej wtyczki o nazwie `` gulp-imagemin '' do skompresowania pliku obrazu, który można zainstalować za pomocą następującego polecenia -

npm install gulp-imagemin --save-dev

Możesz dodać zależności do pliku konfiguracyjnego za pomocą następującego polecenia -

var imagemin = require('gulp-imagemin');

Możesz utworzyć zadanie dla powyżej zdefiniowanej zależności, jak pokazano w poniższym kodzie.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Obrazy znajdują się w „src / images / ** / *”, które są zapisywane w img_srcobject. Jest połączony potokowo z innymi funkcjami stworzonymi przez konstruktora „imagemin”. Kompresuje obrazy z folderu src i kopiuje do folderu kompilacji, wywołując metodę „dest” z argumentem, który reprezentuje katalog docelowy.

Aby uruchomić zadanie, użyj następującego polecenia w katalogu projektu -

gulp imagemin

Łączenie wielu zadań

Możesz uruchomić wiele zadań naraz, tworząc zadanie domyślne w pliku konfiguracyjnym, jak pokazano w poniższym kodzie -

gulp.task('default', ['imagemin', 'styles'], function() {

});

Plik Gulp jest skonfigurowany i gotowy do wykonania. Uruchom następujące polecenie w katalogu projektu, aby uruchomić powyższe połączone zadania -

gulp

Uruchamiając zadanie za pomocą powyższego polecenia, w wierszu polecenia otrzymasz następujący wynik -

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images