Gulp - Ösüşdäki agyryly meseleleri awtomatlaşdyrmak üçin gural

Gulp, gaýtalanýan meseleleri awtomatlaşdyrýan kiçijik gurallar toplumy. Şol gaýtalanýan meseleler, adatça, CSS, JavaScript faýllaryny düzýär ýa-da standart däl JavaScript/CSS faýllary bilen iş salyşýan çarçuwany ulananyňyzda, şol faýllary ele alýan, birleşdirýän we brauzeriňiziň aňsat düşünmegi üçin hemme zady düzýän awtomatlaşdyryş guralyny ulanjak bolarsyňyz. Bu.

Gulp aşakdaky meseleleri awtomatlaşdyrmak üçin peýdalydyr:

• JS we CSS faýllaryny düzmek
• Faýl ýazdyranyňyzda brauzer sahypasyny täzelemek
• Bölüm synagyny işlediň
• Kod derňewi
• Üýtgedilen faýllary maksatly kataloga göçürmek

Bir faýl döretmek, awtomatlaşdyryş guralyny ösdürmek ýa-da meseleleri awtomatlaşdyrmak üçin zerur bolan ähli faýllary yzarlamak üçin package.json faýly döretmeli. Faýl, esasan, taslamaňyzyň içindäki zatlary, taslamaňyzyň işlemegi üçin nämä baglydygyny düşündirýär.

Bu gollanmada, “Gulp” -y nädip gurmalydygyny we taslamalaryňyz üçin käbir esasy meseleleri nädip awtomatlaşdyrmalydygyny öwrenersiňiz. Düw paket dolandyryjysyny aňladýan npm ulanarys. Node.js bilen guruldy we Nodejs we npm bilen eýýäm gurnandygyňyzy barlap bilersiňiz:

# node --version
# npm --version

Eger ulgamyňyzda eýýäm gurulmadyk bolsa, gollanmany barlamagy maslahat berýärin: Linux ulgamlaryna iň soňky Nodejs we NPM wersiýasyny guruň.

Linux-da Gulp-y nädip gurmaly

“Gulp-müşderi” gurnamak, aşakdaky buýrugy ulanyp, npm bilen tamamlanyp bilner.

# npm install --global gulp-cli

Gulp modulyny ýerli gurmak isleseňiz (diňe häzirki taslama üçin), aşakdaky görkezmeleri ulanyp bilersiňiz:

Taslama katalogyny dörediň we oňa geçiň:

# mkdir myproject
# cd myproject

Ondan soň, taslamaňyzy başlamak üçin aşakdaky buýrugy ulanyň:

# npm init

Aboveokardaky buýrugy ýerine ýetireniňizden soň, taslamaňyza at, wersiýa beýany we başgalary bermek üçin size birnäçe sorag berler. Ahyrynda beren maglumatlaryňyzy tassyklaň:

Indi taslamamyzda gulp paketini gurup bileris:

# npm install --save-dev gulp

--save-dev opsiýasy npm-a täze devDependencies bilen package.json faýlyny täzelemegi aýdýar.

DevDependency-leriň ösüş döwründe çözülmelidigine üns beriň, iş wagtynda baglylyklar. Gulp ösüşde bize kömek edýän gural bolansoň, ösüş döwründe çözülmeli.

Indi bir gulpile döredeliň. Işlemek isleýän meselelerimiz şol faýlda tapylar. Gulp buýrugy ulanylanda awtomatiki usulda ýüklenýär. Tekst redaktoryny ulanyp, gulpfile.js atly bir faýl dörediň. Bu gollanmanyň maksady üçin, ýönekeý synag dörederis.

Aşakdaky kody gulpfile.js-a girizip bilersiňiz:

var gulp = require('gulp');

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

Faýly ýazdyryň we indi ony işletmäge synanyşyň:

# gulp hello

Aşakdaky netijäni görmeli:

Ine, ýokardaky kod näme edýär:

• var gulp=zerur (gulp); - gulp modulyny import edýär.
• gulp.task ('salam', funksiýa (ýerine ýetirildi) {- buýruk setirinden elýeterli meseläni kesgitleýär.
• console.log ('Salam dünýä!'); - ýönekeý çap edýär\Hoş dünýä! ekrana.
• ýerine ýetirildi(); - bu çagyryş funksiýamyzy wezipelerimiziň gutarandygyny görkezmek üçin ulanýarys.

Elbetde ýokardakylar, gulpfile.js-yň nädip tertiplenip boljakdygyny görkezmek üçin diňe bir mysaldy. Gulpfile.js-dan bar bolan meseleleri görmek isleseňiz, aşakdaky buýrugy ulanyp bilersiňiz:

# gulp --tasks

Gulp-da müňlerçe plugin bar, hemmesi dürli işlemegi üpjün edýär. Olary Gulpyň plugin sahypasynda barlap bilersiňiz.

Aşakda has amaly mysalda minify-html pluginini ulanarys. Aşakdaky funksiýa bilen HTML faýllaryny kiçeldip, täze kataloga ýerleşdirip bilersiňiz. Firstöne ilki bilen gulp-minify-html pluginini gurarys:

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

“Gulpfile.js” -iňizi şeýle edip bilersiňiz:

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

Soňra aşakdaky buýruklary ulanyp HTML faýllaryny kiçeldip bilersiňiz.

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

Gulp öndürijiligiňizi ýokarlandyrmaga kömek edip biljek peýdaly gurallar toplumydyr. Bu gural bilen gyzyklanýan bolsaňyz, şu ýerde bar bolan resminamalar sahypasyny barlamagy maslahat berýärin.