Gulp - Usa ka Toolkit alang sa Pag-automate sa Sakit nga mga Buluhaton sa Pag-uswag


Ang Gulp usa ka gamay nga toolkit nga nag-automate sa mga balik-balik nga buluhaton. Ang mga nagbalikbalik nga mga buluhaton kasagaran nga nag-compile sa CSS, JavaScript nga mga file o sa panguna kung mogamit ka usa ka balangkas nga naghisgot sa dili standard nga mga file sa JavaScript/CSS gusto nimo nga mogamit usa ka himan sa automation nga mag-ilog sa mga file, i-package kini ug i-compile ang tanan aron dali masabtan sa imong browser. kini.

Ang Gulp mapuslanon sa pag-automate sa mosunod nga mga buluhaton:

  • Pag-compile sa JS ug CSS files
  • Nag-refresh nga panid sa browser kung nagtipig ka usa ka file
  • Pagdala og unit test
  • Pagtuki sa code
  • Pagkopya sa giusab nga mga file ngadto sa target nga direktoryo

Aron masubay ang tanang mga file nga imong gikinahanglan sa paghimo og gulp file, pagpalambo sa imong automation tool o pag-automate sa mga buluhaton, kinahanglan ka nga maghimo og package.json file. Ang file batakan adunay katin-awan kung unsa ang naa sa sulod sa imong proyekto, kung unsang mga dependency ang kinahanglan nimo aron mahimo ang imong proyekto.

Niini nga panudlo, mahibal-an nimo kung giunsa ang pag-install sa Gulp ug kung giunsa ang pag-automate sa pipila ka mga batakang buluhaton alang sa imong mga proyekto. Atong gamiton ang npm - nga nagpasabot sa node package manager. Gi-install kini sa Node.js, ug mahimo nimong susihon kung na-install na nimo ang Nodejs ug npm sa:

# node --version
# npm --version

Kung wala pa nimo kini na-install sa imong sistema, girekomenda ko ikaw nga susihon ang tutorial: I-install ang Pinakabag-o nga Nodejs ug NPM nga Bersyon sa Linux Systems.

Giunsa ang Pag-install sa Gulp sa Linux

Ang pag-instalar sa gulp-cli mahimong makompleto sa npm gamit ang mosunod nga sugo.

# npm install --global gulp-cli

Kung gusto nimo i-install ang gulp module sa lokal (para sa karon nga proyekto lamang), mahimo nimong gamiton ang mga panudlo sa ubos:

Paghimo og direktoryo sa proyekto ug pag-navigate niini:

# mkdir myproject
# cd myproject

Sunod, gamita ang mosunod nga sugo aron masugdan ang imong proyekto:

# npm init

Human sa pagpadagan sa sugo sa ibabaw, pangutan-on ka og sunod-sunod nga mga pangutana aron mahatagan ang imong proyekto og ngalan, paghulagway sa bersyon ug uban pa. Sa katapusan kumpirmahi ang tanan nga kasayuran nga imong gihatag:

Karon mahimo na namon i-install ang gulp package sa among proyekto nga adunay:

# npm install --save-dev gulp

Ang --save-dev nga opsyon nagsulti sa npm nga i-update ang package.json file sa bag-ong devDependencies.

Timan-i nga ang mga devDependencies kinahanglan nga masulbad sa panahon sa pag-uswag, samtang ang Dependencies sa panahon sa pagdagan. Tungod kay ang gulp usa ka himan nga makatabang kanato sa pagpalambo, kini kinahanglan nga masulbad sa panahon sa pag-uswag.

Karon maghimo kita og gulpfile. Ang mga buluhaton nga gusto namong padaganon makit-an sa kana nga file. Awtomatiko kini nga gikarga kung gamiton ang gulp command. Gamit ang text editor, paghimo ug file nga ginganlag gulpfile.js. Alang sa katuyoan niini nga panudlo, maghimo kami usa ka yano nga pagsulay.

Mahimo nimong isulod ang mosunod nga code sa imong gulpfile.js:

var gulp = require('gulp');

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

I-save ang file ug karon sulayi pagpadagan kini gamit ang:

# gulp hello

Kinahanglan nimong makita ang mosunod nga resulta:

Ania ang gibuhat sa code sa ibabaw:

  • var gulp = gikinahanglan('gulp'); – nag-import sa gulp module.
  • gulp.task(‘hello’, function(done) { – naghubit sa buluhaton nga makuha gikan sa command line.
  • console.log('Hello world!'); – nag-imprinta lang og \Hellow world! sa screen.
  • nahuman(); – gigamit namo kining callback function aron pagtudlo sa gulp nga nahuman na ang among mga buluhaton.

Siyempre ang sa ibabaw usa lang ka sampol aron ipakita kung giunsa ang pag-organisar sa gulpfile.js. Kung gusto nimo makita ang magamit nga mga buluhaton gikan sa imong gulpfile.js, mahimo nimong gamiton ang mosunud nga mando:

# gulp --tasks

Ang Gulp adunay libu-libo nga mga plugins nga magamit, ang tanan naghatag lainlaing mga gamit. Mahimo nimong susihon kini sa Gulp's plugin page.

Sa ubos atong gamiton ang minify-html plugin sa mas praktikal nga pananglitan. Uban sa function sa ubos, mahimo nimong gamayon ang mga file sa HTML ug ibutang kini sa bag-ong direktoryo. Apan una, atong i-install ang gulp-minify-html plugin:

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

Mahimo nimong himoon ang imong gulpfile.js nga sama niini:

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

Dayon mahimo nimong gamayon ang mga file sa HTML gamit ang mosunod nga mga sugo.

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

Ang Gulp usa ka mapuslanon nga toolkit nga makatabang kanimo sa pagpauswag sa imong pagka-produktibo. Kung interesado ka sa kini nga himan girekomenda ko nga susihon nimo ang panid sa dokumentasyon niini, nga magamit dinhi.