Gulp – Työkalusarja tuskallisten kehitystehtävien automatisointiin

Gulp on pieni työkalupakki, joka automatisoi toistuvia tehtäviä. Näitä toistuvia tehtäviä ovat yleensä CSS-, JavaScript-tiedostojen kääntäminen tai periaatteessa kun käytät kehystä, joka käsittelee epästandardeja JavaScript-/CSS-tiedostoja, haluat käyttää automaatiotyökalua, joka nappaa kyseiset tiedostot, pakata ne yhteen ja kääntää kaiken, jotta selaimesi voi helposti ymmärtää. se.

Gulp on hyödyllinen seuraavien tehtävien automatisoinnissa:

• JS- ja CSS-tiedostojen kääntäminen
• Selainsivun päivitys, kun tallennat tiedoston
• Suorita yksikkötesti
• Koodianalyysi
• Muokattujen tiedostojen kopioiminen kohdehakemistoon

Jotta voit seurata kaikkia tiedostoja, joita tarvitset gulp-tiedoston luomiseen, automaatiotyökalun kehittämiseen tai tehtävien automatisointiin, sinun on luotava package.json-tiedosto. Tiedosto sisältää pohjimmiltaan selityksen siitä, mitä projektisi sisällä on, mitä riippuvuuksia tarvitset saadaksesi projektisi toimimaan.

Tässä opetusohjelmassa opit asentamaan Gulpin ja automatisoimaan joitain perustehtäviä projekteillesi. Aiomme käyttää npm - joka tarkoittaa solmupakettien hallintaa. Se asennetaan Node.js:n avulla, ja voit tarkistaa, oletko jo asentanut Nodejs:n ja npm:n seuraavilla tavoilla:

node --version
npm --version

Jos sinulla ei ole sitä vielä asennettuna järjestelmääsi, suosittelen, että tarkistat opetusohjelman: Asenna uusimmat Nodejs- ja NPM-versiot Linux-järjestelmiin.

Kuinka asentaa Gulp Linuxiin

gulp-cli:n asennus voidaan suorittaa komennolla npm käyttämällä seuraavaa komentoa.

npm install --global gulp-cli

Jos haluat asentaa gulp-moduulin paikallisesti (vain nykyiseen projektiin), voit käyttää alla olevia ohjeita:

Luo projektihakemisto ja navigoi siinä:

mkdir myproject
cd myproject

Käytä seuraavaksi seuraavaa komentoa projektisi alustamiseen:

npm init

Yllä olevan komennon suorittamisen jälkeen sinulta kysytään sarja kysymyksiä, jotka antavat projektille nimen, versiokuvauksen ja muut. Vahvista lopuksi kaikki antamasi tiedot:

Nyt voimme asentaa gulp-paketin projektiimme:

npm install --save-dev gulp

--save-dev-vaihtoehto käskee npm:n päivittämään package.json-tiedoston uudella devDependencies-tiedostolla.

Huomaa, että devDependencies on ratkaistava kehityksen aikana, kun taas riippuvuudet ajon aikana. Koska gulp on työkalu, joka auttaa meitä kehityksessä, se on ratkaistava kehitysvaiheessa.

Luo Gulp-tiedosto

Luodaan nyt gulpfile. Tehtävät, jotka haluamme suorittaa, löytyvät kyseisestä tiedostosta. Se latautuu automaattisesti, kun käytetään gulp-komentoa. Luo tekstieditorilla tiedosto nimeltä gulpfile.js. Tätä opetusohjelmaa varten aiomme luoda yksinkertaisen testin.

Voit lisätä seuraavan koodin gulpfile.js-tiedostoosi:

var gulp = require('gulp');

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

Tallenna tiedosto ja yritä nyt suorittaa se seuraavasti:

gulp hello

Sinun pitäisi nähdä seuraava tulos:

Tässä on mitä yllä oleva koodi tekee:

• var gulp=request('gulp'); – tuo gulp-moduulin.
• gulp.task('hello', function(done) { – määrittää tehtävän, joka on käytettävissä komentoriviltä.
• console.log('Hei maailma!'); – tulostaa vain tekstin Hei maailma! näytölle.
• done(); – käytämme tätä takaisinsoittotoimintoa ohjeistamaan, että tehtävämme on suoritettu.

Yllä oleva oli tietysti vain esimerkki siitä, kuinka gulpfile.js voidaan järjestää. Jos haluat nähdä käytettävissä olevat tehtävät tiedostosta gulpfile.js, voit käyttää seuraavaa komentoa:

gulp --tasks

Gulp Plugins

Gulp sisältää tuhansia saatavilla olevia laajennuksia, jotka kaikki tarjoavat erilaisia toimintoja. Voit tarkistaa ne Gulpin laajennussivulta.

Alla käytämme minify-html-laajennusta käytännöllisemmässä esimerkissä. Alla olevalla toiminnolla voit pienentää HTML-tiedostoja ja sijoittaa ne uuteen hakemistoon. Mutta ensin asennamme gulp-minify-html-laajennuksen:

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

Voit tehdä gulpfile.js-tiedostosta tältä:

cat gulpfile.js

Näytelähtö

// 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()
});

Sitten voit pienentää HTML-tiedostoja seuraavilla komennoilla.

gulp minify-html
du -sh /src dest/

Johtopäätös

Gulp on hyödyllinen työkalupakki, jonka avulla voit parantaa tuottavuuttasi. Jos olet kiinnostunut tästä työkalusta, suosittelen, että tarkistat sen dokumentaatiosivun, joka on saatavilla täältä.