„Gulp“ – įrankių rinkinys, skirtas skausmingoms kūrimo užduotims automatizuoti

Gulp yra nedidelis įrankių rinkinys, automatizuojantis pasikartojančias užduotis. Tos pasikartojančios užduotys dažniausiai yra CSS, JavaScript failų kompiliavimas arba iš esmės, kai naudojate sistemą, susijusią su nestandartiniais JavaScript/CSS failais, norėsite naudoti automatizavimo įrankį, kuris paima tuos failus, supakuoja juos ir sukompiliuoja viską, kad jūsų naršyklė galėtų lengvai suprasti. tai.

Gulp naudinga automatizuojant šias užduotis:

• JS ir CSS failų kompiliavimas
• Naršyklės puslapis atnaujinamas, kai įrašote failą
• Atlikite vieneto testą
• Kodo analizė
• Modifikuotų failų kopijavimas į tikslinį katalogą

Jei norite sekti visus failus, kurių reikia norint sukurti gulp failą, kurti automatizavimo įrankį arba automatizuoti užduotis, turite sugeneruoti failą package.json. Faile iš esmės yra paaiškinimas, kas yra jūsų projekte, kokių priklausomybių jums reikia, kad jūsų projektas veiktų.

Šioje pamokoje sužinosite, kaip įdiegti „Gulp“ ir kaip automatizuoti kai kurias pagrindines projekto užduotis. Mes ketiname naudoti npm – tai reiškia mazgo paketų tvarkyklę. Jis įdiegtas naudojant Node.js ir galite patikrinti, ar jau įdiegėte Nodejs ir npm naudodami:

node --version
npm --version

Jei dar nesate jo įdiegę savo sistemoje, rekomenduoju peržiūrėti pamoką: Įdiekite naujausią Nodejs ir NPM versiją Linux sistemose.

Kaip įdiegti „Gulp“ sistemoje „Linux“.

Įdiegti gulp-cli galima naudojant npm, naudojant šią komandą.

npm install --global gulp-cli

Jei norite įdiegti gulp modulį vietoje (tik dabartiniam projektui), galite vadovautis toliau pateiktomis instrukcijomis:

Sukurkite projekto katalogą ir naršykite jame:

mkdir myproject
cd myproject

Tada naudokite šią komandą projektui inicijuoti:

npm init

Paleidę aukščiau pateiktą komandą, jums bus užduota keletas klausimų, kad suteiktumėte savo projektui pavadinimą, versijos aprašymą ir kitus. Galiausiai patvirtinkite visą pateiktą informaciją:

Dabar savo projekte galime įdiegti gulp paketą su:

npm install --save-dev gulp

Parinktis --save-dev nurodo npm atnaujinti failą package.json į naują devDependencies.

Atminkite, kad dependencies reikia išspręsti kūrimo metu, o priklausomybes vykdymo metu. Kadangi gulp yra įrankis, padedantis mums tobulėti, jį reikia išspręsti kūrimo metu.

Sukurkite Gulp failą

Dabar sukurkime gulpfile. Tame faile bus rastos užduotys, kurias norime vykdyti. Jis automatiškai įkeliamas naudojant komandą gulp. Naudodami teksto rengyklę sukurkite failą pavadinimu gulpfile.js. Šios pamokos tikslais mes sukursime paprastą testą.

Į savo gulpfile.js galite įterpti šį kodą:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Išsaugokite failą ir pabandykite jį paleisti naudodami:

gulp hello

Turėtumėte pamatyti tokį rezultatą:

Štai ką daro aukščiau pateiktas kodas:

• var gulp=request(‘gulp’); – importuojamas gulp modulis.
• gulp.task('labas', function(done) { – apibrėžia užduotį, kuri bus pasiekiama komandinėje eilutėje.
• console.log('Sveikas, pasauli!'); – tiesiog išspausdina „Hello world!“ ekrane.
• atlikta(); – naudojame šią atgalinio skambinimo funkciją, norėdami nurodyti, kad užduotys baigtos.

Žinoma, tai buvo tik pavyzdys, rodantis, kaip galima tvarkyti gulpfile.js. Jei norite matyti galimas užduotis iš gulpfile.js, galite naudoti šią komandą:

gulp --tasks

„Gulp“ papildiniai

Programoje Gulp yra tūkstančiai galimų papildinių, visi teikia skirtingas funkcijas. Galite juos patikrinti „Gulp“ papildinio puslapyje.

Toliau praktiškesniame pavyzdyje naudosime papildinį minify-html. Naudodami toliau pateiktą funkciją galite sumažinti HTML failus ir įdėti juos į naują katalogą. Bet pirmiausia įdiegsime gulp-minify-html papildinį:

npm install --save-dev gulp-minify-html

Savo gulpfile.js galite padaryti taip:

cat gulpfile.js

Pavyzdžio išvestis

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Tada galite sumažinti HTML failus naudodami šias komandas.

gulp minify-html
du -sh /src dest/

Išvada

Gulp yra naudingas įrankių rinkinys, galintis padėti padidinti produktyvumą. Jei jus domina šis įrankis, primygtinai rekomenduoju peržiūrėti jo dokumentacijos puslapį, kurį rasite čia.