Narzędzia pod Windows dla web developera

W tym poradniku przedstawię zbiór narzędzi przydatnych, a często niezbędnych w pracy web developera pracującego w środowisku Windows 10. W sumie jest to też taka moja ściągawka, gdyż sam szukałem po różnych stronach opisu, w jaki sposób obsłużyć taski w Gulpie. No cóż, na co dzień się tego nie robi, a jak już trzeba, to wygodnie mieć zbiór wszystkich informacji pod ręką. Krok po kroku, pokażę tu, jak zainstalować prezentowane narzędzia, omówię też dlaczego je instalować, oraz co jest potrzebne do ich instalacji. Na końcu artykułu znajdziesz linki do dodatkowych narzędzi, które co prawda nie są niezbędne, ale wspomagają pracę każdego deva.

Spis treści:

1. Instalacja GIT

Do instalacji wielu narzędzi (np. Node.js) przydatny będzie GIT (rozproszony system kontroli wersji). Dzięki niemu będziesz miał dostęp do ogromnego repozytorium darmowych zasobów. Przyda się także podczas pracy z własnymi projektami. Na potrzeby tego tutorialu nie będę omawiał możliwości Gita, ale jeśli nie pracowałeś z Gitem, to polecam artykuły na ten temat, których jest dużo w sieci.

Sama instalacja jest prosta, sprowadza się do pobrania instalatora z oficjalnej strony Gita i uruchomienia go. Użyj domyślnych ustawień. Instalator pobierzesz ze strony https://git-scm.com/download/win. Po instalacji, sprawdź zainstalowaną wersję, aby upewnić się, że cały proces przebiegł poprawnie. W tym celu wybierz folder ze swoim projektem (jeśli nie masz utworzonego, kliknij dowolny folder), z menu kontekstowego kliknij pozycję Git Bash Here i w oknie konsoli, które się pojawi wpisz polecenie:

 git --version

Git Bash - uruchomienie konsoli

Git - sprawdzenie zainstalowanej wersji

Jak widać na screenie, mam akurat zainstalowaną starszą wersję Git, ale w niczym to nie będzie przeszkadzać.

2. Instalacja Node.js na Windows 10

Za pomocą node.js będą uruchamiane zadania, które np. przypiszesz do swojego projektu (np. kompilacja plików SASS do CSS, kompresja CSS i łączenie wielu plików razem, czy też kompresja plików graficznych wrzuconych do projektu, oraz wiele innych zadań, do których dostęp będziesz miał z repozytorium, po zainstalowaniu NPM – w następnym kroku). Node.js pobierzesz ze strony https://nodejs.org/en/download/. Wybierz wersję z długim czasem wsparcia (LTS). Po instalacji sprawdź w konsoli wersję, poleceniem:

 node -v

Jeśli zobaczysz numer zainstalowanej wersji, wszystko jest ok.

Node.js download

Node.js installation

3. Instalacja NPM

NPM jest oficjalnym managerem pakietów Node – Node Package Manager (są też inne, lecz ten jest chyba najpopularniejszy). Dzięki niemu możliwe jest szybkie instalowanie pakietów, publikowanie ich, itp.
Po zainstalowaniu node.js (poprzedni krok tego tutoriala) będziesz posiadał zainstalowany manager NPM, jednakże zazwyczaj będzie to starsza wersja. Wersję sprawdzisz w uruchomionej już wcześniej konsoli poleceniem:

 npm -v

NPM version

Jak widzisz na screenie powyżej, po zainstalowaniu najnowsze wersji Node.js, otrzymałem NPM w wersji 5.6.0, podczas gdy najnowsza wersja to 6.2.0.
Polecam ci aktualizację NPM do najnowszej wersji, zgodnie z opisem zamieszczonym na stronie https://github.com/felixrieseberg/npm-windows-upgrade#usage. W tym celu uruchom wbudowane w Windows narzędzie Windows PowerShell z uprawnieniami administratora i wykonaj następujące polecenia:

 Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

Następnie:

 npm install --global --production npm-windows-upgrade

I na koniec:

 npm-windows-upgrade --npm-version latest

Powinieneś mieć mniej więcej taki widok (będziesz miał inne ścieżki i być może wersje):

NPM update

