Aloittaminen Gulp.js n avulla

Gulp on Javascript-pohjainen työkalu, jonka avulla voit automatisoida työnkulun bitit. Automaatio voi kirjaimellisesti säästää tunteja päivässä. Olitpa kehittäjä tai suunnittelija, joka luo HTML-wireframes-ohjelmia nyt ja sitten, kehotan teitä kaivamaan sisään.

Tässä artikkelissa tarkastellaan Gulpin käytön perusasioita - asennuksesta perustavanlaatuiseen syntaksiin ja pari esimerkkiä. Loppuun mennessä artikkelin sinun pitäisi pystyä löytää, asentaa ja käyttää paketteja, jotka muut ovat luoneet Gulpille koota SASS, optimoi kuvat, luo sprites, yhdistää tiedostot ja paljon muuta!

Gulpin asentaminen

Älä huoli, asennus on erittäin helppoa. Meidän on käytettävä terminaalia OSX: ssä ja Linuxissa tai Windowsin komentokehotteessa. Viittaan siihen terminaalina tästä lähtien.

Avaa se ja kirjoita npm -v ja paina enter. Jos näet versionumeron, jossa on Node, on jo asennettu - tämä on riippuvuus Gulpista.

Jos saat “komentoa ei löydy” (tai vastaava virhe), siirry Node.js-lataussivulle alas ja valitse järjestelmäsi sopiva paketti. Asennuksen jälkeen npm-komento on käytettävissä päätelaitteessa.

Gulpin asentaminen on yhtä helppoa. Liitä seuraava komento päätelaitteeseen:

npm asentaa - global gulp

Tämä asentaa Gulp-komennon, joka on käytettävissä maailmanlaajuisesti järjestelmässäsi.

Gulp To A -hankkeen lisääminen

Gulp on nyt asennettu, mutta meidän on lisättävä se jokaiselle projektille, jota tarvitsemme, erikseen. Luo nyt tyhjä kansio ja navigoi siihen terminaalissasi. Käytä projektin kansiossa seuraavaa komentoa:

npm asenna --save-dev gulp

Tämän pitäisi luoda node_modules-kansio ja npm-debug.log-tiedosto projektikansioon. Näitä käytetään Gulpin tekemissä asioissa hankkeenne, sinun ei tarvitse miettiä niitä tässä vaiheessa.

Siksi meidän on lisättävä Gulp jokaiseen tiettyyn hankkeeseen jokaisella hankkeella on erilaiset vaatimukset. Voidaan kutsua SASS, toinen vähemmän. Voidaan käyttää Coffeescriptia, toista ei, ja niin edelleen.

Gulpfile

Gulpfile on se, missä taika tapahtuu, missä sinä määrität tarvitsemasi automaatiot ja kun haluat niiden tapahtuvan. Luo tyhjä oletusarvo luomalla nimetty tiedosto gulpfile.js ja liittämällä siihen seuraava koodi.

