Gulp – Eszközkészlet a fejlesztés során felmerülő fájdalmas feladatok automatizálásához

A Gulp egy kis eszközkészlet, amely automatizálja az ismétlődő feladatokat. Ezek az ismétlődő feladatok általában a CSS, JavaScript fájlok fordítása, vagy alapvetően ha nem szabványos JavaScript/CSS fájlokkal foglalkozó keretrendszert használ, akkor olyan automatizálási eszközt kell használnia, amely megragadja ezeket a fájlokat, összecsomagolja és mindent összeállít, hogy a böngészője könnyen megérthesse. azt.

A Gulp a következő feladatok automatizálásához hasznos:

• JS és CSS fájlok fordítása
• A böngészőoldal frissítése fájl mentésekor
• Futtasson le egy egységtesztet
• Kódelemzés
• Módosított fájlok másolása a célkönyvtárba

A gulp-fájl létrehozásához, az automatizálási eszköz fejlesztéséhez vagy a feladatok automatizálásához szükséges összes fájl nyomon követéséhez létre kell hoznia egy package.json fájlt. A fájl alapvetően magyarázatot tartalmaz arra vonatkozóan, hogy mi van a projektben, milyen függőségekre van szüksége a projekt működéséhez.

Ebben az oktatóanyagban megtudhatja, hogyan kell telepíteni a Gulp-ot, és hogyan automatizálhat néhány alapvető feladatot projektjeihez. Az npm-et fogjuk használni, ami a node csomagkezelő rövidítése. A Node.js segítségével van telepítve, és ellenőrizheti, hogy telepítette-e már a Nodejs-t és az npm-t a következővel:

node --version
npm --version

Ha még nincs telepítve a rendszerére, azt javaslom, hogy tekintse meg az oktatóanyagot: A legújabb Nodejs és NPM verzió telepítése Linux rendszereken.

A Gulp telepítése Linux alatt

A gulp-cli telepítése az npm paranccsal fejezhető be a következő paranccsal.

npm install --global gulp-cli

Ha helyileg szeretné telepíteni a gulp modult (csak az aktuális projekthez), kövesse az alábbi utasításokat:

Hozzon létre egy projektkönyvtárat, és navigáljon benne:

mkdir myproject
cd myproject

Ezután használja a következő parancsot a projekt inicializálásához:

npm init

A fenti parancs futtatása után egy sor kérdést fog feltenni, hogy adjon nevet a projektnek, verzióleírást és egyebeket. Végül erősítse meg az összes megadott információt:

Most már telepíthetjük a gulp csomagot projektünkbe a következőkkel:

npm install --save-dev gulp

A --save-dev beállítás arra utasítja az npm-t, hogy frissítse a package.json fájlt az új devDependencies-vel.

Ne feledje, hogy a devDependenciákat a fejlesztés során, míg a függőségeket futás közben kell feloldani. Mivel a gulp egy olyan eszköz, amely segít bennünket a fejlesztésben, ezért fejlesztéskor meg kell oldani.

Gulp fájl létrehozása

Most hozzunk létre egy gulpfile-t. A futtatni kívánt feladatok ebben a fájlban találhatók. A gulp parancs használatakor automatikusan betöltődik. Szövegszerkesztővel hozzon létre egy gulpfile.js nevű fájlt. Ennek az oktatóanyagnak a céljára egy egyszerű tesztet fogunk készíteni.

A következő kódot szúrhatja be a gulpfile.js fájlba:

var gulp = require('gulp');

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

Mentse el a fájlt, és próbálja meg futtatni a következővel:

gulp hello

A következő eredményt kell látnod:

Íme, mit csinál a fenti kód:

• var gulp=request(‘gulp’); – importálja a gulp modult.
• gulp.task('hello', function(done) { – meghatároz egy feladatot, amely elérhető lesz a parancssorból.
• console.log('Hello world!'); – egyszerűen kiírja a képernyőre a „Hellow world! ” szöveget.
• done(); – ezzel a visszahívási funkcióval utasítjuk, hogy a feladatunk befejeződött.

Természetesen a fenti csak egy példa volt annak bemutatására, hogyan lehet a gulpfile.js fájlt rendszerezni. Ha meg szeretné tekinteni a gulpfile.js fájlból elérhető feladatokat, használja a következő parancsot:

gulp --tasks

Gulp beépülő modulok

A Gulp több ezer beépülő modult kínál, amelyek mindegyike különböző funkciókat biztosít. Megtekintheti őket a Gulp plugin oldalán.

Az alábbiakban a minify-html beépülő modult fogjuk használni egy gyakorlatiasabb példában. Az alábbi funkcióval kicsinyítheti a HTML fájlokat, és új könyvtárba helyezheti őket. Először azonban telepítjük a gulp-minify-html beépülő modult:

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

A gulpfile.js fájlt így nézheti ki:

cat gulpfile.js

Minta kimenet

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

Ezután a következő parancsokkal kicsinyítheti a HTML fájlokat.

gulp minify-html
du -sh /src dest/

Következtetés

A Gulp egy hasznos eszköztár, amely segíthet a termelékenység javításában. Ha érdekli ez az eszköz, erősen ajánlom, hogy tekintse meg a dokumentációs oldalt, amely itt érhető el.