Első lépések a Gulp.js használatával

A Gulp egy JavaScript alapú eszköz, amely lehetővé teszi a munkafolyamatok bitjeinek automatizálását. Az automatizálás szó szerint takaríthat meg órákat naponta. Akár egy fejlesztő, akár egy tervező, aki most HTML-drótvázakat hoz létre, akkor bátorítom Önt.

Ebben a cikkben megvizsgáljuk a Gulp használatának alapjait - a telepítéstől az alapvető szintaxisig és néhány példát. A cikk végére képesnek kell lennie találhat, telepíthet és használhat olyan csomagokat, amelyeket mások létrehoztak a Gulp számára a SASS összeállítása, a képek optimalizálása, a spritek létrehozása, a fájlok összekapcsolása és így tovább!

A Gulp telepítése

Ne aggódj, a telepítés nagyon egyszerű. A terminált OSX-ben és Linuxban, vagy a Windows parancssort kell használnunk. Mostantól Terminálként fogok hivatkozni.

Nyissa fel és írja be az npm -v parancsot, és nyomja meg az enter billentyűt. Ha megjelenik a megjelenített verziószám, akkor már be van állítva a csomópont - ez függ a Gulp-tól.

Ha kapsz egy “parancs nem található” (vagy hasonló hiba), menj le a Node.js letöltési oldalára, és válassza ki a megfelelő csomagot a rendszeredhez. A telepítés után az npm parancs elérhető lesz a terminálon.

A Gulp telepítése ugyanolyan egyszerű. Illessze be a következő parancsot a terminálba:

npm telepítés - global gulp

Ez telepíti a Gulp parancsot, amely globálisan elérhető lesz a rendszeren.

Gulp To A projekt hozzáadása

A Gulp telepítve van, de minden projekthez hozzá kell adnunk, külön-külön. Most hozzon létre egy üres mappát és navigáljon a terminálon. A projekthez tartozó mappában használja a következő parancsot:

npm telepítés --save-dev gulp

Ezzel a projektmappában létre kell hoznia egy node_modules mappát és egy npm-debug.log fájlt. Ezeket a Gulp használja, hogy tegye a dolgát a projekthez, ezért nem kell rájuk gondolni.

Az ok, amiért hozzá kell adnunk a Gulp-ot minden egyes konkrét projekthez minden projektnek eltérő követelményei vannak. Lehet, hogy SASS-t hívunk, egy másik a kevésbé. Lehet használni a Coffeescript-et, a másik nem, és így tovább.

A Gulpfile

A Gulpfile az a hely, ahol a varázslat történik, ahol meghatározza a szükséges automatizálást és amikor azt akarod, hogy megtörténjenek. Hozzunk létre egy üres alapértelmezett feladatot a megnevezett fájl létrehozásával gulpfile.js és illessze be a következő kódot.

