Gulp - Kayan aiki don sarrafa ayyuka masu radadi a cikin haɓakawa


Gulp ƙaramin kayan aiki ne wanda ke sarrafa ayyuka masu maimaitawa. Waɗannan ayyuka masu maimaitawa yawanci suna tattara fayilolin CSS, fayilolin JavaScript ko kuma a zahiri lokacin da kuke amfani da tsarin da ke hulɗa da fayilolin JavaScript/CSS marasa inganci za ku so ku yi amfani da kayan aikin sarrafa kansa wanda ke ɗaukar waɗannan fayilolin, haɗa su tare kuma tattara duk abin da mai binciken ku zai iya fahimta cikin sauƙi. shi.

Gulp yana da amfani don sarrafa ayyuka masu zuwa:

  • Haɗa fayilolin JS da CSS
  • Shafin mai wartsakewa lokacin da kake ajiye fayil
  • Ku gudanar da gwajin naúrar
  • Lambobin bincike
  • Kwafi fayilolin da aka gyara zuwa wurin da aka yi niyya

Don kiyaye duk fayilolin da kuke buƙatar ƙirƙirar fayil ɗin gulp, haɓaka kayan aikin ku na sarrafa kansa ko sarrafa ayyuka, kuna buƙatar ƙirƙirar fayil ɗin package.json. Fayil ɗin yana ƙunshe da bayanin abin da ke cikin aikin ku, menene dogaro da kuke buƙata don sa aikinku yayi aiki.

A cikin wannan koyawa, za ku koyi yadda ake shigar da Gulp da yadda ake sarrafa wasu mahimman ayyuka don ayyukanku. Za mu yi amfani da npm - wanda ke tsaye ga mai sarrafa fakitin node. An shigar dashi tare da Node.js, kuma zaku iya bincika idan kun riga kun shigar da Nodejs da npm tare da:

# node --version
# npm --version

Idan ba ku riga an shigar da shi akan tsarin ku ba, Ina ba ku shawarar duba koyawa: Sanya Sabbin Nodejs da NPM Version a cikin Linux Systems.

Yadda ake Sanya Gulp a cikin Linux

Ana iya kammala shigar da gulp-cli tare da npm ta amfani da umarni mai zuwa.

# npm install --global gulp-cli

Idan kuna son shigar da tsarin gulp a gida (don aikin yanzu kawai), zaku iya amfani da umarnin da ke ƙasa:

Ƙirƙiri kundin tsarin aiki kuma kewaya cikinsa:

# mkdir myproject
# cd myproject

Na gaba, yi amfani da umarni mai zuwa don fara aikinku:

# npm init

Bayan gudanar da umarnin da ke sama, za a yi muku jerin tambayoyi don ba aikinku suna, bayanin sigar da sauransu. A ƙarshe tabbatar da duk bayanan da kuka bayar:

Yanzu za mu iya shigar da kunshin gulp a cikin aikinmu tare da:

# npm install --save-dev gulp

Zaɓin --save-dev yana gaya wa npm don sabunta fayil ɗin kunshin.json tare da sabbin abubuwan dogaro.

Lura cewa ana buƙatar warware abubuwan dogaro yayin haɓakawa, yayin da Dogara yayin lokacin gudu. Tunda gulp kayan aiki ne wanda ke taimaka mana a cikin ci gaba, yana buƙatar warware shi a lokacin haɓakawa.

Yanzu bari mu haifar da gulpfile. Za a sami ayyukan da muke son gudanarwa a cikin wannan fayil ɗin. Ana loda shi ta atomatik lokacin amfani da umarnin gulp. Amfani da editan rubutu, ƙirƙirar fayil mai suna gulpfile.js. Don manufar wannan koyawa, za mu ƙirƙiri gwaji mai sauƙi.

Kuna iya saka lambar mai zuwa a cikin gulpfile.js:

var gulp = require('gulp');

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

Ajiye fayil ɗin kuma yanzu gwada gudanar da shi da:

# gulp hello

Ya kamata ku ga sakamako mai zuwa:

Ga abin da lambar da ke sama ke yi:

  • var gulp = buƙata ('gulp'); – shigo da gulp module.
  • gulp.task ('hello', aiki(an yi) {- yana bayyana aikin da zai kasance daga layin umarni.
  • console.log ('Hello duniya!'); – kawai buga \Hellow duniya! zuwa ga allo.
  • aikin(); - muna amfani da wannan aikin dawo da kira don ba da umarni cewa ayyukanmu sun ƙare.

Tabbas abin da ke sama misali ne kawai don nuna yadda za a iya tsara gulpfile.js. Idan kuna son ganin ayyukan da ake da su daga gulpfile.js, kuna iya amfani da umarni mai zuwa:

# gulp --tasks

Gulp yana da dubban plugins samuwa, duk suna ba da ayyuka daban-daban. Kuna iya duba su a shafin plugin na Gulp.

A ƙasa za mu yi amfani da kayan aikin minify-html a cikin mafi kyawun misali. Tare da aikin da ke ƙasa, zaku iya rage fayilolin HTML kuma sanya su cikin sabon kundin adireshi. Amma da farko, za mu shigar da gulp-minify-html plugin:

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

Kuna iya sanya gulpfile.js ɗinku yayi kama da wannan:

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

Sannan zaku iya rage fayilolin HTML ta amfani da bin umarni.

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

Gulp kayan aiki ne mai fa'ida wanda zai iya taimaka muku haɓaka aikin ku. Idan kuna sha'awar wannan kayan aikin Ina ba da shawarar ku duba shafin takaddun sa, wanda akwai a nan.