Gulp - rīkkopa sāpīgu uzdevumu automatizēšanai izstrādē

Gulp ir neliels rīku komplekts, kas automatizē atkārtotus uzdevumus. Šie atkārtotie uzdevumi parasti ir CSS, JavaScript failu sastādīšana vai galvenokārt tad, ja izmantojat sistēmu, kas nodarbojas ar nestandarta JavaScript/CSS failiem, jūs vēlaties izmantot automatizācijas rīku, kas satver šos failus, iesaiņo tos kopā un apkopo visu, lai pārlūkprogramma varētu viegli saprast to.

Gulp ir noderīgs, lai automatizētu šādus uzdevumus:

• JS un CSS failu apkopošana
• Pārlūkprogrammas lapas atsvaidzināšana, saglabājot failu
• Izpildiet vienības pārbaudi
• koda analīze
• Modificētu failu kopēšana mērķa direktorijā

Lai izsekotu visiem failiem, kas nepieciešami, lai izveidotu gulp failu, izstrādātu automatizācijas rīku vai automatizētu uzdevumus, jums ir jāveido fails package.json. Fails pamatā satur paskaidrojumu par to, kas atrodas jūsu projektā, kādas atkarības jums ir nepieciešamas, lai jūsu projekts darbotos.

Šajā apmācībā jūs uzzināsiet, kā instalēt Gulp un kā automatizēt dažus pamatuzdevumus saviem projektiem. Mēs izmantosim npm - tas nozīmē mezglu pakotņu pārvaldnieku. Tas ir instalēts ar Node.js, un jūs varat pārbaudīt, vai esat jau instalējis Nodejs un npm ar:

# node --version
# npm --version

Ja tas vēl nav instalēts jūsu sistēmā, iesaku pārbaudīt apmācību: Instalējiet jaunāko Nodejs un NPM versiju Linux sistēmās.

Kā instalēt Gulp Linux

Gulp-cli instalēšanu var pabeigt ar npm, izmantojot šādu komandu.

# npm install --global gulp-cli

Ja vēlaties lokāli instalēt gulp moduli (tikai pašreizējam projektam), varat izmantot tālāk sniegtos norādījumus:

Izveidojiet projekta direktoriju un pārvietojieties tajā:

# mkdir myproject
# cd myproject

Pēc tam izmantojiet šo komandu, lai inicializētu projektu:

# npm init

Pēc iepriekš minētās komandas izpildīšanas jums tiks uzdota virkne jautājumu, lai jūsu projektam piešķirtu nosaukumu, versijas aprakstu un citus. Visbeidzot apstipriniet visu jūsu sniegto informāciju:

Tagad mēs varam instalēt gulp paketi savā projektā ar:

# npm install --save-dev gulp

Opcija --save-dev norāda, ka npm jāatjaunina fails package.json ar jaunajām devDependencies.

Ņemiet vērā, ka devDependencies jāatrisina izstrādes laikā, savukārt Dependencies - izpildes laikā. Tā kā malks ir rīks, kas mums palīdz attīstībā, tas ir jāatrisina izstrādes laikā.

Tagad izveidosim gulpfile. Uzdevumi, kurus mēs vēlamies izpildīt, tiks atrasti šajā failā. Tas tiek automātiski ielādēts, izmantojot komandu gulp. Izmantojot teksta redaktoru, izveidojiet failu ar nosaukumu gulpfile.js. Šīs apmācības vajadzībām mēs izveidosim vienkāršu testu.

Savā gulpfile.js varat ievietot šādu kodu:

var gulp = require('gulp');

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

Saglabājiet failu un mēģiniet to palaist ar:

# gulp hello

Jums vajadzētu redzēt šādu rezultātu:

Lūk, ko dara iepriekš minētais kods:

• var gulp = pieprasīt (‘gulp’); - importē gulp moduli.
• gulp.task (‘labdien’, funkcija (izdarīts) {- nosaka uzdevumu, kas būs pieejams komandrindā.
• console.log (‘Sveika pasaule!’); - vienkārši izdrukā “Hellow world!” uz ekrāna.
• izdarīts(); - mēs izmantojam šo atzvanīšanas funkciju, lai norādītu, ka mūsu uzdevumi ir pabeigti.

Protams, iepriekš minētais bija tikai paraugs, lai parādītu, kā var organizēt gulpfile.js. Ja vēlaties redzēt pieejamos uzdevumus no sava gulpfile.js, varat izmantot šādu komandu:

# gulp --tasks

Gulp ir pieejami tūkstošiem spraudņu, kas visi nodrošina atšķirīgu funkcionalitāti. Tos varat pārbaudīt Gulp spraudņu lapā.

Zemāk mēs izmantosim minify-html spraudni praktiskākā piemērā. Izmantojot zemāk esošo funkciju, jūs varat samazināt HTML failus un ievietot tos jaunā direktorijā. Bet vispirms mēs instalēsim spraudni gulp-minify-html:

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

Jūs varat padarīt savu gulpfile.js izskatīties šādi:

# cat gulpfile.js

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

Tad jūs varat samazināt HTML failus, izmantojot šādas komandas.

# gulp minify-html
# du -sh /src dest/

Gulp ir noderīgs rīku komplekts, kas var palīdzēt uzlabot jūsu produktivitāti. Ja jūs interesē šis rīks, es ļoti iesaku pārbaudīt tā dokumentācijas lapu, kas pieejama šeit.