Pakiety aplikacji pod Node.js szukaj i szukaj na stronie npm. Możesz także wyświetlić pakiety dostępne do instalacji i ich krótkie opisy lub przeprowadzić selektywne wyszukiwanie za pomocą polecenia:

Polecenia instalacji lokalnej Gulp

Zastosowano do lokalny instalacja Łyk z przechowywaniem informacji w parametrze Zależności deweloperskie polecenie pliku package.json instalacja npm będzie wyglądać jak:

Odinstaluj polecenia dla lokalnej instalacji Gulp

Jeśli chcesz usunąć Łyk (i inne pakiety) zainstalowany lokalnie w projekcie, a następnie użyj poleceń . Na przykład usunięcie pakietu lokalnego Łyk z projektu Node.js można wykonać za pomocą polecenia:

W ten sposób możesz usunąć lokalnie Łyk z projektu, a następnie zainstaluj go ponownie lokalnie, instalując w ten sposób najnowszą wersję Łyk w swoim projekcie Node.js.

Polecenia globalnej instalacji i usuwania Łyk.

Pokazano je tutaj w celach informacyjnych, ale nie zostały użyte w przykładzie.

Usuwanie instalacji globalnej Łyk, może być konieczne, jeśli tak jest Łyk został zainstalowany globalnie i wymaga aktualizacji, dlatego przed wykonaniem tej czynności należy odinstalować starą wersję Łyk Komenda:

Npm rm – globalny łyk Lub npm rm -g łyk

Pełne słowa kluczowe w poleceniu są pisane dwoma znakami ( --światowy) minus, a skróty tych słów zapisuje się jedynką ( -G) ze znakiem minus.

Globalna instalacja Gulpa ( podano tutaj w celach informacyjnych) jest wykonywany za pomocą polecenia:

Npm install -g łyk Lub npm i -g łyk

Przykładowy kod lokalnej instalacji Gulpa

Poniżej znajduje się kod z konsoli wykonywania poleceń lokalny instalacje Łyk z konserwacją zależności w parametrze Zależności deweloperskie plik package.json:

Po wykonaniu tej czynności lokalny instalacje Łyk z parametrem --zapisz-dev w pliku package.json do parametru dodana zostanie informacja o tej instalacji Zależności deweloperskie:

Instalowanie testowej wersji Gulpa

Jeśli zajdzie potrzeba zainstalowania wersji testowej Łyk, którego wydanie nie zostało jeszcze wydane i nie ma go w repozytoriach mpm, w takich przypadkach należy zainstalować Łyk z jego repozytorium git() z witryny github.com.

Dla wersji Łyk 4.x taka instalacja zostanie wykonana w następujący sposób:

Jeśli w twoim pakiet.json łyk został zarejestrowany jako zależność dewelopera :

$ npm odinstaluj gulp --save-dev $ npm zainstaluj git+https:// [e-mail chroniony]/gulpjs/gulp.git#4.0 --save-dev

Jeśli w twoim pakiet.json łyk został zarejestrowany jako zależność :

$ npm odinstaluj gulp --zapisz $ npm zainstaluj git+https:// [e-mail chroniony]/gulpjs/gulp.git#4.0 --zapisz

KROK 4 Zadzwoń do Gulpa

Teraz po montażu Łyk lokalnie, w naszym projekcie musimy zorganizować wywołanie go po nazwie ( łyk) w konsoli z każdy lokalizacje projektu i skąd każdy lokalizacje systemu plików. Aby to zrobić, musisz poinformować system operacyjny, w którym katalogu powinien szukać pliku wykonywalnego Łyk, gdy w konsoli po prostu piszemy > łyk, tj. nie będziemy wskazywać pełnej ścieżki do katalogu z plikiem wykonywalnym Gulp, lecz odniesiemy się do niej jedynie poprzez nazwa. Możesz podać systemowi operacyjnemu ścieżkę do katalogu, w którym znajduje się plik wykonywalny gulp, poprzez zmienną systemową ŚCIEŻKA, dodając do niego tę ścieżkę.

