ഗൾപ്പ് - വികസനത്തിൽ വേദനാജനകമായ ജോലികൾ ഓട്ടോമേറ്റ് ചെയ്യുന്നതിനുള്ള ഒരു ടൂൾകിറ്റ്

ആവർത്തിച്ചുള്ള ജോലികൾ ഓട്ടോമേറ്റ് ചെയ്യുന്ന ഒരു ചെറിയ ടൂൾകിറ്റാണ് ഗൾപ്പ്. ആ ആവർത്തിച്ചുള്ള ജോലികൾ സാധാരണയായി CSS, JavaScript ഫയലുകൾ കംപൈൽ ചെയ്യുകയോ അടിസ്ഥാനപരമായി നിങ്ങൾ നിലവാരമില്ലാത്ത JavaScript/CSS ഫയലുകൾ കൈകാര്യം ചെയ്യുന്ന ഒരു ചട്ടക്കൂട് ഉപയോഗിക്കുമ്പോൾ ആ ഫയലുകൾ പിടിച്ചെടുക്കുകയും അവ ഒരുമിച്ച് പാക്കേജ് ചെയ്യുകയും എല്ലാം കംപൈൽ ചെയ്യുകയും ചെയ്യുന്ന ഒരു ഓട്ടോമേഷൻ ടൂൾ ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. അത്.

ഇനിപ്പറയുന്ന ജോലികൾ ഓട്ടോമേറ്റ് ചെയ്യുന്നതിന് Gulp ഉപയോഗപ്രദമാണ്:

• JS, CSS ഫയലുകൾ കംപൈൽ ചെയ്യുന്നു
• നിങ്ങൾ ഒരു ഫയൽ സംരക്ഷിക്കുമ്പോൾ ബ്രൗസർ പേജ് പുതുക്കുന്നു
• ഒരു യൂണിറ്റ് ടെസ്റ്റ് പ്രവർത്തിപ്പിക്കുക
• കോഡ് വിശകലനം
• ഒരു ടാർഗെറ്റ് ഡയറക്uടറിയിലേക്ക് പരിഷ്uക്കരിച്ച ഫയലുകൾ പകർത്തുന്നു

നിങ്ങൾക്ക് ഒരു ഗൾപ്പ് ഫയൽ സൃഷ്uടിക്കാനോ നിങ്ങളുടെ ഓട്ടോമേഷൻ ടൂൾ വികസിപ്പിക്കാനോ ടാസ്uക്കുകൾ ഓട്ടോമേറ്റ് ചെയ്യാനോ ആവശ്യമായ എല്ലാ ഫയലുകളുടെയും ട്രാക്ക് സൂക്ഷിക്കാൻ, നിങ്ങൾ ഒരു package.json ഫയൽ സൃഷ്uടിക്കേണ്ടതുണ്ട്. ഫയലിൽ അടിസ്ഥാനപരമായി നിങ്ങളുടെ പ്രോജക്uറ്റിനുള്ളിൽ എന്താണ് ഉള്ളത്, നിങ്ങളുടെ പ്രോജക്uറ്റ് വർക്ക് ചെയ്യുന്നതിന് എന്ത് ഡിപൻഡൻസികൾ ആവശ്യമാണ് എന്നതിന്റെ വിശദീകരണം അടങ്ങിയിരിക്കുന്നു.

ഈ ട്യൂട്ടോറിയലിൽ, ഗൾപ്പ് എങ്ങനെ ഇൻസ്റ്റാൾ ചെയ്യാമെന്നും നിങ്ങളുടെ പ്രോജക്റ്റുകൾക്കായി ചില അടിസ്ഥാന ജോലികൾ എങ്ങനെ ഓട്ടോമേറ്റ് ചെയ്യാമെന്നും നിങ്ങൾ പഠിക്കാൻ പോകുന്നു. ഞങ്ങൾ npm ഉപയോഗിക്കാൻ പോകുന്നു - നോഡ് പാക്കേജ് മാനേജർ എന്നതിന്റെ അർത്ഥം. ഇത് Node.js ഉപയോഗിച്ചാണ് ഇൻസ്റ്റാൾ ചെയ്തിരിക്കുന്നത്, കൂടാതെ നിങ്ങൾ ഇതിനകം തന്നെ Nodejs ഉം npm ഉം ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടോയെന്ന് പരിശോധിക്കാം:

