Webpack vs Gulp vs Grunt

Od Stephena Afam-Osemene

Úvod

S rostoucí složitostí projektů Javascript a potřebou automatizovat úlohy, sledovat výkonnost aplikací a provádět některé činnosti údržby se stalo velmi důležitým rozhodnout se, jaký typ nástroje pro sestavování použít. než se nástroje pro sestavování staly nutností, nebylo jasné, jak zvládat rutinní úlohy. Nebylo to příliš nutné, protože Javascript nebylo třeba nijak zvlášť kompilovat; nicméně s projekty, jako jsou jednostránkové aplikace, a příchodem nástrojů pro sestavování se nyní opakující se úkoly automatizují. vzhledem k tomu, že se používání nástrojů pro sestavování stalo více než nutností, stojí vývojáři softwaru v současné době před výzvou vybrat takový nástroj, který je pro jejich projekt ideální.

V tomto článku budeme porovnávat nástroje Grunt, Gulp a Webpack s ohledem na následující vlastnosti:

• Snadnost použití
• Oblíbenost
• Spolehlivost
• Rozšiřitelnost

Grunt a Gulp jsou nástroje pro spouštění úloh, zatímco Webpack je modulový bundler. Task runnery se v podstatě používají k automatizaci úloh v procesu vývoje. Některé z těchto úloh zahrnují kompresi souborů JS, kompilaci souborů Sass, hlídání změn souborů, minimalizaci souborů a automatické vytváření předpon. bundlery modulů vezmou několik modulů aplikace, z nichž každý má závislosti, a spojí je do statických prostředků. Module bundlers plní úlohu task runnerů a jdou o několik kroků dál. doufejme, že na konci článku bude jasnější, jaký nástroj pro sestavení použít pro svůj projekt.

Snadnost použití

Čím je nástroj složitější, tím obtížnější je jeho použití. Jako nástroje pro spouštění úloh nabízejí Gulp a Grunt funkce, jako je minifikace kódu, předzpracování CSS, jednotkové testování a seznam dalších.

V porovnání s Gruntem nebo Webpackem je Gulp mnohem jednodušší na používání. Projekt pomocí Gulpu je možné spustit během několika minut. Grunt má však méně problémů s konfigurací než Webpack.

K nastavení Gulpu slouží následující kroky