Katalog, w którym znajduje się plik wykonywalny ( plik startowy) plik łyk, dla przykładu z tego artykułu będzie to wyglądało tak:

• Z:\Tworzenie stron internetowych- katalog główny Node.js projekt, będziesz miał swój własny;
• Z:\WebDevelopment\node_modules- katalog aplikacji Node.js, ten katalog jest zawsze obecny w katalogu głównym projektu Node.js po zainstalowaniu Gulpa;
• Z:\WebDevelopment\node_modules\.bin- katalog, w którym znajduje się plik startowy łyk, końcowy ukośnik nie jest potrzebny w ścieżce.

Ustawianie zmiennej PATH

Na przykładzie tego artykułu, aby Łyk można wywołać w konsoli za pomocą nazwa, należy dodać do zmiennej systemowej ŚCIEŻKA dodać Z:\WebDevelopment\node_modules\.bin sposób na katalog z plikiem startowym Łyk. NA Okna można to zrobić za pomocą interfejsu graficznego. Otwórz okno właściwości systemu ( WYGRAJ + PAUZA) "Panel sterowania\Wszystkie elementy Panelu sterowania\System" i idź do " Zaawansowane ustawienia systemu„. Otworzy się okno” Właściwości systemu„w którym musisz wybrać zakładkę” Dodatkowo" i naciśnij przycisk " Zmienne środowiska„. Otworzy się okno” Zmienne środowiska„gdzie w sekcji” Zmienne środowiskowe użytkownika"lub w sekcji" Zmienne systemowe„musisz wybrać zmienną” ŚCIEŻKA" i naciśnij przycisk " Zmiana". Następnie, oddzielone średnikami dodać ( dodaj na końcu linii) ścieżka do folderu z plikiem Gulp, który ma zostać uruchomiony bez cudzysłowów. W przykładzie tego artykułu musisz dodać ścieżkę taką jak: ;Z:\WebDevelopment\node_modules\.bin . Od tego Pełna ścieżka, wtedy nie ma znaczenia, z którego katalogu zostanie wywołany Łyk. Teraz zaapeluj do Łyk można wykonać w dowolnym katalogu systemu plików, ale w tym katalogu ( w którym wykonywane jest wezwanie do łykania) musi być obecny plik konfiguracyjny gulpfile.js, w przeciwnym razie wystąpi błąd aplikacji Łyk.

Wywoływanie zadania Gulpa

Po wykonaniu tego ustawienia zmiennej ŚCIEŻKA będzie można zadzwonić Łyk z lokalnej instalacji, będąc w każdy lokalizację systemu plików i prosty dostęp do niego za pomocą nazwa, tak jakby był zainstalowany globalnie.

Ogólny widok polecenia uruchomienia zadania Gulp

> łyk

Jeśli zadzwonisz Łyk bez podając nazwę zadania, będzie szukać zadania o nazwie „ domyślny".

KROK 5 tworzenie zadania Gulp

W tym kroku pokazano, jak napisać proste zadanie dla Łyk i przetestuj jego implementację oraz pracę Gulpa w projekcie internetowym.

gulpfile.js

Aby pisać zadania, musisz być w katalogu głównym projektu Node.js lub w dowolnym innym podfolderze projektu ( na przykład w katalogu określonej witryny) utwórz plik konfiguracyjny z zadaniami dla Łyk, który powinien mieć domyślnie nazwę gulpfile.js. Ten plik może mieć inną nazwę, ale w tym przypadku konieczne będzie określenie Łyk jakiego imienia zdecydowałeś się użyć zamiast domyślny dla konfiguracji Gulp. Plik zadań gulpfile.js jest zwykłym plikiem JavaScript plik i wykonywany na platformie Node.js, więc musisz to zrobić połączenie Łyk i moduły niezbędne do działania. Następnie możesz napisać wszystkie niezbędne zadania.

Poniżej zawartość dwóch testowych plików gulpfile.js z katalogów Tworzenie stron internetowych I WebDevelopment\Projects\Site1\themes przykład tego artykułu. Celowo utworzyłem dwa pliki testowe z różnymi zadaniami i zlokalizowane w różny katalogi projektów w celu zademonstrowania ich niezależnego działania przy użyciu jednej instalacji lokalnej Łyk.