var gulp = szükséges ('gulp'); gulp.task ('alapértelmezett', függvény () // Ez most nem tesz semmit, hamarosan hozzáadjuk a funkcionalitást);

Miután ez a fájl mentésre került, visszatérhet a terminálhoz, és saját maga futtathatja a gulp parancsot. A Gulp felismeri, hogy melyik projektben van, és fut az alapértelmezett feladat - az, amit éppen létrehozott. Látnia kell ilyesmit:

Semmi sem történik itt, mivel a feladat üres, de jól működik. Most menjünk néhány megfelelő példával!

Fájl másolása

Ez egy unalmas, elismertem, de ez segít megérteni, hogy mi történik könnyen.

A projektmappában hozzon létre egy nevű fájlt to_copy.txt , és egy nevezett mappát dev. Menjünk be a Gulpfile-be és hozzunk létre egy új nevet másolat.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Az első sor meghatározza a másolatnak nevezett feladatot. Ezen belül a gulp.src-t használjuk annak meghatározására, hogy mely fájlokat célozzuk meg ezzel a feladattal - ebben az esetben ez egy egyetlen fájl, amelynek neve to_copy.txt.

Ezután ezeket a fájlokat a gulp.dest függvényhez csatoljuk, amely meghatározza, hogy hol kívánjuk ezeket a fájlokat elhelyezni - a dev könyvtárat használtam.

Menjen vissza a terminálra és a típusra gulp másolat a feladat futtatásához át kell másolnia a megadott fájlt a megadott könyvtárba, ilyesmi:

A csőparancs a Gulp szívében áll. Ez egy hatékony mód az adatok parancsok közötti áthelyezésére. Az src parancs megadja azokat a fájlokat, amelyek a dest parancshoz vannak csatolva. Bonyolultabb forgatókönyvek esetén a rendeltetési hely megadása előtt más parancsokat is csatolnánk.

Tudnia kell, hogy a forrás egyetlen fájlként vagy több fájlként is megadható. Ha van egy mappánk Termelés és minden fájlt át akarunk vinni a miénkből fejlesztés a következő mappát használhatjuk:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

A csillag karakter egybeesik a könyvtárban. Az összes alkönyvtárban lévő fájlokat is meg tudná egyeznie, és mindenféle egyéb képzeletbeli illesztést is elvégezhet. Tekintse meg a csomópont-globális dokumentációt a további információkért.

SASS összeállítása

A SASS fájlokból egy stíluslap összeállítása a fejlesztők közös feladata. A Gulp-szal elég könnyen elvégezhető, mégis elő kell készítenünk néhány előkészítést. Az olyan alapvető parancsok mellett, mint az src, a dest és számos más, az összes funkcionalitás harmadik féltől származó kiegészítőkkel egészül ki. Itt van, hogyan használom őket.

gépelek SASS Gulp a Google-ba, az első eredmény általában az, amire szükségem van, meg kell találnia a SASS csomag oldalát. Megmutatja, hogyan kell telepíteni (npm install gulp-sass). Lehet, hogy a sudo-t rendszergazdaként kell telepítenie, így valószínűleg ez lesz (sudo npm install gulp-sass) .

Ha elkészült, a szintaxis használatával a csomag összeállíthatja a kódot. Ehhez hozzon létre egy styles.scss nevű fájlt a következő tartalommal:

$ primer: # ff9900; test háttér: $ primer;

Most hozza létre a következő Gulp feladatot a Gulpfile-ben.

gulp.task ('sass', függvény () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

A parancs futtatása előtt ne felejtsük el, hogy a "Gulpfile" tetején lévő csomagot "megkövetelje":

var sass = szükséges ('gulp-sass');

Amikor fut nyalogasson, az scss kiterjesztéssel ellátott összes fájl a sass függvénybe kerül, amely css-re konvertálja őket. Ezután a célfunkcióhoz csatolódik, amely azokat a css mappába helyezi.

Fájlok és mappák megtekintése

Eddig ez minden hasznos, de még mindig be kell írnunk egy parancsot minden alkalommal egy olyan feladatot akarunk futtatni, ami nem túl hatékony, különösen, ha a stíluslap változásairól van szó. A Gulp lehetővé teszi, hogy a változtatásokat és a parancsokat automatikusan megnézze.

A Gulpfile-ben hozzon létre egy nevet automatizálni amely az óra parancsot használja a változásokhoz tartozó fájlok megtekintéséhez, és futtat egy adott parancsot, amikor egy fájl megváltozik.

gulp.task ('automate', függvény () gulp.watch ('*. scss', ['sass']););

Ha írja be gulp automate a terminálba, akkor elkezdi és befejezi a feladatot, de nem fog visszatérni a kérésre, mert figyelemmel kíséri a változásokat. Meghatároztuk, hogy a gyökérkönyvtárban minden scs-fájlt meg szeretnénk nézni, és ha módosulnak, akkor a korábban beállított sass parancsot szeretnénk futtatni.

Ha most megváltoztatja a style.scss fájlt, akkor a css könyvtárba kell automatikusan fordítani.

Több feladat futtatása

Sok olyan helyzet van, ahol több feladatot is futtathat. Amikor megtekinti a javascript mappát, érdemes két fájlt tömöríteni, majd folytatni a tömörítést. Kétféleképpen lehet ezt megtenni.

Ha a feladatok kapcsolódnak, szeretem láncolja őket. Jó példa erre a javascript fájlok összefonódása és tömörítése. Először a fájlokat a concat műveletre csövezzük, majd csövezzük őket a gulp-uglify-re, majd a célfunkcióval adja ki őket.

Ha a feladatok függetlenek lennének hívjon több feladatot. Egy példa lenne egy olyan feladat, ahol a szkriptjeinket összevonjuk és kicsinyítjük, és összeállítjuk a SASS-ot is. Itt teljes Gulpfile, hogy hogyan néz ki.

var gulp = szükséges ('gulp'); var uglify = szükséges ('gulp-uglify'); var concat = szükséges ('gulp-concat'); var sass = szükséges ('gulp-sass'); gulp.task ('scripts', függvény () gulp.src ('js / ** / * .js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('stílusok, függvény () gulp.src (' / *. scss ') .pipe (sass ()) .pipe (gulp.dest (' ./ css '));); gulp.task ('automate', függvény () gulp.watch (['*. scss', 'js / ** / *. js'], ['szkriptek', 'stílusok']);); gulp.task ('alapértelmezett', ['parancsfájlok', 'stílusok'));

Ha írja be gulp parancsfájlok a terminálba a js könyvtárban lévő összes javascript fájl összefonódik, a főkönyvtárba kerül, majd megugródik és elmenti a főkönyvtárba.

Ha írja be nyalogasson, az összes scs-fájlt összeállítja és elmenti a css könyvtárba.

Ha írja be korty (az alapértelmezett feladat), a szkriptek a feladat fut, majd a stílusok feladat.

A gulp automate a feladat több mappát figyeli az scss és js fájljaink változásaira, és mindkét feladatot elvégezzük, ha változás észlelhető.

Áttekintés

A Gulp használata nem nehéz, sőt, sokan jobban kedvelik Gruntot, mert egyszerűbb szintaxisa miatt. Ne feledje, hogy milyen lépéseket kell tennie az új automatizálás létrehozásakor:

Keresés bővítményre
Telepítse a bővítményt
A Gulpfile-ben bővítmény szükséges
Használja a szintaxist a dokumentációban

A Gulp-ben elérhető öt parancs (feladat, futtatás, nézés, src, dest) az egyetlen, amit tudnod kell, minden harmadik fél adatai nagyszerű dokumentációval rendelkeznek. Íme néhány olyan dolog, amelyet mostanában használhatok:

A képek optimalizálása gulp-image-optimalizálással
Kép spritek készítése gulp-sprite-el
Fájlok tömörítése gulp-concat-szal
Fájlok tömörítése gulp-uglify-vel
Fájlok törlése gulp-del segítségével
Javascript foltok gulp-jslint-rel
JSON fóliázás gulp-jsonlintrel
Autoprefix CSS a gulp-autoprefixerrel
Keresés és cseréje gulp-frep használatával
Minimalizálja a CSS-t a gulp-minify-css segítségével