Kom i gang med Gulp.js

Gulp er et Javascript-baseret værktøj, som giver dig mulighed for at automatisere bits af din arbejdsgang. Automatisering kan bogstaveligt talt spare dig timer om dagen. Uanset om du er en udvikler eller designer der skaber HTML-wireframes nu og da, opfordrer jeg dig til at grave i.

I denne artikel vil vi se på det grundlæggende ved at bruge Gulp - fra installation til grundlæggende syntaks og et par eksempler. I slutningen af artiklen skal du kunne find, installer og brug pakker, som andre har oprettet til Gulp at kompilere SASS, optimere billeder, oprette sprites, concatenate filer og meget mere!

Installation af Gulp

Bare rolig, installationen er meget let. Vi skal bruge terminalen i OSX og Linux eller kommandoprompten til Windows. Jeg vil referere til det som Terminal fra nu af.

Åbn den op og skriv npm -v og tryk enter. Hvis du ser versionsnummeret vist, har du allerede installeret Node - det er en afhængighed for Gulp.

Hvis du får en “Kommando ikke fundet” (eller en lignende fejl), gå ned på siden Node.js downloads og vælg den passende pakke til dit system. Når først installeret er kommandoen npm tilgængelig i terminalen.

Installation af Gulp er lige så nemt. Indsæt følgende kommando i terminalen, det er det:

npm install - global gulp

Dette vil installere kommandoen Gulp, som vil være tilgængelig globalt på dit system.

Tilføjelse af gulp til et projekt

Gulp er nu installeret, men vi skal tilføje det til hvert projekt, vi har brug for det til, separat. Opret en tom mappe nu og naviger til den i din terminal. Mens du bruger mappen til projektet, skal du bruge følgende kommando:

npm installere - save-dev gulp

Dette skal oprette en mappe node_modules og en npm-debug.log-fil i din projektmappe. Disse bruges af Gulp til at gøre dens ting til dit projekt, du behøver ikke at tænke på dem på dette tidspunkt.

Grunden til at vi skal tilføje Gulp til hvert enkelt projekt er det hvert projekt har forskellige krav. Man kan ringe til SASS, en anden til Mindre. Man kan bruge Coffeescript, den anden må ikke, og så videre.

Gulpfilen

Gulpfile er hvor magien sker, det er hvor du definerer de automatiseringer du har brug for og når du vil have dem til at ske. Lad os oprette en tom standardopgave ved at oprette en fil med navnet gulpfile.js og indsætte følgende kode i den.

