Gulp - Zana ya Kuendesha Majukumu Maumivu Kiotomatiki katika Ukuzaji

Gulp ni zana ndogo ya zana ambayo huendesha kazi zinazojirudia. Kazi hizo zinazojirudia kwa kawaida ni kuandaa faili za CSS, JavaScript au kimsingi unapotumia mfumo unaoshughulikia faili zisizo za kawaida za JavaScript/CSS utataka kutumia zana ya kiotomatiki inayonyakua faili hizo, kuzifunga pamoja na kukusanya kila kitu ili kivinjari chako kiweze kuelewa kwa urahisi. hiyo.

Gulp ni muhimu kwa otomatiki kazi zifuatazo:

• Kukusanya faili za JS na CSS
• Inaonyesha upya ukurasa wa kivinjari unapohifadhi faili
• Fanya jaribio la kitengo
• Uchambuzi wa kanuni
• Kunakili faili zilizobadilishwa kwenye saraka lengwa

Ili kufuatilia faili zote ambazo unahitaji kuunda faili ya gulp, tengeneza zana yako ya otomatiki au ufanye kazi otomatiki, unahitaji kutengeneza faili ya package.json. Faili kimsingi ina maelezo ya kile kilicho ndani ya mradi wako, ni utegemezi gani unahitaji ili kufanya mradi wako ufanye kazi.

Katika somo hili, utajifunza jinsi ya kusakinisha Gulp na jinsi ya kuweka kiotomatiki baadhi ya kazi za kimsingi za miradi yako. Tutatumia npm - ambayo inasimama kwa meneja wa kifurushi cha nodi. Imesakinishwa na Node.js, na unaweza kuangalia ikiwa tayari umesakinisha Nodejs na npm na:

# node --version
# npm --version

Ikiwa huna tayari imewekwa kwenye mfumo wako, ninapendekeza uangalie mafunzo: Sakinisha Nodejs za Hivi Punde na Toleo la NPM katika Mifumo ya Linux.

Jinsi ya kufunga Gulp kwenye Linux

Ufungaji wa gulp-cli unaweza kukamilika na npm kwa kutumia amri ifuatayo.

# npm install --global gulp-cli

Ikiwa unataka kusakinisha moduli ya gulp ndani ya nchi (kwa mradi wa sasa pekee), unaweza kutumia maagizo hapa chini:

Unda saraka ya mradi na uende ndani yake:

# mkdir myproject
# cd myproject

Ifuatayo, tumia amri ifuatayo kuanzisha mradi wako:

# npm init

Baada ya kutekeleza amri iliyo hapo juu, utaulizwa mfululizo wa maswali ili kuupa mradi wako jina, maelezo ya toleo na mengine. Hatimaye thibitisha taarifa zote ulizotoa:

Sasa tunaweza kusakinisha kifurushi cha gulp katika mradi wetu na:

# npm install --save-dev gulp

Chaguo la --save-dev huambia npm kusasisha faili ya package.json kwa kutumia DevDependencies mpya.

Kumbuka kuwa DevDependencies zinahitaji kutatuliwa wakati wa usanidi, wakati Dependencies wakati wa kukimbia. Kwa kuwa gulp ni chombo kinachotusaidia katika maendeleo, inahitaji kutatuliwa wakati wa maendeleo.

Sasa hebu tuunde faili ya gulpfile. Majukumu ambayo tunataka kutekeleza yatapatikana kwenye faili hiyo. Inapakiwa kiatomati wakati wa kutumia amri ya gulp. Kwa kutumia kihariri cha maandishi, tengeneza faili inayoitwa gulpfile.js. Kwa madhumuni ya somo hili, tutaunda jaribio rahisi.

Unaweza kuingiza nambari ifuatayo kwenye gulpfile.js yako:

var gulp = require('gulp');

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

Hifadhi faili na sasa jaribu kuiendesha na:

# gulp hello

Unapaswa kuona matokeo yafuatayo:

Hivi ndivyo nambari iliyo hapo juu hufanya:

• var gulp = need(‘gulp’); – huagiza moduli ya gulp.
• gulp.task('hello', function(imefanywa) { - inafafanua kazi ambayo itapatikana kutoka kwa safu ya amri.
• console.log(‘Hujambo ulimwengu!’); - huchapisha tu \Hellow world! kwa skrini.
• imefanywa(); – tunatumia kipengele hiki cha kurudisha nyuma kuelekeza kuwa kazi yetu imekamilika.

Bila shaka hapo juu ilikuwa ni sampuli tu ya kuonyesha jinsi gulpfile.js inaweza kupangwa. Ikiwa unataka kuona kazi zinazopatikana kutoka kwa gulpfile.js yako, unaweza kutumia amri ifuatayo:

# gulp --tasks

Gulp ina maelfu ya programu-jalizi zinazopatikana, zote zinatoa utendaji tofauti. Unaweza kuziangalia kwenye ukurasa wa programu-jalizi wa Gulp.

Hapo chini tutatumia programu-jalizi ya minify-html katika mfano wa vitendo zaidi. Ukiwa na chaguo za kukokotoa hapa chini, unaweza kupunguza faili za HTML na kuziweka kwenye saraka mpya. Lakini kwanza, tutasakinisha programu-jalizi ya gulp-minify-html:

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

Unaweza kufanya gulpfile.js yako ionekane kama hii:

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

Kisha unaweza kupunguza faili za HTML kwa kutumia amri zifuatazo.

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

Gulp ni zana muhimu ambayo inaweza kukusaidia kuboresha tija yako. Ikiwa una nia ya chombo hiki ninapendekeza sana uangalie ukurasa wake wa nyaraka, unaopatikana hapa.