Pierwszy, główny plik gulpfile.js z przykładu:

Drugi plik gulpfile.js dla konkretnej witryny z przykładu:

Dyrektywa use strict wygląda jak linia „use strict”; lub „użyj ściśle”; i jest umieszczony na początku skryptu, wtedy ten kod JS będzie działał zgodnie z nowoczesnym standardem ES5.

Możesz umieścić takie pliki gulpfile.js, już z ich zadaniami, nie tylko w katalogu głównym bieżącego projektu Node.js (w tym przykładzie jest to katalog główny WebDevelopment), ale w dowolnym innym katalogu zagnieżdżonym w tym katalogu, na przykład w folderze z projektem konkretnej witryny.

Uruchamianie przykładowych zadań

Teraz sprawdźmy pracę Łyk problemy z tych dwóch przykładowych plików.

Przykładowy kod z konsoli uruchamiający zadanie testowe z pierwszego pliku gulpfile.js:

Przykładowy kod z konsoli uruchamiający zadanie testowe z drugiego pliku gulpfile.js:

Jak widać na przykładzie, dwa zadania z różnych gulpfile.js zostały pomyślnie zakończone.

Aby zatrzymać wykonywanie zadań Łyk musisz nacisnąć skrót klawiaturowy Ctrl+C i realizacja zadań zostanie przerwana. Jest to wygodne w użyciu, gdy zadania utknęły.

Screencast: Instalowanie Gulpa w projekcie witryny internetowej

Screencast demonstruje implementację lokalnej instalacji Gulpa w projekcie internetowym. Opisane są wszystkie etapy procesu - przygotowanie do instalacji, utworzenie struktury katalogów, wybranie katalogu do lokalnej instalacji Gulpa, inicjacja projektu Node.js, instalacja Gulpa, ustawienie wywołania Gulpa w terminalu poprzez edycję zmiennej systemowej PATH, pisanie zadań Gulpa w różnych katalogach projektów stron internetowych.

Wniosek

Uruchamiając przykład z tego artykułu, otrzymasz pełnoprawny wynik lokalny instalacja Łyk oraz przykłady dwóch plików startowych gulpfile.js z zadaniami testowymi w różnych katalogach deweloperskiego projektu internetowego. Następnie możesz wziąć te pliki i logikę ich tworzenia jako podstawę i utworzyć własne pliki w żądanych katalogach. Instrukcje tworzenia zadań aplikacji, przykłady popularnych zadań, dodatków i wtyczek do Łyk spójrz na stronę internetową tej aplikacji.

Cześć wszystkim! W tym artykule utworzymy nasz projekt, zainicjujemy plik manifestu i zainstalujemy Łyk lokalnie.

Na początek należy powiedzieć, że ścieżka do folderu (w tym nazwa użytkownika komputera) musi być w języku angielskim, w przeciwnym razie podczas korzystania mogą wystąpić błędy Łyk. Stworzyłem folder Projektowanie, w którym stworzę wszystkie moje projekty. Na przykład nazwę nasz projekt pierwszy projekt.

Tak więc w ostatnim artykule ustaliliśmy Łyk globalnie, teraz musimy zainstalować go lokalnie. Przede wszystkim przeprowadzimy inicjalizację. Wpisz następujące polecenie w terminalu:

CD path_to_your_project (cd „user/projects/firstProject”)
inicjacja npm

Za pomocą tego polecenia utworzymy podstawowy plik manifestu dla naszego projektu. W zasadzie wszystko tam jest jasne, więc nie będę tego wyjaśniał. Jeśli nie chcesz zawracać sobie głowy tymi wszystkimi ustawieniami, po prostu naciskaj cały czas Wchodzić, ponieważ Będziemy potrzebować tego pliku do innego, ustawienia początkowe nie są tak ważne.

