Gulp - Ohun elo irinṣẹ fun Adaṣiṣẹ Awọn iṣẹ-ṣiṣe irora ni Idagbasoke

Gulp jẹ ohun elo irinṣẹ kekere ti o ṣe adaṣe awọn iṣẹ ṣiṣe atunṣe. Awọn iṣẹ ṣiṣe atunṣe wọnyẹn nigbagbogbo n ṣajọ CSS, awọn faili JavaScript tabi ni ipilẹṣẹ nigbati o ba lo ilana kan ti o ni ibatan pẹlu awọn faili JavaScript/CSS ti kii ṣe deede iwọ yoo fẹ lati lo irinṣẹ adaṣe kan ti o gba awọn faili wọnyẹn, ṣajọ wọn papọ ki o ṣajọ ohun gbogbo ki aṣawakiri rẹ le ni rọọrun loye oun.

Gulp wulo fun adaṣe awọn iṣẹ-ṣiṣe atẹle:

  • Ṣakojọ awọn faili JS ati CSS
  • Itura oju-iwe ẹrọ aṣawakiri nigbati o fipamọ faili kan
  • Ṣiṣe idanwo ẹyọkan kan
  • Itupalẹ koodu
    • Didaakọ awọn faili ti a ti yipada si itọsọna afojusun

Lati tọju gbogbo awọn faili ti o nilo lati ṣẹda faili gulp kan, dagbasoke irinṣẹ adaṣe rẹ tabi awọn iṣẹ adaṣe, o nilo lati ṣe faili faili package.json kan. Faili naa ni ipilẹ ni alaye ti ohun ti o wa ninu iṣẹ akanṣe rẹ, awọn igbẹkẹle wo ni o nilo lati jẹ ki iṣẹ akanṣe rẹ ṣiṣẹ.

Ninu ẹkọ yii, iwọ yoo kọ bi o ṣe le fi sori ẹrọ Gulp ati bii o ṣe le ṣe adaṣe diẹ ninu awọn iṣẹ ipilẹ fun awọn iṣẹ rẹ. A yoo lo npm - eyiti o duro fun oluṣakoso package ipade. O ti fi sii pẹlu Node.js, ati pe o le ṣayẹwo ti o ba ti fi sii Nodejs ati npm tẹlẹ pẹlu:

# node --version
# npm --version

Ti o ko ba ti fi sii tẹlẹ lori eto rẹ, Mo ṣeduro fun ọ lati ṣayẹwo itọnisọna: Fi Nodejs Tuntun ati Ẹya NPM sii ni Awọn ọna Linux.

Bii o ṣe le Fi Gulp sii ni Lainos

Fifi sori ẹrọ ti gulp-cli le pari pẹlu npm nipa lilo pipaṣẹ atẹle.

# npm install --global gulp-cli

Ti o ba fẹ fi sori ẹrọ module gulp ni agbegbe (fun iṣẹ lọwọlọwọ nikan), o le lo awọn itọnisọna ni isalẹ:

Ṣẹda ilana iṣẹ akanṣe ki o lọ kiri ninu rẹ:

# mkdir myproject
# cd myproject

Nigbamii, lo aṣẹ atẹle lati bẹrẹ iṣẹ rẹ:

# npm init

Lẹhin ṣiṣe aṣẹ ti o wa loke, ao beere lọwọ rẹ lẹsẹsẹ awọn ibeere lati fun iṣẹ rẹ ni orukọ kan, apejuwe ẹya ati awọn miiran. Lakotan jẹrisi gbogbo alaye ti o ti fun:

Bayi a le fi sori ẹrọ package gulp ninu iṣẹ wa pẹlu:

# npm install --save-dev gulp

Aṣayan naa --save-dev sọ fun npm lati ṣe imudojuiwọn faili package.json pẹlu awọn onigbagbọ titun.

Akiyesi pe awọn onigbọwọ nilo lati yanju lakoko idagbasoke, lakoko ti Awọn igbẹkẹle lakoko akoko ṣiṣe. Niwọn igba ti gulp jẹ ọpa ti o ṣe iranlọwọ fun wa ni idagbasoke, o nilo lati yanju ni akoko idagbasoke.

Bayi jẹ ki a ṣẹda gulpfile kan. Awọn iṣẹ-ṣiṣe ti a fẹ lati ṣiṣẹ yoo rii ninu faili yẹn. O ti wa ni fifuye laifọwọyi nigbati o nlo pipaṣẹ gulp. Lilo olootu ọrọ kan, ṣẹda faili ti a npè ni gulpfile.js. Fun idi ti ẹkọ yii, a yoo ṣẹda idanwo ti o rọrun.

O le fi koodu atẹle sii sinu gulpfile.js rẹ:

var gulp = require('gulp');

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

Fipamọ faili naa ati bayi gbiyanju lati ṣiṣẹ pẹlu:

# gulp hello

O yẹ ki o wo abajade atẹle:

Eyi ni ohun ti koodu ti o loke ṣe:

  • var gulp = beere ('gulp'); - ṣe agbewọle modulu gulp.
  • gulp.task (‘hello’, function (done) {- ṣalaye iṣẹ-ṣiṣe kan ti yoo wa lati laini aṣẹ.
  • console.log ('Kaabo agbaye!'); - awọn itẹwe ni irọrun\"Aye Hellow!" si iboju.
  • ṣe(); - a lo iṣẹ ipe ipe lati kọ gulp pe awọn iṣẹ wa ti pari.

Dajudaju eyi ti o wa loke jẹ apẹẹrẹ kan lati fihan bi a ṣe le ṣeto gulpfile.js naa. Ti o ba fẹ wo awọn iṣẹ ṣiṣe ti o wa lati gulpfile.js rẹ, o le lo aṣẹ wọnyi:

# gulp --tasks

Gulp ni awọn ẹgbẹẹgbẹrun awọn afikun ti o wa, gbogbo wọn n pese iṣẹ oriṣiriṣi. O le ṣayẹwo wọn ni oju-iwe ohun itanna Gulp.

Ni isalẹ a yoo lo ohun itanna minify-html ni apẹẹrẹ ti o wulo julọ. Pẹlu iṣẹ ti o wa ni isalẹ, o le minify awọn faili HTML ki o gbe wọn sinu itọsọna tuntun. Ṣugbọn lakọkọ, a yoo fi ohun itanna gulp-minify-html sori ẹrọ:

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

O le ṣe gulpfile.js rẹ bii eleyi:

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

Lẹhinna o le minify awọn faili HTML nipa lilo awọn ofin wọnyi.

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

Gulp jẹ ohun elo irinṣẹ ti o wulo ti o le ṣe iranlọwọ fun ọ lati mu ilọsiwaju iṣelọpọ rẹ pọ si. Ti o ba nife ninu ọpa yii Mo ṣeduro ni gíga ki o ṣayẹwo oju iwe iwe rẹ, eyiti o wa nibi.