Jak automatizovat všechny věci pomocí Gulp

Už vás někdy nebavilo mačkat klávesu F5 příliš často? Jo, chápu tu bolest. Zde se projevuje automatizace úkolů. Psaní skriptů pro nepřetržité zpracování časově náročných úkolů, které skutečně potřebujete ve vývojovém pracovním postupu. Tady na mě nebuď chladný. Je to mnohem méně děsivé, než to zní. Věř mi. Jakmile to pochopíte, už nikdy nebudete chtít psát kód bez toho.

Tak proč Gulp? Protože úkoly píšete se svým nejlepším kamarádem, obyčejným starým JavaScriptem. Lepší už to nebude.

gulp.js

Vyhození Hvězdy smrti.

Přichází Gulp. Hrdina, kterého potřebujete a který si rozhodně zasloužíte. Existuje několik klíčových funkcí týkajících se použití Gulpu, které by vás přiměly jej používat. Ten, který považuji za nejdůležitější, je způsob, jakým dokáže simulovat prostředí serveru, kde budete nakonec hostovat svůj kód. To zahrnuje přesouvání souborů v adresáři projektu a co je důležitější jejich umístění do adresáře pro vývoj kde budete provozovat webový server. Gulp vám také umožňuje kompilovat , minifikovat a zřetězit libovolné soubory, které chcete. To vše s jediným cílem snížit stopu vaší kódové základny na absolutní minimum. V tomto procesu je připraven k odeslání do výroby . Je naprosto v pořádku, pokud neznáte žádný z výše uvedených výrazů, projdeme si je podrobněji o něco níže.

TLDR;

Můžete vážně zranit mé city tím, že budete číst pouze tuto TLDR; nebo buďte místo toho úžasní a přečtěte si celý článek. Bavte se!

1. Tři hlavní příkazy Gulp:gulp.task, gulp.src, gulp.dest.
2. potrubí je zatraceně úžasné! Metoda pipe() je zabudována do Node.js a používá se ke kopírování souborů z jedné složky do druhé.
3. Mají logickou strukturu složek se třemi hlavními složkami. src složka pro předem zpracované soubory, tmp pro server místního vývoje a dist pro zpracované a minifikované soubory.
4. Vytvořte samostatné úlohy pro propojení souborů HTML, CSS a JavaScript z src na  tmp .
5. Zkombinujte úlohy HTML, CSS a JavaScript do jedné hlavní „kopie“ úkol. To vám umožní zkopírovat všechny soubory jediným příkazem.
6. Po zkopírování všech souborů na ně chcete automaticky odkazovat ve svém hlavním index.html . To se provádí pomocí „injekce“ úkol a nazývá se injekční závislosti.
7. Když jsou soubory zkopírovány a vloženy, je čas spustit vývojový server na tmp složka.
8. Když je server spuštěn, sledujete pro změny a povolit živé opětovné načítání na místním vývojovém serveru.
9. Jste spokojeni se svým kódem? Pokračujte a „stavte“ produkční soubory a umístěte je do vzdálenosti adresář.
10. Smazat tmp a vzdálenost před odesláním na GitHub. (Nebo je prostě přidejte do svého .gitignore)
11. Kód, který budete psát během tohoto výukového programu, je na GitHubu a bude uveden ve spodní části článku. Promiňte, ale musíte se posunout dolů. :)

Nainstalujte nástroje

Nejprve budete muset mít na svém počítači nainstalovaný Node. Chcete-li zkontrolovat, zda ano, otevřete příkazový řádek a zadejte uzel -v. Číslo verze Node, kterou jste nainstalovali, se zobrazí jako výstup na příkazovém řádku. Pokud ne, nemáte na svém počítači nainstalován Node. Nebojte se, přejděte na oficiální stránky Node a začněte.

Stáhněte si Node.js

Vše hotovo? Nyní jste připraveni nainstalovat potřebný nástroj týkající se skutečné automatizace úloh. Vraťte se do příkazového řádku a spusťte:

npm install -g gulp