Jeśli wszystko zrobiłeś poprawnie, plik powinien pojawić się w folderze projektu pakiet.json. Jeśli go otworzysz, zobaczysz, że wszystkie informacje, które wprowadziłeś (lub nie wprowadziłeś) podczas inicjalizacji, są tam przechowywane. Dodatkowo w pliku przechowuje się informacja o używanych pakietach i właśnie tego nam potrzeba. Jeśli stale korzystasz na przykład z biblioteki JQuery, możesz zapisać go w tym pliku, który zostanie automatycznie pobrany po rozpoczęciu nowego projektu.

Teraz zainstalujmy Łyk lokalnie do naszego folderu.

Npm przełykam --save-dev

Flaga --zapisz-dev potrzebne do zamówienia paczki Łyk a jego wersja została automatycznie zapisana do pliku pakiet.json. Jeśli otworzysz ten plik po pomyślnym zainstalowaniu pakietu, zobaczysz następujące informacje:

„Zależności dewelopera”: (
"przełyk": "^3.9.1"
}

Myślę, że jest jasne, że nazwa pakietu i jego wersja są tutaj zapisane. Strzałka w górę wskazuje, że ten pakiet może zostać zaktualizowany. Mamy też folder moduły_węzłów gdzie jest teraz przechowywany Łyk i wszystkie jego zależności. To tutaj zostaną zainstalowane nowe moduły.

To tyle na dzisiaj. Rozważaliśmy jak zainstalować gulpa lokalnie do folderu projektu i dlaczego potrzebny jest manifest pakiet.json.

GulpJS to fantastycznie szybki kreator projektów

• Tworzenie stron internetowych,
• JavaScript,
• Węzeł.JS

W tym artykule będzie więcej praktyki, złożymy środowisko programistyczne front-end przy użyciu Jade i Stylusa, uruchomimy lokalny serwer i połączymy Livereload. Opublikowałem projekt na Githubie, poeksperymentuj.

Instalowanie Gulpa

Struktura projektu:

Instalacja:

W root projektu znajduje się plik konfiguracyjny gulpfile.js i będziemy go edytować.

Inicjowanie wtyczek:

Zadania:

Stworzymy również zadania do przetwarzania Jade, obrazów i JS

// Zbierz kod HTML z Jade gulp.task("jade", funkcja() ( gulp.src([./assets/template/*.jade", "!./assets/template/_*.jade"]) .pipe(jade(( Pretty: true ))) // Kompiluj Jade tylko w folderze ./assets/template/ z wyłączeniem plików z _* .on("error", console.log) // Jeśli wystąpią błędy, wypisz i kontynuuj .pipe(gulp.dest("./public/")) // Zapisz zebrane pliki.pipe(livereload(server)); // wydaj polecenie ponownego załadowania strony )); // Zbuduj JS gulp.task("js", funkcja() ( gulp.src([./assets/js/**/*.js", "!./assets/js/vendor/**/* .js"]) .pipe(concat("index.js")) // Zbierz wszystkie JS, z wyjątkiem tych znajdujących się w ./assets/js/vendor/** .pipe(gulp.dest("./public/js ")) .pipe(livereload(server)); // wydaj polecenie ponownego załadowania strony )); // Skopiuj i minimalizuj obrazy gulp.task("images", funkcja() ( gulp.src("./assets/img/**/*") .pipe(imagemin()) .pipe(gulp.dest(" ./public/img"))));

Dla wygodnego rozwoju stworzymy serwer lokalny
// Lokalny serwer programistyczny gulp.task("http-server", funkcja() ( connect() .use(require("connect-livereload")()) .use(connect.static("./public") ) .listen("9000"); console.log("Serwer nasłuchuje na http://localhost:9000");
Zadania, których potrzebujemy powyżej, są przeznaczone do programowania i oczywiście chcemy śledzić zmiany w plikach i mieć Livereload na serwerze
Aby to zrobić, utwórzmy zadanie „obejrzyj”.