Jak widać, NPM został zaktualizowany do najnowszej wersji.

4. Instalacja GULP

Do automatyzacji pracy przy projekcie wykorzystam GULP. Jest to task runner, który wykona szereg procesów w tle, podczas gdy ty będziesz mógł skupić się na pisaniu kodu. Tak jak wspomniałem w kroku 2, Node.js umożliwi uruchomienie danego zadania, natomiast stosując task runnery, takie jak Gulp, czy Grunt, możemy sobie zautomatyzować zadania, tak by wykonywały wiele procesów w odpowiedniej kolejności. Np. możemy sobie ustawić zadanie w Gulpie, które uruchomi preprocesor CSS (np. SASS), skompiluje pliki SASS do pliku/plików CSS, dokona konkatenacji kodu CSS i JS, dodatkowo jeszcze kompresując pliki wynikowe. To wszytko zrobimy w terminalu, wydając jedno polecenie, wywołujące odpowiednie zadanie Gulpa (task).

A więc, przechodzimy do terminala, wpisujemy polecenie, które zainstaluje nam Gulpa globalnie:

 npm install --global gulp

Od tego momentu mamy dostęp do komendy gulp. Jednak uruchomienie tej komendy w konsoli spowoduje wyświetlenie błędu, informującego o konieczności instalacji Gulpa lokalnie. Lokalnie, czyli w folderze z projektem. Tak więc upewniamy się, że w terminalu znajdujemy się w folderze naszego projektu i wpisujemy kolejne polecenie:

 npm install gulp --save-dev

Jak widać na poniższym screeni, u mnie sypnęło kilkoma ostrzeżeniami, jednakże nie są one istotne (np. pod Windows nie jest dostępny pakiet fsevents, który dedykowany jest dla OS X).

GULP installation

Po udanej instalacji, możesz już utworzyć w folderze z projektem plik gulpfile.js, w którym będziesz mógł zapisywać dowolne taski.

5. Przydatne narzędzia

Ponieważ Windows to nie Ubuntu, nie posiada tak rozbudowanego terminala. Polecam zamiast wbudowanego w Windows systemowego interpretera wiersza poleceń (cmd.exe), czy nieco bogatszego narzędzia jakim jest Windows PowerShell, instalację czegoś znacznie lepszego i w dodatku ładniejszego. Ostatnio moim ulubionym jest cmder – wygodny emulator konsoli pod Windows. Umożliwia uruchomienie kilku terminali, po których można przełączać się w jednym oknie za pomocą zakładek. Nie trzeba już gimnastykować się, by uruchomić np. cmd.exe, czy PowerShell z uprawnieniami administratora. Wygodne kopiowanie/wklejanie tekstu, wbudowany Git dla Windows, obsługa skrótów klawiszowych, a także szereg ustawień, dzięki którym każdy może go sobie dopasować do własnych potrzeb. Do tego jest przenośny, więc można go sobie wrzucić na pendrive i używać na innym komputerze. Można go sobie upiększyć wybierając jeden z wielu schematów kolorów. No cóż, jest on po prostu ładny i funkcjonalny:

cmder - Monokai scheme

cmder - Solarized Light scheme

cmder settings

Kolejnym z narzędzi jest nieoceniony WinMerge. Często przydaje mi się, gdy siedzę nad projektem, który nie jest dodany do repozytorium, a muszę sprawdzić, czy przypadkiem plik na serwerze nie różni się od tego, który mam w roboczej wersji na komputerze. Mały, szybki i bardzo wygodny w używaniu. Wszystkie zmiany widoczne są na paskach z lewej strony okna, można także szybko przeskakiwać między wykrytymi różnicami w plikach.

WinMerge

Bardzo wygodne narzędzie do zarządzania bazami danych. Jest przede wszystkim lekkie i łatwe w obsłudze. Oprócz standardowych możliwości oferuje tworzenie połączeń z wieloma serwerami jednocześnie, umożliwia wygodne eksportowanie danych z jednej bazy do innej (położonych na różnych serwerach) importowanie danych z plików (CSV i SQL), eksportowanie na wiele różnych sposobów. Bez porównania wygodniejsze narzędzie niż phpMyAdmin i o wiele lżejsze niż MySQL Workbench.

HeidiSQL