Poznámka:Uživatelé systémů Linux a Mac budou pravděpodobně muset tento příkaz spustit pomocí sudo , abyste povolili požadovaná oprávnění.

Nyní jste na svůj počítač nainstalovali Gulp globálně. Tento krok je důležitý, protože je nutné, aby byl Gulp viditelný na příkazovém řádku bez ohledu na to, ve kterém adresáři se nacházíte. Technickějším vysvětlením by bylo, že Gulp byl nyní přidán do  PATH .

Nyní jste připraveni začít s psaním úkolů.

Představte se

Existují tři hlavní příkazy, které Gulp poskytuje:

• gulp.task – definuje novou úlohu a dá jí název, pole závislostí a funkci zpětného volání, která bude volána při spuštění úlohy.
• gulp.src – Nastaví zdrojovou složku, kde jsou umístěny soubory.
• gulp.dest – Nastaví cílovou složku, do které budou umístěny soubory.

Páteř používání Gulp vůbec spočívá v interakci mezi gulp.src a gulp.dest s metodou .pipe jako mostem.

Metoda .pipe je výchozí metodou v Node.js. Abychom se tímto konkrétním tématem nezabývali hlouběji, považujte ji za prostředek ke kopírování souborů z jednoho adresáře do druhého.

Co to znamená?

Gulp sám o sobě poskytuje pouze základ potřebný pro automatizaci úloh. Převážná část práce, kterou byste potřebovali ve vývojovém pracovním postupu, spočívá v rozsáhlých zásuvných modulech vytvořených pro Gulp. Bez nich máte jen skořápku. Samozřejmě si můžete napsat vlastní, ale více než 3000 je k dispozici ke stažení na npm , nedoporučoval bych to. Neobjevujte znovu kolo. Použijte zdroje, které již máte k dispozici. Neváhejte se podívat sem, nebo si vygooglujte cokoli a staňte se svědky kouzla.

Dětské krůčky

Pojďme naprogramovat velmi základní páteř, abychom si omotali hlavu kolem konceptu. V tomto článku budeme postupně postupovat dále.

Nejprve vytvořte nový adresář a dejte mu super inspirativní název, něco jako super-úžasný-gulp-tutorial mělo by to být v pořádku. Jakmile to uděláte, otevřete příkazový řádek v tomto adresáři. As Gulp je balíček na npm budete muset inicializovat npm mít odkaz na správce balíčků.

Neznáte npm – the Node Package Manager ? Podívejte se sem.

npm

Poté, co to uděláte, budete také muset nainstalovat Gulp lokálně. Proč? Gulp vždy použije místní verzi sebe sama ve složkách projektu.

npm init
npm install gulp --save-dev

Instalace pomocí --save-dev flag jej zahrne do package.json pod vývojovými závislostmi. Skvělá práce, jste připraveni na nějaký kód? Pojďme do toho. Vytvořte nový soubor, pojmenujte jej gulpfile.js . Tento soubor je vstupním bodem pro Gulp, zde budete psát veškerý kód pro automatizaci úkolů. Pokračujte a napište to do gulpfile.js :

var gulp = require('gulp');

gulp.task('default', function () {
  console.log('Hello World!');
});

Gratulujeme. Právě jste napsali svůj první úkol Gulp. Vsadím se, že vám to připadá povědomé, posluchač událostí následovaný funkcí zpětného volání. Pojďme si to vyzkoušet. Přejděte zpět na příkazový řádek a zadejte:

gulp

Stiskněte Enter a uvidíte něco takového, abyste se přihlásili zpět do příkazového řádku:

[19:41:16] Using gulpfile ~/super-awesome-gulp-tutorial/gulpfile.js
[19:41:16] Starting 'default'...
Hello World!
[19:41:16] Finished 'default' after 162 μs

Použitím klíčového slova gulp jste řekli Gulpu, aby interpretoval konkrétní úkol, a protože za klíčovým slovem nebylo nic napsáno, ‘default‘ úkol byl spuštěn. Řekněme, že máte úkol s názvem ‘ sestavit ' a chcete jej spustit. Zápis sestavení gulp spustí tento konkrétní úkol Gulp. Můžete dokonce spouštět více úloh, což je také naprosto v pořádku. Vypadá to takto.