var gulp = vaadi ('gulp'); gulp.task ('oletus', toiminto () // Tämä ei tee mitään nyt, lisäämme pian toiminnallisuuden);

Kun tämä tiedosto on tallennettu, voit palata päätelaitteeseesi ja ajaa gulp-komentoa yksin. Gulp havaitsee, mikä projekti on, ja suorittaa oletustoiminnon - juuri luodun. Sinun pitäisi nähdä jotain tällaista:

Mikään ei tosiasiassa tapahdu täällä, koska tehtävä on tyhjä, mutta se toimii hyvin. Mennään nyt joitakin asianmukaisia ​​esimerkkejä!

Tiedoston kopioiminen

Tämä on tylsää, myönnän niin paljon, mutta se auttaa sinua ymmärtämään, mitä tapahtuu helposti.

Luo projekti-kansiossa nimetty tiedosto to_copy.txt , ja kansion dev. Mennään Gulpfileemme ja luomme uuden tehtävän kopio.

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

Ensimmäinen rivi määrittää tehtävän, jonka nimi on kopio. Tässä käytämme gulp.src: tä määrittämään, mitkä tiedostot kohdistetaan tällä tehtävällä - tässä tapauksessa se on yksi nimetty tiedosto to_copy.txt.

Sitten putkea nämä tiedostot gulp.dest-toimintoon, joka määrittää, mihin haluamme laittaa nämä tiedostot - olen käyttänyt dev-hakemistoa.

Palaa päätelaitteeseen ja tyyppiin kopio suorittaaksesi tämän tehtävän, sen pitäisi kopioida määritetty tiedosto määrättyyn hakemistoon.

Putkikomento on Gulpin ytimessä. Se on tehokas tapa siirtää tietoja komentojen välillä. Src-komento määrittää tiedostot, jotka on lähetetty dest-komentoon. Monimutkaisemmissa skenaarioissa me putkisimme tiedostot muihin komentoihin ennen määränpäätä.

Sinun pitäisi myös olla tietoinen siitä, että lähde voidaan antaa yksittäisenä tiedostona tai useina tiedostoina. Jos meillä on nimetty kansio tuotanto ja haluamme siirtää kaikki tiedostot kehitys kansioon, voisimme käyttää seuraavaa komentoa:

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

Tähtimerkki vastaa mitä tahansa hakemistossa. Voit myös sopia kaikkiin alihakemistojen tiedostoihin ja tehdä kaikenlaisia ​​muita fancy-yhteensopivia. Katso lisätietoja node-glob-dokumentoinnista.

SASSin kääntäminen

Tyylitaulukon kokoaminen SASS-tiedostoista on kehittäjien yleinen tehtävä. Se voidaan tehdä Gulpilla melko helposti, meidän on kuitenkin tehtävä jonkinlainen valmistelu. Peruskomentojen, kuten src, dest ja useat muut, lisäksi kaikki toiminnot lisätään kolmannen osapuolen lisäosien kautta. Seuraavassa kerrotaan, miten käytän niitä.

Kirjoitan SASS Gulp Google, ensimmäinen tulos on yleensä mitä tarvitsen, sinun pitäisi löytää SASS-paketin sivu. Se näyttää, miten se asennetaan (npm asenna gulp-sass). On todennäköistä, että sinun täytyy käyttää sudoa asentaaksesi sen järjestelmänvalvojaksi, joten se todennäköisesti on (sudo npm asenna gulp-sass) .

Kun se on tehty, voit käyttää pakkauksen sanelemaa koodia. Voit tehdä tämän luomalla styles.scss-tiedoston, jonka sisältö on seuraava:

$ primääri: # ff9900; runko tausta: $ ensisijainen; 

Luo nyt seuraava Gulp-tehtävä Gulpfilessä.

gulp.task ('sass', toiminto () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Ennen kuin käynnistät komennon, älä unohda "vaatia" Gulpfileen yläosassa olevaa pakettia seuraavasti:

var sass = vaadi ('gulp-sass');

Kun suoritat kurista sass, kaikki tiedostot, joilla on scss-laajennus, johdetaan sass-funktioon, joka muuntaa ne css: ksi. Nämä siirretään sitten kohdefunktioon, joka asettaa ne css-kansioon.

Tiedostojen ja kansioiden katselu

Tähän mennessä tämä kaikki on kätevä, mutta meidän on vielä kirjoitettava komento joka kerta haluamme suorittaa tehtävän, joka ei ole kovin tehokasta, varsinkin kun kyseessä on tyylitaulukon muutokset. Gulpilla voit katsella muutoksia ja tiedostoja automaattisesti.

Luo Gulpfile-kansioon nimetty komento automatisoida joka käyttää katselukomentoa katsomaan muutamia tiedostoja ja suorita tietyn komennon, kun tiedosto muuttuu.

gulp.task ('automate', toiminto () gulp.watch ('*. scss', ['sass']););

Jos kirjoitat gulp automate päätelaitteeseen, se käynnistää ja lopettaa tehtävän, mutta se ei palaa kehoon, koska se seuraa muutoksia. Olemme määrittäneet, että haluamme katsella kaikkia scss-tiedostoja juurihakemistossa ja jos ne muuttuvat, haluamme suorittaa sass-komennon, jonka olemme asettaneet aiemmin.

Jos muutat nyt style.scss-tiedostoa, se pitäisi kääntää css-tiedostoon css-hakemistossa automaattisesti.

Useiden tehtävien suorittaminen

On monia tilanteita, joissa haluat ehkä suorittaa useita tehtäviä. Katsellessasi javascript-kansiota saatat haluta koota yhteen kaksi tiedostoa ja jatkaa sitten minimoida ne. Voit tehdä tämän kahdella tavalla.

Jos tehtävät liittyvät toisiinsa, haluan ketjua. Hyvä esimerkki olisi javascript-tiedostojen yhdistäminen ja minimointi. Putkimme ensin tiedostot concat-toimintoon, sitten putkistamme ne gulp-uglify-laitteeseen, ja sitten käytät kohde-toimintoa tulostamaan ne.

Jos tehtävät eivät liity toisiinsa, voit soita useita tehtäviä. Esimerkkinä voisi olla tehtävä, jossa haluamme yhdistää ja minimoida skriptejä ja koota myös SASS. Tässä hän on täynnä Gulpfileä siitä, miten se näyttää.

var gulp = vaadi ('gulp'); var uglify = vaadi ('gulp-uglify'); var concat = vaadi ('gulp-concat'); var sass = vaadi ('gulp-sass'); gulp.task ('skriptit', toiminto () gulp.src ('js / ** / * .js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('tyylejä', toiminto () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', toiminto () gulp.watch (['*. scss', 'js / ** / * .js'], ['skriptit', 'tyylit']);); gulp.task ('oletus', ['skriptit', 'tyylit'));

Jos kirjoitat gulp-skriptit kaikki js-hakemiston sisällä olevat javascript-tiedostot yhdistetään päätelaitteeseen, tulostetaan päähakemistoon, sitten peilataan ja tallennetaan päähakemistoon.

Jos kirjoitat kurista sass, kaikki scss-tiedostosi kootaan ja tallennetaan css-hakemistoon.

Jos kirjoitat kulaus (oletustehtävä), sinun skriptejä tehtävä suoritetaan, jota seuraa tyylit tehtävä.

gulp automate tehtävä katselee useita kansioita scss- ja js-tiedostojen muutoksille ja suorittaa molemmat määritellyt tehtävät, jos muutos havaitaan.

Yleiskatsaus

Gulpin käyttäminen ei ole vaikeaa, itse asiassa monet ihmiset pitävät sitä Gruntin parempana syntaksinsa vuoksi. Muista uudet automaatiot:

• Hae laajennusta
• Asenna laajennus
• Vaadi plugin Gulpfile-laitteessasi
• Käytä syntaksi dokumentaatiossa

Viisi Gulpissa käytettävissä olevaa komentoa (tehtävä, ajaa, katsella, src, dest) ovat ainoat, joista sinun tarvitsee tietää, kaikilla kolmansilla osapuolilla on hyvä dokumentaatio. Seuraavassa on luettelo niistä asioista, joita voin aloittaa juuri nyt:

• Kuvien optimointi gulp-image-optimoinnilla
• Kuvan spritien luominen gulp-sprite -palvelulla
• Yhdistetään tiedostot gulp-concatilla
• Tiedostojen muokkaaminen gulp-uglify: llä
• Tiedostojen poistaminen gulp-del
• Javascript-nukkaaminen gulp-jslintillä
• JSON-nukkaaminen gulp-jsonlintillä
• Automaattisesti korjaa CSS Gulp-autoprefixerillä
• Etsi ja korvaa käyttämällä gulp-frep
• Vähennä CSS: ää gulp-minify-css: llä