Automatyzacja z Gulp.js

Lekcje
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

19 ocen

Lubię to! 336
92 minut

Automatyzacja z Gulp.js

W dzisiejszych czasach praca Web Developera to coraz większa ilość zajęć. Część z nich, to czynności powtarzające się na każdym etapie tworzenia strony lub aplikacji internetowej. Zazwyczaj nie są to zadania ani przyjemne, ani kreatywne, a są po prostu żmudnym, koniecznym do wykonania krokiem. <br><br> Tak jest na przykład z minifikacją kodu CSS lub JavaScript przed wgraniem strony internetowej na serwer produkcyjny. Innym przykładem może być testowanie kodu JavaScript, optymalizacja obrazów czy dopisywanie do poszczególnych właściwości CSS3 przedrostków specyficznych dla danej przeglądarki internetowej. <br><br> Dobrą wiadomością jest jednak fakt, że wiele z tych czynności można zautomatyzować. Służą do tego tzw. "automatory zadań". Najpopularniejsze z nich to <a href="http://eduweb.pl/live/wprowadzenie-do-grunt-js">Grunt.js</a> oraz Gulp.js. W tym warsztacie dowiesz się jak zainstalować Gulp.js, a także jak skonfigurować ten automator zadań na przykładzie nowoczesnej strony internetowej, stworzonej z wykorzystaniem SASS, CSS3, a także JavaScript. Zobaczysz jak kompilować kod SASS do kodu CSS, jak dodawać tzw. "vendor prefixes" czy jak taki kod zminifikować. Poznasz również zadania Gulpa służące do sprawdzania poprawności kodu JavaScript, a także do jego konkatenacji (łączenia) oraz minifikacji. Nie zabraknie również wielu przydatnych informacji o automatycznej optymalizacji obrazów, a także wielu innych czynnościach, które być może dzisiaj wykonujesz ręcznie. <br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

Recenzje

5

19 dodanych ocen

2016-04-06

Piotrze, wielkie dzięki za podjęcie tematu. Całkiem fajnie by było, jakby udało się wspomnieć jeszcze o spritach? By już zapomnieć o compassie :)

K A

2016-04-08

Kiedy mniej wiecej zostanie dodany warsztat do bazy? Ciagle widnieje komunikat "Warsztat zostanie dodany do Bazy Wiedzy w ciągu 24h"

K A

2016-04-08

Czekamy

Marcin Maj

2016-04-09

Linki z warsztatu: http://pastebin.com/im6xmxM7

Piotr Palarz

2016-04-10

Napiszę coś od siebie. Obejrzałem warsztat grund.js czy jakoś tak i powiem tyle jest to strasznie zamotane. Po co kombinować szczególnie na OSX. Jest świetny program Coda 2. Możemy zrobić pełną automatyzację dla sass i less (sam jednym skrótem CMD+S, zapisuje plik LESS i konwertuję w wersji min do .css), jest plugin emmet, jest też plugin PHP & web toolkit (kompresujemy do min pliki css, js nawet możliwa jest kompresja html ale działa ona dla mnie niezadowalająco). Zastanawiam się poco się męczyć z ST skoro można prościej i wygodniej. Stworzenie projektu i automatyczna wysyłka plików na serwer też jest szybka i nie trzeba bawić się w konsoli, pisać reguł.

deleted deleted

2016-04-10

Oczywiście, to co Pan napisał to prawda, ale nie w każdym przypadku. W warsztacie o Grunt.js, a także tutaj w przypadku gulp.js, pokazałem przykład przeciętnej strony i najpopularniejszych zadań do wykonania. I część z nich można wykonać tak jak Pan pisze. Ale wszystko zależy od projektu. Zapewniam, że pracuję aktualnie nad kilkoma projektami, gdzie zadania Grunta ustawiłem sobie pod idealny workflow wyłącznie raz, a teraz wykonują one za mnie całą "brudną robotę". I są to dość skomplikowane zadania, których nie ma możliwości wykonać w programach typu CodeKit. Pluginy do Grunt.js czy gulp.js obejmują też wiele frameworków takich jak Angular i naprawdę można zautomatyzować ogromną liczbę czynności. W Pana przypadku być może idealnie sprawdzają się wymienione przez Pana rozwiązania i wowczas nie ma potrzeby, aby sięgać po coś nowego. Natomiast wszystko zależy od projektu i jego rozmiarów. Ja nie wyobrażam sobie pracy bez automatorów zadań czy konsoli w ogóle.

Piotr Palarz

2016-04-10