var gulp = kræve ('gulp'); gulp.task ('default', funktion () // Dette gør intet for nu, vi tilføjer funktionalitet snart);

Når denne fil er gemt, kan du gå tilbage til din terminal og køre kommandoen gulp alene. Gulp registrerer hvilket projekt det er i og kører standardopgaven - den vi netop har oprettet. Du skal se noget som dette:

Der sker ikke noget her virkelig, da opgaven er tom, men det virker fint. Lad os nu komme med nogle egentlige eksempler!

Kopiering af en fil

Dette er kedeligt, jeg indrømmer så meget, men det hjælper dig med at forstå, hvad der foregår nemt.

Opret en fil med navnet i din projektmappe to_copy.txt , og en mappe med navnet dev. Lad os gå ind i vores Gulpfile og oprette en ny opgave med navnet kopi.

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

Den første linje definerer en opgave, der hedder kopi. Inden for dette bruger vi gulp.src til at angive, hvilke filer vi målretter mod denne opgave - i dette tilfælde er det en enkelt fil med navnet to_copy.txt.

Vi rør derefter disse filer til gulp.dest-funktionen, som angiver, hvor vi vil sætte disse filer - jeg har brugt dev-mappen.

Gå tilbage til din terminal og skriv gulp kopi For at køre denne opgave skal den kopiere den angivne fil til den angivne mappe, sådan som sådan:

Rørkommandoen ligger i hjertet af Gulp. Det er en effektiv måde at flytte data mellem kommandoer på. Kommandoen src angiver de filer, der ledes til dest-kommandoen. I mere komplekse scenarier vil vi røre vores filer til andre kommandoer, inden du angiver en destination.

Du skal også være opmærksom på, at kilden kan gives som en enkelt fil eller flere filer. Hvis vi har en navngivne mappe produktion og vi vil flytte alle filer fra vores udvikling mappe ind i det, kunne vi bruge følgende kommando:

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

Stjernekarakteren vil matche alt i mappen. Du kan også matche alle filer i alle underkataloger, og gøre alle mulige andre fancy matching. Tag et kig på node-glob dokumentationen for mere info.

Kompilering af SASS

Kompilering af et stylesheet ud af SASS-filer er en fælles opgave for udviklere. Det kan gøres med Gulp temmelig let, men vi skal lave noget forberedelse. Bortset fra grundlæggende kommandoer som src, dest og en række andre, tilføjes alle funktionaliteter via tredjepartsaddoner. Sådan går jeg med at bruge dem.

Jeg skriver SASS Gulp i Google, er det første resultat normalt det, jeg har brug for, du skal finde siden til SASS-pakken. Det viser dig, hvordan du installerer det (npm installer gulp-sass). Chancerne er, at du skal bruge sudo til at installere det som administrator, så det vil sandsynligvis være (sudo npm installer gulp-sass) .

Når du er færdig, kan du bruge den syntaks, pakken dikterer for at kompilere din kode. For at gøre dette skal du oprette en fil ved navn styles.scss med følgende indhold:

$ primær: # ff9900; krop baggrund: $ primary;

Opret nu følgende Gulp-opgave i Gulpfile.

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

Før du kører kommandoen, glem ikke at "pakke" pakken øverst på Gulpfile som denne:

var sass = kræver ('gulp-sass');

Når du kører gulp sass, alle filer med scss-udvidelsen vil blive ledet til sass-funktionen, som konverterer dem til css. Disse ledes derefter til destinationsfunktionen, som placerer dem i css-mappen.

Se filer og mapper

Indtil videre er det helt praktisk, men vi skal stadig skrive en kommando hver gang Vi ønsker at køre en opgave, som ikke er meget effektiv, især når det kommer til stylesheet ændringer. Gulp giver dig mulighed for at se filer til ændringer og køre kommandoer automatisk.

I Gulpfile opretter du en kommando med navnet automatisere som vil bruge ur-kommandoen til at se et sæt af filer til ændringer og køre en bestemt kommando, når en fil ændres.

gulp.task ('automatiser', funktion () gulp.watch ('* .scss', ['sass']););

Hvis du skriver gulp automatisere ind i terminalen, vil den starte og afslutte opgaven, men den vender ikke tilbage, fordi den overvåger ændringer. Vi har angivet, at vi vil se alle scss-filer i rodmappen, og hvis de ændres, vil vi køre den sass-kommando, som vi har oprettet tidligere.

Hvis du nu ændrer din style.scss fil, skal den kompileres til css-filen i css-mappen automatisk.

Kører flere opgaver

Der er mange situationer, hvor du måske vil køre flere opgaver. Når du ser din javascript mappe, kan du kompilere sammenkoble to filer og derefter fortsætte med at reducere dem. Der er to måder, du kan få dette gjort.

Hvis opgaver er relaterede, kan jeg lide det kæde dem. Et godt eksempel ville være sammenkædning og minificering af javascript-filer. Vi rør først vores filer til den konkat handling, og rør dem til gulp-uglify, brug derefter destinationsfunktionen til at udstille dem.

Hvis opgaver er uafhængige, kan du ring til flere opgaver. Et eksempel ville være en opgave, hvor vi ønsker at sammenkæde og reducere vores scripts og også sammensætte vores SASS. Her er han fuld Gulpfile af, hvordan det ville se ud.

var gulp = kræve ('gulp'); var uglify = kræver ('gulp-uglify'); var concat = kræver ('gulp-concat'); var sass = kræver ('gulp-sass'); gulp.task ('scripts', funktion () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', funktion () gulp.src ('/ * .scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automatiser', funktion () gulp.watch (['* .scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Hvis du skriver gulp scripts ind i terminalen vil alle javascript-filer i js-biblioteket blive sammenkædede, output til hovedmappen, derefter uglified og gemt til hovedmappen.

Hvis du skriver gulp sass, Alle dine scss-filer bliver samlet og gemt i css-mappen.

Hvis du skriver gulp (standard opgaven), din scripts opgaven vil blive kørt, efterfulgt af din stilarter opgave.

Det gulp automatisere opgaven overvåger flere mapper til ændringer i vores scss- og js-filer og udfører begge opgaver, vi har defineret, hvis der opdages en ændring.

Oversigt

Brug af Gulp er ikke svært, faktisk foretrækker mange mennesker det over Grunt på grund af sin enklere syntax. Husk de trin, der skal tages, når du opretter en ny automatisering:

Søg efter plugin
Installer plugin
Kræv plugin i din Gulpfile
Brug syntaxen i dokumentationen

De fem kommandoer, der er tilgængelige i Gulp (opgave, løbe, se, src, dest) er de eneste du behøver at vide, alle tredjepartsaddoner har stor dokumentation. Her er en liste over nogle ting, jeg bruger, som du kunne komme i gang med lige nu:

Optimering af billeder med gulp-image-optimering
Oprettelse af billede sprites med gulp-sprite
Sammenkædning af filer med gulp-concat
Minimer filer med gulp-uglify
Sletning af filer med gulp-del
Javascript linting med gulp-jslint
JSON linting med gulp-jsonlint
Autoprefix CSS med gulp-autoprefixer
Søg og erstat med gulp-frep
Minimer CSS med gulp-minify-css