# node --version
# npm --version

നിങ്ങളുടെ സിസ്റ്റത്തിൽ ഇത് ഇതിനകം ഇൻസ്റ്റാൾ ചെയ്തിട്ടില്ലെങ്കിൽ, ട്യൂട്ടോറിയൽ പരിശോധിക്കാൻ ഞാൻ നിങ്ങളോട് ശുപാർശ ചെയ്യുന്നു: Linux സിസ്റ്റങ്ങളിൽ ഏറ്റവും പുതിയ Nodejs, NPM പതിപ്പ് എന്നിവ ഇൻസ്റ്റാൾ ചെയ്യുക.

ലിനക്സിൽ ഗൾപ്പ് എങ്ങനെ ഇൻസ്റ്റാൾ ചെയ്യാം

താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിച്ച് npm ഉപയോഗിച്ച് gulp-cli ഇൻസ്റ്റലേഷൻ പൂർത്തിയാക്കാവുന്നതാണ്.

# npm install --global gulp-cli

നിങ്ങൾക്ക് ഗൾപ്പ് മൊഡ്യൂൾ പ്രാദേശികമായി ഇൻസ്റ്റാൾ ചെയ്യണമെങ്കിൽ (നിലവിലെ പ്രോജക്റ്റിന് മാത്രം), നിങ്ങൾക്ക് ചുവടെയുള്ള നിർദ്ദേശങ്ങൾ ഉപയോഗിക്കാം:

ഒരു പ്രോജക്റ്റ് ഡയറക്ടറി സൃഷ്ടിച്ച് അതിൽ നാവിഗേറ്റ് ചെയ്യുക:

# mkdir myproject
# cd myproject

അടുത്തതായി, നിങ്ങളുടെ പ്രോജക്റ്റ് ആരംഭിക്കുന്നതിന് ഇനിപ്പറയുന്ന കമാൻഡ് ഉപയോഗിക്കുക:

# npm init

മുകളിലുള്ള കമാൻഡ് പ്രവർത്തിപ്പിച്ചതിന് ശേഷം, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ പേരും പതിപ്പ് വിവരണവും മറ്റുള്ളവയും നൽകുന്നതിന് നിങ്ങളോട് ഒരു കൂട്ടം ചോദ്യങ്ങൾ ചോദിക്കും. അവസാനം നിങ്ങൾ നൽകിയ എല്ലാ വിവരങ്ങളും സ്ഥിരീകരിക്കുക:

ഇപ്പോൾ നമുക്ക് ഞങ്ങളുടെ പ്രോജക്റ്റിൽ ഗൾപ്പ് പാക്കേജ് ഇൻസ്റ്റാൾ ചെയ്യാം:

# npm install --save-dev gulp

--save-dev ഓപ്ഷൻ npm-നോട് പാക്കേജ്.json ഫയൽ പുതിയ devDependencies ഉപയോഗിച്ച് അപ്ഡേറ്റ് ചെയ്യാൻ പറയുന്നു.

ഡെവലപ്uമെന്റ് സമയത്ത് ഡിപൻഡൻസികൾ പരിഹരിക്കേണ്ടതുണ്ടെന്ന കാര്യം ശ്രദ്ധിക്കുക, അതേസമയം റൺ ടൈമിൽ ഡിപൻഡൻസികൾ. ഗൾപ്പ് വികസനത്തിൽ നമ്മെ സഹായിക്കുന്ന ഒരു ഉപകരണമായതിനാൽ, വികസന സമയത്ത് അത് പരിഹരിക്കേണ്ടതുണ്ട്.

ഇനി നമുക്ക് ഒരു ഗൾപ്പ് ഫയൽ ഉണ്ടാക്കാം. നമ്മൾ പ്രവർത്തിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ടാസ്ക്കുകൾ ആ ഫയലിൽ കാണും. gulp കമാൻഡ് ഉപയോഗിക്കുമ്പോൾ അത് സ്വയമേവ ലോഡ് ചെയ്യപ്പെടും. ഒരു ടെക്സ്റ്റ് എഡിറ്റർ ഉപയോഗിച്ച്, gulpfile.js എന്ന പേരിൽ ഒരു ഫയൽ സൃഷ്ടിക്കുക. ഈ ട്യൂട്ടോറിയലിന്റെ ഉദ്ദേശ്യത്തിനായി, ഞങ്ങൾ ഒരു ലളിതമായ ടെസ്റ്റ് സൃഷ്ടിക്കാൻ പോകുന്നു.

