Webpack vs Gulp vs Grunt

By Stephen Afam-Osemene

Bevezetés

A Javascript projektek növekvő komplexitásával és a feladatok automatizálásának, az alkalmazások teljesítményének nyomon követésének és bizonyos karbantartási tevékenységek végrehajtásának szükségességével nagyon fontossá vált annak eldöntése, hogy milyen típusú build eszközt alkalmazzunk.Mielőtt a build eszközök szükségessé váltak, nem volt egyértelmű, hogyan kezeljük a rutinfeladatokat. Erre nem volt nagy szükség, mivel a Javascriptet nem kellett különösebben lefordítani; azonban az olyan projektekkel, mint az egyoldalas alkalmazások, és a build eszközök megjelenésével az ismétlődő feladatok automatizálódtak.Látva, hogy a build eszközök használata több mint szükségszerűvé vált, a szoftverfejlesztők a jelen korban azzal a kihívással szembesülnek, hogy kiválasszák a projektjük számára tökéleteset.

Ebben a cikkben a Gruntot, a Gulpot és a Webpacket fogjuk összehasonlítani a következő jellemzők tekintetében:

• Egyszerű használat
• Népszerűség
• megbízhatóság
• bővíthetőség

A Grunt és a Gulp feladatfutók, míg a Webpack egy modulkötegelő. A feladatfuttatókat alapvetően a fejlesztési folyamat feladatainak automatizálására használják. Néhány ilyen feladat például a JS fájlok tömörítése, a Sass fájlok fordítása, a fájlváltozások figyelése, a fájlok minifikálása és az automatikus prefixálás.A modulkötegelők az alkalmazás több modulját veszik, amelyek mindegyike függőséggel rendelkezik, és statikus eszközökké kötegelik őket. A modulkötegelők elvégzik a task runnerek feladatát, és néhány lépéssel tovább mennek.Remélhetőleg a cikk végére világosabb lesz, hogy melyik build eszközt érdemes használni a projekthez.

Egyszerű használat

Minél összetettebb egy eszköz, annál nehezebb használni. Feladatfutók lévén a Gulp és a Grunt olyan funkciókat kínál, mint a kódminimalizálás, CSS előfeldolgozás, egységtesztelés és még egy sor más.

A Grunthoz vagy a Webpackhoz képest a Gulp sokkal könnyebben használható. A Gulp segítségével néhány perc alatt el lehet indítani egy projektet. A Grunt viszont kevesebb konfigurációs gonddal jár, mint a Webpack.

A Gulp beállításához a következő lépéseket kell megtenni

