Gulp - tworzenie aplikacji

W poprzednich rozdziałach zapoznałeś się z instalacją Gulp i podstawami Gulp, które obejmują system budowania Gulp, menedżer pakietów, moduł uruchamiający zadania, strukturę Gulp itp.

W tym rozdziale zobaczymy podstawy tworzenia aplikacji, które obejmują:

• Deklarowanie wymaganych zależności
• Tworzenie zadania dla zależności
• Uruchomienie zadania
• Obserwowanie zadania

Deklaracja zależności

Podczas instalowania wtyczek do aplikacji należy określić zależności dla wtyczek. Zależności są obsługiwane przez menedżera pakietów, takie jak bower i npm.

Weźmy jedną wtyczkę o nazwie gulp-imageminaby zdefiniować dla niego zależności w pliku konfiguracyjnym. Tej wtyczki można użyć do skompresowania pliku obrazu i można ją zainstalować za pomocą następującego wiersza poleceń -

npm install gulp-imagemin --save-dev

Możesz dodać zależności do pliku konfiguracji, jak pokazano w poniższym kodzie.

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

Powyższa linia zawiera wtyczkę i jest zawarta jako obiekt o nazwie imagemin.

Tworzenie zadania dla zależności

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 ciąg znaków, a „funkcja ()” wykonuje zadanie. Element „gulp.task” rejestruje funkcję jako zadanie w ramach nazwy i określa zależności od innych zadań.

Możesz utworzyć zadanie dla wyż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óry jest zapisywany w img_srcobject. Jest przesyłany potokowo do innej funkcji stworzonej przez konstruktora imagemin. Kompresuje obrazy z folderu src i kopiuje do folderu budowania przez wywołaniedest metoda z argumentem, który reprezentuje katalog docelowy.

Uruchomienie zadania

Plik Gulp jest skonfigurowany i gotowy do wykonania. Użyj następującego polecenia w katalogu projektu, aby uruchomić zadanie -

gulp imagemin

Po uruchomieniu zadania za pomocą powyższego polecenia zobaczysz następujący wynik w wierszu polecenia -

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)