നിങ്ങളുടെ gulpfile.js-ലേക്ക് ഇനിപ്പറയുന്ന കോഡ് ചേർക്കാം:

var gulp = require('gulp');

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

ഫയൽ സംരക്ഷിച്ച് ഇപ്പോൾ ഇത് ഉപയോഗിച്ച് പ്രവർത്തിപ്പിക്കാൻ ശ്രമിക്കുക:

# gulp hello

ഇനിപ്പറയുന്ന ഫലം നിങ്ങൾ കാണണം:

മുകളിലുള്ള കോഡ് ചെയ്യുന്നത് ഇതാ:

• var gulp = ആവശ്യം(‘gulp’); – gulp മൊഡ്യൂൾ ഇറക്കുമതി ചെയ്യുന്നു.
• gulp.task(‘ഹലോ’, ഫംഗ്uഷൻ(പൂർത്തിയായി) { – കമാൻഡ് ലൈനിൽ നിന്ന് ലഭ്യമാകുന്ന ഒരു ടാസ്uക് നിർവ്വചിക്കുന്നു.
• console.log(‘ഹലോ വേൾഡ്!’); - ഹെല്ലോ വേൾഡ്! എന്ന് പ്രിന്റ് ചെയ്യുന്നു. സ്ക്രീനിലേക്ക്.
• ചെയ്തു(); – ഞങ്ങളുടെ ടാസ്uക്കുകൾ പൂർത്തിയായി എന്ന് ഗൾപ്പ് നിർദ്ദേശിക്കാൻ ഞങ്ങൾ ഈ കോൾബാക്ക് ഫംഗ്uഷൻ ഉപയോഗിക്കുന്നു.

തീർച്ചയായും gulpfile.js എങ്ങനെ സംഘടിപ്പിക്കാമെന്ന് കാണിക്കുന്നതിനുള്ള ഒരു സാമ്പിൾ മാത്രമായിരുന്നു മുകളിൽ പറഞ്ഞത്. നിങ്ങളുടെ gulpfile.js-ൽ നിന്ന് ലഭ്യമായ ടാസ്uക്കുകൾ കാണണമെങ്കിൽ, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന കമാൻഡ് ഉപയോഗിക്കാം:

# gulp --tasks

ഗൾപ്പിന് ആയിരക്കണക്കിന് പ്ലഗിനുകൾ ലഭ്യമാണ്, എല്ലാം വ്യത്യസ്തമായ പ്രവർത്തനക്ഷമത നൽകുന്നു. നിങ്ങൾക്ക് അവ ഗൾപ്പിന്റെ പ്ലഗിൻ പേജിൽ പരിശോധിക്കാം.

താഴെ ഞങ്ങൾ കൂടുതൽ പ്രായോഗിക ഉദാഹരണത്തിൽ minify-html പ്ലഗിൻ ഉപയോഗിക്കും. ചുവടെയുള്ള ഫംഗ്uഷൻ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് HTML ഫയലുകൾ ചെറുതാക്കി പുതിയ ഡയറക്uടറിയിൽ സ്ഥാപിക്കാം. എന്നാൽ ആദ്യം, ഞങ്ങൾ gulp-minify-html പ്ലഗിൻ ഇൻസ്റ്റാൾ ചെയ്യും:

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

നിങ്ങൾക്ക് നിങ്ങളുടെ gulpfile.js ഇതുപോലെയാക്കാം:

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

തുടർന്ന് താഴെ പറയുന്ന കമാൻഡുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് HTML ഫയലുകൾ ചെറുതാക്കാം.

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

നിങ്ങളുടെ ഉൽപ്പാദനക്ഷമത മെച്ചപ്പെടുത്താൻ സഹായിക്കുന്ന ഉപയോഗപ്രദമായ ടൂൾകിറ്റാണ് ഗൾപ്പ്. നിങ്ങൾക്ക് ഈ ടൂളിൽ താൽപ്പര്യമുണ്ടെങ്കിൽ അതിന്റെ ഡോക്യുമെന്റേഷൻ പേജ് പരിശോധിക്കാൻ ഞാൻ വളരെ ശുപാർശ ചെയ്യുന്നു, അത് ഇവിടെ ലഭ്യമാണ്.