gulp sometask anothertask

Sledovali jste spolu? Skvělé, nyní jste připraveni naprogramovat nějaké vážné věci. Pojďme vytvořit a spustit vývojové prostředí.

Plný hackerský režim, ZAPNUTO

Začnu nastíněním základní struktury složek ukázkového projektu. Jedním z mnoha osvědčených postupů je mít tři hlavní složky, src pro všechny zdrojové soubory dist pro svázané a minifikované soubory a nakonec tmp adresář, který bude použit jako karanténa pro náš místní webový server.

• src  – zdrojové soubory, předzpracované, neminifikované.
• tmp „Vývojové soubory, předzpracované, neminifikované. Adresář, ve kterém budete provozovat webový server.
• vzdálenost „Výrobní soubory, zpracované, minifikované.

Vytvořte src složku, ale nedělejte to vytvořit vzdálenost ani tmp složka ještě. O něco níže uvidíte, jak jej můžete vytvořit dynamicky a začlenit do automatizovaného úkolu. Pojďme přidat nějaké soubory do src složku, abych si konečně měl s čím hrát. index.html , script.js a style.css by mělo být více než dost. Ty budou sloužit jako vaše zdrojové soubory, jediné soubory, které budete upravovat. Gulp zvládne vše ostatní.

Začněme s hltem všech věcí!

Krok 1 – – Nastavte strukturu složek

Nejprve potřebujete cesty proměnnou pro uložení všech cest k souborům a adresářům vašeho projektu. Umístěte to přímo pod místo, kde jste potřebovali doušek.

// gulpfile.js
var gulp = require('gulp');
var paths = {
  src: 'src/**/*',
  srcHTML: 'src/**/*.html',
  srcCSS: 'src/**/*.css',
  srcJS: 'src/**/*.js',

tmp: 'tmp',
  tmpIndex: 'tmp/index.html',
  tmpCSS: 'tmp/**/*.css',
  tmpJS: 'tmp/**/*.js',

dist: 'dist',
  distIndex: 'dist/index.html',
  distCSS: 'dist/**/*.css',
  distJS: 'dist/**/*.js'
};

gulp.task('default', function () {
  console.log('Hello World!');
});

Zadání části /**/* je ekvivalentní zahrnutí všech souborů ve složce a všech možných podsložkách.

Krok 2 – – – Nastavte úlohu HTML

Nyní je třeba vytvořit úlohu pro zkopírování všech HTML souborů z src adresáře do tmp adresář, kde budete webový server provozovat.

gulp.task('html', function () {
  return gulp.src(paths.srcHTML).pipe(gulp.dest(paths.tmp));
});

Krok 3 – – – Nastavte úlohu CSS

Totéž pro soubory CSS.

gulp.task('css', function () {
  return gulp.src(paths.srcCSS).pipe(gulp.dest(paths.tmp));
});

Krok 4 – – Nastavte úlohu JavaScript

Ano, to samé pro soubory JavaScript.

gulp.task('js', function () {
  return gulp.src(paths.srcJS).pipe(gulp.dest(paths.tmp));
});

Krok 5 – Sloučení všech úkolů do jednoho úkolu

Tato část je zábavná. Gulp vám umožňuje kombinovat úkoly a přidávat úkoly k jiným úkolům jako závislosti. Tato funkce je neuvěřitelně užitečná, protože můžete Gulpu říct, aby spustil a dokončil určité úkoly ještě před zahájením jiných úkolů.

gulp.task('copy', ['html', 'css', 'js']);

Vyzkoušet to! Zde je to, co uvidíte po spuštění funkce gulp copy.

[19:39:08] Using gulpfile ~/super-awesome-gulp-tutorial/gulpfile.js
[19:39:08] Starting 'html'...
[19:39:08] Starting 'css'...
[19:39:08] Starting 'js'...
[19:39:08] Finished 'css' after 19 ms
[19:39:08] Finished 'html' after 30 ms
[19:39:08] Finished 'js' after 18 ms
[19:39:08] Starting 'copy'...
[19:39:08] Finished 'copy' after 4.67 μs