Jeszcze jednym ważnym argumentem jest fakt, że bardzo wiele projektów Open Source, z których przychodzi nam czasem korzystać, wykorzystują Grunt.js lub gulp.js. I po ich sklonowaniu GITem, możemy za pomocą kilku prostych komend wykonać bardzo wiele czynności, które ktoś wcześniej zdefiniował w pliku gruntfile.js lub gulpfile.js. Podsumowując, jeśli zależy nam wylącznie na kompilacji SASS do CSS i minifikacji plików JavaScript, to nie musimy sięgać po konsolowe automatory zadań. A jeśli są pewne czynności, ktore widzimy, że się powtarzają i nie mamy możliwości ich zautomatyzować za pomocą jakiegoś programu, to z pewnością będziemy to mogli zrobić z użyciem automatora zadań. Tutaj jako jeden z wielu przykładów podam ten pokazany w warsztacie o Kodowaniu Newsletterów. Tworzymy sobie kod HTML newslettera, piszemy w osobnych plikach SASS, a na końcu jedną komendą kod SASS jest kompilowany do CSS, a ten następnie wstawiany do odpowiednich elementów HTML jako atrybut style="color: #fff;" itd. co jest wymagane przy tworzeniu mailingów. Pozdrawiam! PS. polecam obejrzenie tego warsztatu, gdyż gulp.js jest dużo prostszy w użyciu niż Grunt.js ;)

Piotr Palarz

2016-04-11

Warsztat jak zawsze świetny, ale zabrakło mi jak zautomatyzować prace z bower.

Konrad Stasiuk

2016-04-11

Panie Konradzie, będzie o tym osobna lekcja na pewno :) Nie chciałem, aby warsztat był zbyt długi.

Piotr Palarz

2016-04-12

Ten warsztat to istny strzał w dziesiątkę! Do tej pory kwestie automatyzacji próbowałem rozwiązać za pomocą pluginów do swojego edytora, ale było to rozwiązanie dalece niedoskonałe: funkcjonalność pluginów często nie obsługiwała wszystkiego tego, co chciałem osiągnąć, a instalacja większej ich ilości źle wpływała na stabilność i wydajność edytora... W tej chwili mogę powiedzieć, że po tygodniu pracy z gulpem te dwie godziny warsztatu plus parę godzin zabawy we własnym zakresie zwróciło mi się już ze sporą nawiązką... Dzięki Panie Piotrze! A warsztat polecam w szczególności tym, którzy mają pomysł na ustawienie swojego workflow, a nie mogą tego osiągnąć za pomocą gotowych pluginów. Z gulpem swój własny, w pełni funkcjonalny plugin napiszecie w dwa kwadranse:) Panie Piotrze - kiedy cz. 2?

Tomasz Góral

2016-04-13

Bardzo się cieszę, że materiał się przydał. Tak jak wspominałem, ja do wielu projektów mam ustawiony specyficzny workflow i zaoszczędziłem tym sposobem mnóstwo czasu i niepotrzebnej, ręcznej pracy. O gulpie powiedziałem już praktycznie wszystko, teraz to jedynie kwestia odpowiednich pluginów, które każdy musi sobie znaleźć i dobrać pod swój projekt. Natomiast planuję jeszcze omówić Bower.js i pokażę jak zintegrować to narzędzie z gulpem.

Piotr Palarz

2016-11-18

Dzięki za bardzo dobry warsztat.

Grzegorz Szymkowiak

2017-01-12

Myślę, że pora aby zrobić podobny warsztat na temat webpacka - właśnie dla tego: http://www.npmtrends.com/webpack-vs-browserify-vs-gulp-vs-grunt

Wiktor Liszkiewicz

2017-01-18

@Wiktor, omówiliśmy ten temat w kursie: http://eduweb.pl/kursy/javascript/technologie-webdevelopera.html

Piotr Palarz

2017-01-26

Świetny warsztat, jak zawsze :)

Marzena Świerska

2017-10-15

Świetny materiał wprowadzający do świata Gulpa.

Przemysław Tyczyński

2018-06-27

W jaki sposób uruchomić automat stworzony już przez nas w innej lokalizacji?

Radoslaw Grzymala

2018-07-10

Radek, co dokładnie masz na myśli?

Piotr Palarz

2018-08-15

npm install

Marek Zientek

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje
Wykup w abonamencie od 79zł
Przetestuj za darmo przez 7 dni!

Autor: Piotr Palarz

Czas:

Wersja:

  • Pliki źródłowe
  • Certyfikat Ukończenia
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół

Automatyzacja z Gulp.js

  • Automatyzacja z Gulp.js