Pierwsze kroki z pakietami startowymi Gulp

Mówienie o CodeKit i korzyściach, jakie oferuje programistom front-end, pojawiło się również tuż po poście, a także korzyściach, jakie oferuje coś takiego jak Gulp.

Post na temat różnicy między nimi, dlaczego możesz chcieć jedno nad drugim, a zalety lub wady obu mogą być jego postem.

Ale w tym celu chciałbym wziąć pakiety startowe, o których pisałem, dotyczące Gulpa i podać prosty przykład startowego pliku Gulp i jak go używać w projektach WordPress.

Pierwsze kroki z Gulp

Po pierwsze jestem fanem Homebrew, więc jeśli chodzi o zarządzanie pakietami, które nie są częścią Mac App Store, korzystam z niego. To znacznie ułatwia instalowanie pakietów, aktualizowanie ich i odinstalowywanie.

Jeśli nie czytałeś mojego przewodnika po Homebrew, zrób to, ponieważ pozostała część tego postu zakłada, że ​​masz go zainstalowany.

1 Zainstaluj Gulp

Jeśli masz zainstalowany Homebrew, upewnij się, że wszystko wygląda dobrze i jest aktualne, mam cały przewodnik dotyczący konfiguracji Gulpa na lokalnym komputerze.

Więc jeśli nie masz jeszcze tej konfiguracji, sprawdź ten post, aby dowiedzieć się, jak to zrobić.

2 Napisz plik konfiguracyjny Gulp, część 1

Aby zainicjować plik konfiguracyjny Gulp, wprowadź następujące polecenie w katalogu głównym projektu w terminalu:

Proste, prawda?

Spowoduje to utworzenie pustego pliku gulpfile.js w katalogu głównym projektu. Następnie nadszedł czas na edycję pliku.

W tym poście użyję czterech pakietów, które wcześniej opisałem:

• łyk
• przełykaj-sass
• łyk-obraz
• przełykać

Każde z nich to zadania odpowiedzialne za transpilację Sassa, optymalizację obrazów i minifikację JavaScriptu.

Zadania, które chcesz uruchomić z wiersza poleceń, nie powinny zawierać spacji.

Aby skonfigurować podstawowe zadania, aby można je było uruchamiać z wiersza poleceń, musisz wykonać następujące czynności:

Sass

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

JavaScript

gulp.task('js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Obrazy

gulp.task('images', function() {
  return gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('assets/images'))
});

Prowadzenie ich indywidualnie

Uruchamianie tych zadań indywidualnie wymaga wpisania następujących informacji w konsoli za każdym razem, gdy chcesz, powiedzmy, transpilować pliki Sass i zminimalizować pliki JavaScript:

Ale to szybko się starzeje. Co więcej, jest mniej wydajny, zwłaszcza gdy możesz skonfigurować zegarek, aby automatycznie uruchamiał zadania za każdym razem, gdy zapisujesz plik.

2 Napisz plik konfiguracyjny Gulp, część 2

Konfiguracja zegarka to prawdopodobnie najlepsza rzecz, jaką możesz zrobić, jeśli chodzi o oszczędność czasu dzięki Gulp.

Oglądaj pliki i rób coś, gdy plik się zmieni. To zawsze zwraca EventEmitter, który emituje change zdarzenia.

Konfiguracja zegarka jest łatwa. Przypomina zadanie (w rzeczywistości wymaga zadania), ale ma też specjalne argumenty. Aby dodać zadanie oglądania, które będzie obsługiwać Sass, JavaScript i obrazy, skonfiguruj następujące elementy w pliku gulpfile.js:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Następnie po prostu uruchom zadanie :

Stąd, za każdym razem, gdy zapiszesz plik Sass, plik JavaScript lub dokonasz zmiany w obrazie, zadanie zostanie uruchomione automatycznie, wykonując pracę zdefiniowanego zadania. Zauważ, że będzie to działać bez przerwy w swoim wątku, więc będziesz musiał otworzyć nową kartę lub okno terminala, jeśli potrzebujesz wykonać dodatkową pracę.

Uwaga o wersjach

We wcześniejszych wersjach Gulpa, drugi argument funkcji watch akceptował tablicę; jednak najnowsza wersja wymaga rzeczywistej funkcji (którą widać powyżej w tym, że zadeklarowałem series ).

Krótko mówiąc, Gulp 4 pozwala na wykonywanie sekwencyjne, które odbywa się za pomocą serii, i wykonywanie równoległe (które może korzystać z funkcji równoległej ). Są one poza zakresem tego postu, ponieważ ma to wyłącznie pomóc Ci zacząć.

Po zakończeniu powinieneś mieć znacznie więcej automatyzacji w procesie kompilacji.