Vyhledávání na webu

Gulp – sada nástrojů pro automatizaci bolestivých úkolů ve vývoji

Gulp je malá sada nástrojů, která automatizuje opakující se úkoly. Tyto opakující se úkoly jsou obvykle kompilace CSS, souborů JavaScript nebo v zásadě, když používáte rámec, který se zabývá nestandardními soubory JavaScript/CSS, budete chtít použít automatizační nástroj, který tyto soubory uchopí, zabalí je dohromady a zkompiluje vše, aby tomu váš prohlížeč snadno porozuměl. to.

Gulp je užitečný pro automatizaci následujících úkolů:

  • Kompilace souborů JS a CSS
  • Obnovení stránky prohlížeče při ukládání souboru
  • Spusťte test jednotky
  • Analýza kódu
  • Kopírování upravených souborů do cílového adresáře

Chcete-li mít přehled o všech souborech, které potřebujete k vytvoření souboru gulp, vývoji automatizačního nástroje nebo automatizaci úloh, musíte vygenerovat soubor package.json. Soubor v podstatě obsahuje vysvětlení toho, co je uvnitř vašeho projektu, jaké závislosti potřebujete, aby váš projekt fungoval.

V tomto tutoriálu se naučíte, jak nainstalovat Gulp a jak automatizovat některé základní úlohy pro vaše projekty. Budeme používat npm – což je zkratka pro správce balíčků uzlů. Je nainstalován pomocí Node.js a můžete zkontrolovat, zda jste již nainstalovali Nodejs a npm pomocí:

node --version
npm --version

Pokud ji ještě nemáte nainstalovanou ve svém systému, doporučuji vám zkontrolovat tutoriál: Instalace nejnovější verze Nodejs a NPM v systémech Linux.

Jak nainstalovat Gulp v Linuxu

Instalaci gulp-cli lze dokončit pomocí npm pomocí následujícího příkazu.

npm install --global gulp-cli

Pokud chcete modul gulp nainstalovat lokálně (pouze pro aktuální projekt), můžete použít níže uvedené pokyny:

Vytvořte adresář projektu a procházejte v něm:

mkdir myproject
cd myproject

Dále použijte následující příkaz k inicializaci projektu:

npm init

Po spuštění výše uvedeného příkazu budete dotázáni na řadu otázek, abyste svému projektu dali název, popis verze a další. Nakonec potvrďte všechny informace, které jste uvedli:

Nyní můžeme nainstalovat balíček gulp do našeho projektu pomocí:

npm install --save-dev gulp

Možnost --save-dev říká npm, aby aktualizoval soubor package.json o nové devDependencies.

Pamatujte, že devDependencies je třeba vyřešit během vývoje, zatímco závislosti během běhu. Vzhledem k tomu, že gulp je nástroj, který nám pomáhá ve vývoji, je třeba jej vyřešit v době vývoje.

Vytvořte soubor Gulp

Nyní vytvoříme gulpfile. V tomto souboru najdeme úkoly, které chceme spustit. Automaticky se načte při použití příkazu gulp. Pomocí textového editoru vytvořte soubor s názvem gulpfile.js. Pro účely tohoto tutoriálu vytvoříme jednoduchý test.

Do souboru gulpfile.js můžete vložit následující kód:

var gulp = require('gulp');

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

Uložte soubor a nyní jej zkuste spustit pomocí:

gulp hello

Měli byste vidět následující výsledek:

Zde je to, co dělá výše uvedený kód:

  • var gulp=require(‘gulp’); – importuje modul gulp.
  • gulp.task(‘ahoj‘, function(done) { – definuje úlohu, která bude dostupná z příkazového řádku.
  • console.log(‘Ahoj světe!’); – jednoduše vytiskne na obrazovku „Hello world! “.
  • done(); – tuto funkci zpětného volání používáme k instruování hltu, že naše úkoly skončily.

Výše uvedené bylo samozřejmě jen příkladem, který ukazuje, jak lze uspořádat gulpfile.js. Chcete-li zobrazit dostupné úlohy z gulpfile.js, můžete použít následující příkaz:

gulp --tasks

Zásuvné moduly Gulp

Gulp má k dispozici tisíce pluginů, z nichž všechny poskytují různé funkce. Můžete je zkontrolovat na stránce pluginu Gulp.

Níže použijeme plugin minify-html v praktičtějším příkladu. Pomocí níže uvedené funkce můžete minifikovat soubory HTML a umístit je do nového adresáře. Nejprve však nainstalujeme plugin gulp-minify-html:

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

Svůj gulpfile.js můžete upravit takto:

cat gulpfile.js
Ukázkový výstup
// 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()
});

Potom můžete minifikovat soubory HTML pomocí následujících příkazů.

gulp minify-html
du -sh /src dest/

Závěr

Gulp je užitečná sada nástrojů, která vám může pomoci zvýšit produktivitu. Pokud vás tento nástroj zaujal, vřele vám doporučuji zkontrolovat jeho stránku s dokumentací, která je k dispozici zde.