• Vizsgáljuk meg, hogy a node, az npm és az npx telepítve van-e
• Telepítsük a Gulp CLI-t a npm install --global gulp-cli
• Hozzunk létre egy csomagot.json fájlt a devDependencieshez
• Telepítse a gulp csomagot a devDependencies-be a npm install --save-dev gulp@next
• Készítsen egy gulp.js fájlt, ahová a feladatok íródnakfunction defaultTask(cb) { // helyezze ide az alapértelmezett feladat kódját cb();}exports.default = defaultTask

A Grunt használatához a következőket kell tennünk:

• Frissítsük az npm-et a npm update -g npm
• Telepítsük a Grunt CLI-t az npm install -g grunt-cli
• Telepítsük a csomagot.json fájlt, ahol a devDependenciáid szerepelnek
• Készíts egy Gruntfile.js fájlt, ahová a feladatokat írjuk. A feladatok mindig ebben a blokkban íródnak:module.exports = function(grunt) { // A Grunt feladatok ide kerülnek};

A Gulp és a Grunt beállításának folyamatai hasonlóak. A Gulp azonban kifejezőbb; lehetővé teszi, hogy olyan kódot írjunk, amely egyértelműen kifejezi a funkcióját. A Gulp a Node streamekre épül, lehetővé téve a pipelininget. A Grunt ezzel szemben az adatokat konfiguráló fájlokra támaszkodik, ahol minden forrás- és célfájlt deklarálni kell. Ahogy a projekt egyre nagyobb lesz, a Grunt kezelése még körülményesebbé válik.

Ha például a Grunt segítségével kell lefordítani a Sass-t, minifikálni az így kapott CSS fájlt és Uglify a JS fájlt, akkor a Gruntfile.js fájl így fog kinézni

module.exports = function (grunt) { grunt.initConfig({ sass: { dist: { files: { 'dist-grunt/css/style.css': 'assets/scss/style.scss' } } }, cssmin: { dist: { files: { 'dist-grunt/css/styles.min.css': } } }, uglify: { dist: { files: { 'dist-grunt/js/scripts.min.js': } } }, grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', );};

Ha viszont ugyanezt a folyamatot a Gulp segítségével kell elvégezni, akkor a gulp.js így fog kinézni:

var gulp = require('gulp');var sass = require('gulp-sass');var cleanCSS = require('gulp-clean-css');var uglify = require('gulp-uglify');gulp.task('sass', function () { return gulp.src('assets/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('css', , function () { return gulp.src() .pipe(cleanCSS()) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('default', );

A Gulp és a Grunt is könnyebben beállítható a Webpackhoz képest.

A Webpack használatához a következőket kell tennünk:

• Telepítse a Nodejs-t és az Npm-et
• A termináljában, hozzon létre egy Webpack mappát a mkdir folder-name
• Intializálja a Nodejs projektet a npm init -y
• Hozza létre a következő fájlokat touch index.html webpack.config.js index.js
• Install Webpack és a Webpack dev szervert a npm i --save-dev webpack@latest webpack-dev-server@latest
• Telepítse a Webpack-et globálisan npm i -g webpack@latest

• A Webpack konfigurációját írja a webpack.config.js fájlba.

  const webpack = require(‘webpack’);

  let config = { entry: ‘./index.js’, output: { filename: ‘output.js’ }}module.exports = config;

A fenti beállítás a Webpack alapvető indítása. A Webpack számos hasznos funkcióval rendelkezik, és sokkal többre képes. A Webpackkel feltárt lehetőségek sokasága indokolhatja a bonyolultságát. Több időt vesz igénybe a Webpack működésének megértése; nehézkessé is válhat, ha több konfigurációt kezelünk több környezethez.

Népszerűség

A népszerűség mérésére szolgáló mérőszámok az egyes eszközök esetében eltérőek. A Grunt már jóval a Gulp előtt létezett, és sok fejlesztő használta széles körben. A State of JavaScript 2018 felmérés szerint azonban a Webpack előkelőbb helyen áll, mint a Gulp és a Grunt.

A Webpack használatának elsajátítása iránt egyre nagyobb az érdeklődés; ez indokolt, látva a használata által elérhetővé tett széleskörű lehetőségeket.

A Github statisztikáit is felhasználva a Webpack, a Gulp és a Grunt 41 000, 30 000 és 11 000 csillag felett rendelkezik.

megbízhatóság

A Gulp, a Grunt és a Webpack nagymértékben függ a pluginoktól. Mindhárom eszköznek nagy közössége van, ahol a problémákat lehet kezelni és javítani. A Gulp és a Grunt esetében a pluginok karbantartása nagymértékben függ a plugin szerzőjétől, és néha kevés vagy semmilyen dokumentációra nem lehet támaszkodni, amikor egy problémával kell szembenézni. Az eredmény általában az, hogy meg kell várni, amíg ezek a szerzők frissítéseket készítenek, vagy el kell dönteni, hogy maga javítja ki a hibákat. A legtöbb Webpack bővítményt azonban a Webpack magcsapata karbantartja, míg a többit a Webpack közössége kezeli; és ez megbízhatóbbá teszi.

Bővíthetőség

A Gulp, a Grunt és a Webpack az elmúlt években sokat fejlődött. Mindegyikben több hely van az újabb és még hatékonyabb és szabványosított bővítmények számára.

A Grunt felhasználók egy része azért kezdi átvenni a Gulp-ot, mert az lehetővé teszi a pipinget, és ez magyarázza, hogy a Grunt állítólag hamarosan kap egy frissítést, ami szintén lehetővé teszi a pipinget. A piping lehetővé teszi a gulp felhasználók számára, hogy egy feladat kimenetét egy másik függőséghez csatolják, így a kód rövidebb lesz és gyorsabban dolgozik.

A Gulp jelenleg bővíthetőbbnek tűnik, mint a Grunt, mert amikor a projekt skálázódik, nem olyan nehéz kezelni a gulp fájlt. A Gulp pluginokat használ, amelyek mindegyike egyetlen feladatot végez, szemben a Grunt-tal, ahol egy plugin több feladatot is elvégezhet.

A Webpack még az alapfunkcióin túl is bővíthető a pluginok és a loaderek segítségével, az egyetlen probléma a konfigurálás során felmerülő bonyodalmak. Mivel azonban a Webpack az összes függőséggel rendelkező modult összecsomagolja, még nagy Webpack-projekteken sem olyan fáradságos dolgozni.

A cikk írásakor a Grunt plugin-nyilvántartásában 6459, míg a Gulp saját plugin-nyilvántartásában 3672 plugin szerepel. Mivel mindkettőhöz ennyi plugin tartozik, valószínűleg találsz olyan plugint, amely bármit is csinál, amire szükséged van.A Webpack saját hivatalos pluginjai itt vannak felsorolva, és egy lista más, harmadik féltől származó pluginokról, amelyeket az awesome-webpack oldalon találhatsz.

Következtetés

A Webpack a Gulp/Grunt és a Browserify kombinációjához hasonlít. A Webpack némileg szükséges az olyan projektekhez, amelyeknek szándékukban áll a skálázás. Ezért gyakran használják React vagy Angular esetén.

Grunt és Gulp akkor használható, ha a projekt mérsékelt, vagy meglehetősen nagy. Ha igazán jól érzed magad a JS függvények írásában, akkor a Gulp ajánlott, de ha inkább feladatkonfigurációkat írsz, akkor a Grunt is elegendő.