• Zkontrolujte, zda jsou nainstalovány aplikace node, npm a npx
• Nainstalujte Gulp CLI pomocí npm install --global gulp-cli
• Vytvořte balíček.json pro devDependencies
• Instalujte balíček gulp do devDependencies pomocí npm install --save-dev gulp@next
• Vytvořte soubor gulp.js, kam se budou zapisovat úlohyfunkce defaultTask(cb) { // sem umístěte kód pro vaši výchozí úlohu cb();}exports.default = defaultTask

Chcete-li používat Grunt, musíte udělat následující:

• Aktualizujte svůj npm pomocí npm update -g npm
• Instalujte Grunt CLI pomocí npm install -g grunt-cli
• Nastavte svůj balíček.json, kde jsou uvedeny vaše devDependencies
• Vytvořte soubor Gruntfile.js, kam se zapisují úlohy. Úlohy se vždy zapisují v tomto bloku:module.exports = function(grunt) { // Úlohy Gruntu jdou sem};

Procesy nastavení Gulpu a Gruntu vypadají podobně. Gulp je však expresivnější; umožňuje psát kód, který jasně uvádí svou funkci. Gulp je založen na proudech Node, což umožňuje pipelining. Grunt naproti tomu spoléhá na datové konfigurační soubory, kde musí být deklarován každý zdrojový a cílový soubor. S rostoucí velikostí projektu se správa Gruntu stává ještě těžkopádnější.

Pokud například potřebujete zkompilovat Sass, minifikovat výsledný soubor CSS a Uglify JS pomocí Gruntu, bude soubor Gruntfile.js vypadat takto

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', );};

Na druhou stranu, pokud má být stejný proces proveden pomocí Gulpu, bude gulp.js vypadat takto:

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', );

Gulp i Grunt jsou ve srovnání s Webpackem jednodušší na nastavení.

Chcete-li použít Webpack, musíte provést následující kroky:

• Nainstalujte Nodejs a Npm
• V terminálu, vytvořte složku Webpack pomocí mkdir folder-name
• Instalace projektu Nodejs pomocí npm init -y
• Vytvořte následující soubory touch index.html webpack.config.js index.js
• Instalace Webpack a Webpack dev server pomocí npm i --save-dev webpack@latest webpack-dev-server@latest
• Instalujte Webpack globálně npm i -g webpack@latest

• Napište konfiguraci Webpack do souboru webpack.config.js.

  const webpack = require(‚webpack‘);

  let config = { entry: ‚./index.js‘, output: {jméno souboru: ‚output.js‘ }}module.exports = config;

Výše uvedené nastavení je základním začátkem pro Webpack. Webpack má různé užitečné funkce a umí toho mnohem více. Množství možností, které Webpack odhaluje, by mohlo ospravedlnit jeho složitost. Pochopit, jak Webpack funguje, zabere více času; může být také těžkopádné při správě několika konfigurací pro více prostředí.

Popularita

Metriky pro měření popularity jednotlivých nástrojů se liší. Grunt existoval dlouho před nástrojem Gulp a mnoho vývojářů jej hojně používalo. Podle průzkumu State of JavaScript 2018 se však Webpack umístil výše než Gulp a Grunt.

Roste zájem naučit se používat Webpack; to je oprávněné, když vidíme široké možnosti, které se díky jeho použití zpřístupňují.

Podle statistik Githubu mají Webpack, Gulp a Grunt více než 41 000, 30 000 a 11 000 hvězdiček.

Spolehlivost

Gulp, Grunt a Webpack mají velkou závislost na zásuvných modulech. Všechny tři nástroje mají velké komunity, kde by se mohly řešit a opravovat problémy. U zásuvných modulů Gulp a Grunt je velká závislost na autorovi zásuvného modulu, který je udržuje, a někdy existuje jen malá nebo žádná dokumentace, o kterou se lze opřít, když se vyskytne problém. Výsledkem je obvykle čekání na aktualizace těchto autorů nebo řešení vlastními silami. Většinu zásuvných modulů Webpack však udržuje jádro týmu Webpack, zatímco zbytek spravuje komunita Webpack; a díky tomu je spolehlivější.

Rozšířitelnost

Gulp, Grunt a Webpack byly v uplynulých letech vylepšeny. Všechny mají více prostoru pro novější a ještě efektivnější a standardizovanější pluginy.

Někteří uživatelé Gruntu začínají přijímat Gulp, protože umožňuje piping, a to vysvětluje, proč se prý Grunt brzy dočká aktualizace, která piping také umožní. Piping umožňuje uživatelům Gulpu připojit výstup úlohy k jiné závislosti, čímž se kód zkrátí a práce zrychlí.

V současné době se Gulp zdá být rozšiřitelnější než Grunt, protože při škálování projektu není tak obtížné spravovat soubor gulp. Gulp používá zásuvné moduly, z nichž každý provádí jednu úlohu, na rozdíl od Gruntu, kde jeden zásuvný modul může provádět více úloh.

Webpack lze pomocí zásuvných modulů a zavaděčů rozšířit i mimo jeho základní funkce, jediným problémem jsou komplikace, které mohou nastat při jeho konfiguraci. Protože však Webpack sdružuje všechny moduly, které mají závislosti, není práce na i rozsáhlých projektech Webpack tak namáhavá.

V době psaní tohoto článku má Grunt ve svém registru zásuvných modulů 6 459 zásuvných modulů, zatímco Gulp má ve svém vlastním registru zásuvných modulů uvedeno 3 672 zásuvných modulů. S takovým množstvím zásuvných modulů pro oba typy zásuvných modulů pravděpodobně najdete zásuvný modul, který bude dělat vše, co potřebujete.

Webpack má vlastní sadu oficiálních zásuvných modulů uvedenou zde a seznam dalších zásuvných modulů třetích stran, které byste mohli najít na adrese awesome-webpack.

Závěr

Webpack je podobný kombinaci Gulp/Grunt a Browserify. Webpack je do jisté míry nezbytný pro projekty, které mají v úmyslu škálovat. Proto se často používá s Reactem nebo Angularem.

Grunt a Gulp by se daly použít, když je projekt středně velký nebo poměrně rozsáhlý. Pokud vám psaní funkcí JS opravdu vyhovuje, pak je vhodné použít Gulp, ale pokud budete spíše psát konfigurace úloh, pak vám bude stačit Grunt.