// Uruchom serwer deweloperski gulp watch gulp.task("watch", funkcja() ( // Wstępnie zbuduj projekt gulp.run("stylus"); gulp.run("jade"); gulp.run(" obrazy") ; gulp.run("js"); // Połącz Livereload z serwerem.listen(35729, funkcja(err) ( if (err) return console.log(err); gulp.watch("assets/stylus/* */* .styl", funkcja() ( gulp.run("rysik"); )); gulp.watch("zasoby/szablon/**/*.jade", funkcja() ( gulp.run("jade "); )); gulp.watch("zasoby/img/**/*", funkcja() ( gulp.run("obrazy"); )); gulp.watch("zasoby/js/**/* ", funkcja () ( gulp.run("js"); ));

Teraz możemy uruchomić nasz projekt i zobaczyć, co się stanie.
$ przełknij zegarek

Serwer jest dostępny pod adresem localhost:9000. Stworzyliśmy środowisko do tworzenia projektów internetowych przy użyciu Stylusa i Jade z Livereload. Teraz musisz złożyć zoptymalizowany projekt. Aby to zrobić, utwórzmy zadanie „kompilacja”.

Aby przyspieszyć proces tworzenia front-endu, automatyzujemy część zadań za pomocą kreatora Gulp.
Do tego potrzebujemy menedżera pakietów NPM. Aby jednak zainstalować NPM, musisz najpierw zainstalować Node.js.

Krok 1. Zainstaluj węzeł
Wejdź na oficjalną stronę https://nodejs.org i pobierz zalecaną wersję.

Uruchom instalator z uprawnieniami administratora.
Po instalacji pojawią się 2 ikony: Node.js i wiersz polecenia Node.js. Nie będą dla nas przydatne, ponieważ nie używamy Node.js i istnieją wygodniejsze opcje uruchamiania konsoli:
1. Użyj Konsoli Poleceń TotalCommander (Polecenia – Otwórz Konsolę Poleceń).
2. Przytrzymaj Shift i kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe. Pojawi się pozycja „Otwórz okno poleceń”.
Lepiej jest uruchomić wiersz poleceń, będąc w katalogu potrzebnego projektu; konsola natychmiast wyświetli ścieżkę do żądanego katalogu, co wyeliminuje potrzebę ręcznego wprowadzania ścieżki.

Aby sprawdzić wersje węzła i npm, wpisz w wierszu poleceń
węzeł -v i naciśnij Enter
następnie npm -v

Wersje NPM są zwykle aktualizowane częściej niż wersje węzłów, aby mieć pewność, że zainstalowana jest najnowsza wersja:
npm zainstaluj npm@latest -g

Polecenia Npm, które będą nam przydatne :
lista np- lista wszystkich zainstalowanych pakietów
npm -g ls --głębia=0- lista pakietów zainstalowanych globalnie
npm jest nieaktualny sprawdź, czy pakiety nie są nieaktualne
npm aktualizacja łyk- aktualizacja wersji wtyczek
inicjacja npm- utwórz pakiet.json
npm install nazwa_pakietu- zainstaluj pakiet (nazwa_pakietu - nazwa wymaganego pakietu)
npm install nazwa_pakietu --save-dev- zainstaluj pakiet i dokonaj wpisu na ten temat w package.json w sekcji devDependency
npm odinstaluj nazwa_pakietu- usunięcie paczki
instalacja npm- zainstaluj wszystkie pakiety wymienione w package.json
Przed wejściem do produkcji folia npm- naprawiamy wersje pakietów, teraz npm install zainstaluje dokładnie je i będziesz mieć pewność, że wszystko będzie działać tak, jak powinno

Skróty
-v: --wersja
-g: --globalny
-S: --zapisz
-D: --save-dev
-y: --tak
-n: --tak, fałsz

Krok 2: Zainstaluj łyk
Po pierwsze, gulp musi zostać zainstalowany globalnie.

Uruchom konsolę poleceń.
Czasami na przykład na niektórych zasobach przed poleceniem znajduje się znak dolara
$ npm install --global gulp-cli

Nie kopiuj ikony dolara, po prostu wklej samo polecenie
npm install --global gulp-cli