Přejděte zpět do složky projektu a podívejte se. Nyní máte tmp adresář. Vznikl dynamicky. Kouzlo! (Dělám si srandu, opravdu ne.)

Soubor tmp adresář obsahuje stejné soubory, jaké máte v src adresář. Příkaz .pipe() zkopíroval soubory ze zdroje do daného cíle.

Krok 6 – – vložení souborů do souboru index.html

co to je No, zkopírovali jste soubory do tmp složku. Nyní musíte sdělit index.html na které soubory CSS a JavaScript chcete odkazovat. To se provádí docela snadno pomocí zásuvného modulu Gulp s názvem gulp-inject. Pokračujte skokem zpět na příkazový řádek a spusťte:

npm install gulp-inject --save-dev

Nyní je třeba přidat odkaz do index.html kam chcete soubory vložit.

<!DOCTYPE html>
<html>
  <head>
    <!-- src/index.html -->

    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>

<!-- inject:js -->
    <!-- endinject -->
  </body>
</html>

Po spuštění gulp-inject budou mezi těmito komentáři soubory. Mějte na paměti, že musí vypadat přesně tak, jak je napsáno výše.

Přejděte zpět na gulpfile.js a přidejte toto:

var inject = require('gulp-inject');

Mějte na paměti, že jste již přidali odkaz na soubory ve složce tmp. Mělo by to vypadat takto:

var paths = {
  src: 'src/**/*',
  srcHTML: 'src/**/*.html',
  srcCSS: 'src/**/*.css',
  srcJS: 'src/**/*.js',

tmp: 'tmp', // tmp folder
  tmpIndex: 'tmp/index.html', // index.html in tmp folder
  tmpCSS: 'tmp/**/*.css', // css files in tmp folder
  tmpJS: 'tmp/**/*.js', // js files in tmp folder

dist: 'dist',
  distIndex: 'dist/index.html',
  distCSS: 'dist/**/*.css',
  distJS: 'dist/**/*.js'
};

Nyní jste připraveni přidat další úkol k vložení souborů.

gulp.task('inject', ['copy'], function () {
  var css = gulp.src(paths.tmpCSS);
  var js = gulp.src(paths.tmpJS);
  return gulp.src(paths.tmpIndex)
    .pipe(inject( css, { relative:true } ))
    .pipe(inject( js, { relative:true } ))
    .pipe(gulp.dest(paths.tmp));
});

Podívejte se na tohle. Přidali jste „kopii“ úkol jako závislost pro ‘inject’ úkol. Gulp nejprve zkopíruje všechny soubory do tmp adresář, teprve potom provede injekci. Pojďme to rozebrat. Vkládáte gulp.src souborů zkopírovaných do tmp složky do dvou příslušných proměnných. Jeden pro CSS, druhý pro soubory JavaScript. V příkazu return uchopíte index.html který již byl přenesen do tmp pomocí „kopie“ task a .pipe() funkce inject() s proměnnými, kam jste umístili příslušné soubory z tmp adresář. Druhý parametr, který předáte funkci inject(), je objekt options. Relativní:true zde znamená, že cesty k souboru, na které se má odkazovat v index.html bude relativní. Tohle chceš. Věř mi. Ušetří vám to spoustu bolesti hlavy.

Přepněte zpět na příkazový řádek a spusťte gulp inject. index.html ve vašem tmp adresář by nyní měl vypadat takto.

<!DOCTYPE html>
<html>
  <head>
    <!-- tmp/index.html -->

    <!-- inject:css -->
    <link rel="stylesheet" href="style.css">
    <!-- endinject -->
  </head>
  <body>

<!-- inject:js -->
    <script src="script.js"></script>
    <!-- endinject -->
  </body>
</html>

Krok 7 – – Obsluha vývojového webového serveru

Vsadím se, že byste rádi viděli plody své práce. já bych taky. Pojďme spustit server, který uhasí tu žízeň.