Wskazówka: Aby wkleić skopiowany tekst do wiersza poleceń, otwórz wiersz poleceń, naciśnij ALT + SPACJA -> Wartości domyślne, zaznacz pole wyboru myszy. Teraz możesz zaznaczyć tekst myszką i skopiować go do. kliknij linię prawym przyciskiem myszy - tekst zostanie wstawiony automatycznie.

Krok 3. Praca z gulpem w konkretnym projekcie

3.1 Najpierw utwórzmy pakiet zależności package.json
Plik package.json zawiera informacje, które będziemy wprowadzać w terminalu oraz listę wszystkich pakietów, które wykorzystamy w projekcie.

Podczas instalowania pakietu z przełącznikiem --save-dev pakiet jest automatycznie dodawany do package.json. Aby nie instalować ręcznie wszystkich pakietów w każdym nowym projekcie, skorzystamy z gotowego pakietu.json z potrzebnymi modułami i zależnościami, umieszczając go w katalogu głównym naszego projektu.

package.json jest generowany za pomocą polecenia npm init, które wyświetli na konsoli kilka pytań w celu wygenerowania pliku.
Element name domyślnie wyświetla nazwę katalogu projektu.

Wskazówka:
Możesz wygenerować ten plik szybciej i łatwiej, korzystając z opcji --yes (automatyczna odpowiedź „tak” na wszystkie pytania):
npm init --tak

Dobrze wiedzieć:
Możesz ustawić wartości domyślne, które będą używane przy każdym uruchomieniu npm init, co pozwoli Ci zaoszczędzić czas. Po instalacji są one zapisywane w plikach .npmrc.
Na przykład:
npm config set init.author.name „Valentina Vladova”
konfiguracja npm ustaw init.author.email " [e-mail chroniony]"
zestaw konfiguracyjny npm init.author.url „http://simpalmarket.com/”
npm ustaw licencję init MIT
npm ustaw wersję inicjującą 0.0.0
Następnie uruchom npm init, wszystkie określone wartości zostaną wciągnięte do odpowiednich zmiennych.

Kiedy npm init zapyta o repozytorium git, napisz krótko user/repo - npm jest na tyle mądry, aby rozwinąć linię w https://github.com/user/repo. npm wygeneruje także pola repozytorium, błędów i strony głównej w wymaganym formacie.

Przejdź więc do folderu głównego projektu, wywołaj konsolę poleceń i wpisz
npm init --tak

W katalogu głównym projektu pojawi się plik package.json zawierający w przybliżeniu następującą zawartość

3.2 Zainstaluj gul lokalnie
W folderze projektu w konsoli wpisz:
npm install --save-dev przełknij

lub w skrócie
npm przełykam --save-dev

Na liście pojawią się ostrzeżenia - zignoruj ​​je.

Aby sprawdzić wersję użyj polecenia
łyk --wersja

Folder node_modules pojawił się w katalogu głównym projektu. Wszystkie moduły i zależności, które zainstalujemy w projekcie, zostaną do niego automatycznie załadowane. Może istnieć wiele folderów z zależnościami, nawet jeśli nie ma zainstalowanych zbyt wielu pakietów. Wynika to z faktu, że oprócz pakietów głównych instalowane są programy niezbędne do prawidłowego działania pakietu głównego. Nie ma potrzeby czyszczenia ani usuwania czegokolwiek z folderu node_modules.

Wpis zostanie dodany do pliku package.json
„Zależności dewelopera”: (
"przełyk": "^3.9.1"
}

Teraz możesz zainstalować różne wtyczki do gulp.
http://gulpjs.com/plugins/
W polu wyszukiwania wpisz nazwę wtyczki, która Cię interesuje.

Wtyczki można instalować pojedynczo, na przykład:
npm install --save-dev gulp-hydraulik
a także listę oddzieloną spacjami, na przykład:
npm zainstaluj gulp-sass gulp-hydraulik gulp-autoprefixer gulp-minify-css --save-dev
Lepiej jest zainstalować wtyczki do instalacji i wtyczki do montażu za pomocą oddzielnych poleceń