Pokračujte, přepněte zpět na příkazový řádek a spusťte:

npm install gulp-webserver --save-dev

Toto je zásuvný modul Gulp, který vám umožňuje provozovat webový server na vašem místním počítači. Přesně to, co potřebujete. Až ji nainstalujete, pokračujte a vyžadujte ji v horní části souboru gulpfile.js .

var webserver = require('gulp-webserver');

Skvělý! Pojďme získat ‘servis úkol zakódován.

gulp.task('serve', ['inject'], function () {
  return gulp.src(paths.tmp)
    .pipe(webserver({
      port: 3000,
      livereload: true
    }));
});

Opět musíte zahrnout závislost. Zde chcete „injekci“ úkol dokončit před spuštěním webového serveru. Stačí odkazovat na tmp a .pipe() jej na webový server. Zásuvný modul gulp-webserver bere jako parametr objekt options. Budete muset zadat port, na kterém poběží, a sdělit serveru, aby se znovu načetl, pokud zjistí nějaké změny. Až si na tohle zvyknete. Není cesty zpět.

Pojďme to otestovat. Přidejte několik řádků kódu do souborů v src adresář. Zde je jednoduchý příklad:

index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>
    <div class="awesome">This is awesome!</div>

<!-- inject:js -->
    <!-- endinject -->
  </body>
</html>

style.css

.awesome {
  color: red;
}

script.js

console.log('Awesome!');

Skočte zpět na příkazový řádek a spusťte gulp serve. Měli byste vidět, že se vám to znovu přihlásí.

[23:50:44] Using gulpfile ~/super-awesome-gulp-tutorial/gulpfile.js
[23:50:44] Starting 'html'...
[23:50:44] Starting 'css'...
[23:50:44] Starting 'js'...
[23:50:44] Finished 'html' after 30 ms
[23:50:44] Finished 'js' after 19 ms
[23:50:44] Finished 'css' after 22 ms
[23:50:44] Starting 'copy'...
[23:50:44] Finished 'copy' after 4.77 μs
[23:50:44] Starting 'inject'...
[23:50:44] gulp-inject 1 files into index.html.
[23:50:44] gulp-inject 1 files into index.html.
[23:50:44] Finished 'inject' after 16 ms
[23:50:44] Starting 'serve'...
[23:50:44] Webserver started at http://localhost:3000
[23:50:44] Finished 'serve' after 18 ms

Spuštěním úlohy obsluhy byly nejprve spuštěny všechny úlohy zadané jako závislosti. Přesně to, co chcete. Přejděte do svého prohlížeče a otevřete http://localhost:3000. Doufejme, že něco takového uvidíte.

Krok 8 – Sledujte změny

Sledování změn znamená, že Gulp bude neustále kontrolovat změny mezi vašimi soubory. Musíte pouze určit, které soubory má sledovat.

gulp.task('watch', ['serve'], function () {
  gulp.watch(paths.src, ['inject']);
});

„hodinky“ úkol nejprve počká na „slouží“ úkol dokončit, teprve potom začne sledování. Řeknete Gulpovi, aby sledoval soubory v src adresář. Pokud zaznamená nějaké změny, spustí ‘injekci Úkol doušek. Kdykoli nyní uložíte změny v jakémkoli ze zadaných souborů, Gulp spustí „injekci“ úkol. Úžasné věci! Můžete dokonce pokračovat a propojit „hodinky“ úkolu na výchozí úkol.

gulp.task('default', ['watch']);

Nyní stačí spustit gulp, který zase spustí všechny úlohy, které jste již vytvořili. Hádám, že jsi všechny věci právě vypil.

Krok 9 – sestavení vzdálenosti

Se spuštěným vývojovým prostředím jste se dostali do bodu, kdy chcete zabalit své soubory, aby byly připraveny k produkci. Zde je místo, kde Gulp skutečně protahuje svaly. Pokračujte a nainstalujte následující zásuvné moduly Gulp.

npm install gulp-htmlclean --save-dev
npm install gulp-clean-css --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev

A vyžadovat je v horní části gulpfile.js .

var htmlclean = require('gulp-htmlclean');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

Nyní můžete znovu použít většinu již napsaných úkolů k vytvoření úkolů sestavení.

gulp.task('html:dist', function () {
  return gulp.src(paths.srcHTML)
    .pipe(htmlclean())
    .pipe(gulp.dest(paths.dist));
});

gulp.task('css:dist', function () {
  return gulp.src(paths.srcCSS)
    .pipe(concat('style.min.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest(paths.dist));
});

gulp.task('js:dist', function () {
  return gulp.src(paths.srcJS)
    .pipe(concat('script.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(paths.dist));
});

gulp.task('copy:dist', ['html:dist', 'css:dist', 'js:dist']);

gulp.task('inject:dist', ['copy:dist'], function () {
  var css = gulp.src(paths.distCSS);
  var js = gulp.src(paths.distJS);
  return gulp.src(paths.distIndex)
    .pipe(inject( css, { relative:true } ))
    .pipe(inject( js, { relative:true } ))
    .pipe(gulp.dest(paths.dist));
});

gulp.task('build', ['inject:dist']);

Přidané zásuvné moduly jsou vloženy mezi příkazy gulp.src a gulp.dest. Vše ostatní zůstává stejné.

Ještě jednu věc k vám přidat index.html :

<!DOCTYPE html>
<html>
  <head>
    <!--[htmlclean-protect]-->
    <!-- inject:css -->
    <!-- endinject -->
    <!--[/htmlclean-protect]-->
  </head>
  <body>
    <div class="awesome">This is awesome!</div>

<!--[htmlclean-protect]-->
    <!-- inject:js -->
    <!-- endinject -->
    <!--[/htmlclean-protect]-->
</body>
</html>

Plug-in htmlclean ve výchozím nastavení vyčistí všechny komentáře z vašich šablon. Toto chování musíte zakázat pouze pro vkládání komentářů.

Pokračujte a spusťte „build“ úkol.

gulp build

Podívejte se do složky projektu. Nyní můžete vidět vzdálenost složku. Soubory uvnitř byly zřetězeny a minifikovány, připraveny k odeslání na produkční server.

Krok 10 – Čištění

Odesílání tmp se nepovažuje za osvědčený postup a vzdálenost složky do GitHubu nebo do jakéhokoli řízení verzí, které možná používáte. Budete potřebovat způsob, jak je bez větších potíží smazat.

npm install del --save-dev

Nainstalujte balíček výše. To vám hodně usnadní život. Vyžadujte jej v horní části gulpfile.js jako tak:

var del = require('del');

A přidejte tento fragment kódu:

gulp.task('clean', function () {
  del([paths.tmp, paths.dist]);
});

Skočte zpět do příkazového řádku a spusťte hlt clean. Sledujte kouzlo. Soubor tmp a vzdálenost složky byly smazány!

Dalším dobrým postupem by bylo přidat tmp a vzdálenost složky do vašeho  .gitignore , ujistěte se, že je rozhodně nikdy neposíláte do svého úložiště GitHub.

Pokud jste vynechali některý z výše uvedených kroků, neváhejte přejít do úložiště GitHubu a popadnout dech. Celá základna kódu je támhle, není třeba si dělat starosti.

Čelil jsi temné straně a stal ses hrdinou. Dobrá práce! Toto bylo „hození vás do hlubokého bazénu“ rychlokurz automatizace úloh. Jsem přesvědčen, že můžete plavat, pokud jste se dostali tak daleko. Zde však nezastavujte. O Gulpu je toho ještě mnohem víc, tohle byl jen začátek. Ale bez ohledu na to je více než dost, abyste mohli začít s vytvářením seriózních aplikací a začít odesílat kód. Nejlepší způsob, jak se něco naučit, je na konkrétních příkladech. Hackujte se a odešlete co nejvíce kódu.

Doufám, že jste se při čtení tohoto článku bavili stejně jako já při jeho psaní.

Tento příspěvek byl původně publikován na medium.com