Gulp.js - nástroj pro automatizaci úkolů

Ušetřete čas s nástrojem Gulp.js a neopakujte dokola pořád ty samé úkoly

Gulp.js je nástroj pro automatizaci úkolů, na který většina vývojářů přechází z Grunt.js :-) Pokud jste ještě nevěděli ani o jednom takovém nástroji, pak doporučuji se rozhodnout právě pro Gulp, kde je nastavení úloh jednoduché a více logické. Gulp Vám díky úlohám pomůže zautomatizovat proces vývoje například tím, že bude kontrolovat co píšete do CSS a JavaScript souborů, kompilovat soubory z CSS preprocesorů (LESS, SASS, Stylus) do CSS, překompilovávat CoffeeScript do čistého JavaScrptu, spojovat soubory, minifikovat, generovat dokumentaci podle JSDoc a nebo dokonce synchronizovat prohlížení projektu ve více prohlížečích a simulátorech tak, že se budete věnovat jen upravovanému souboru a po jeho uložení se stránky aktualizují ve všech oknech, a to je super třeba pro responsivní web!

Instalace Gulp.js a jeho první vyzkoušení

  1. Stáhněte a nainstalujte node.js pro Váš operační systém.
  2. Otevřete si příkazovou řádku (klávesa Win + R, napište cmd a potvrďte).
  3. Globálně nainstalujte Gulp příkazem npm install -g gulp
  4. Vytvořte si novou složku pro projekt, například v umístění C:/www/HelloWorld a v příkazové řádce se  do ní přepněte pomocí cd C:/www/HelloWorld
  5. Příkazem npm init vytvořte díky průvodci soubor package.json obsahující informace o projektu a seznam závislostí (v posledním kroku potvrdíte napsáním yes).
  6. Příkazem npm install gulp --save-dev zaneste Gulp do Vašeho projektu. Příznakem --save-dev řeknete, že se má (plugin) uložit jako závislost projektu, zkontrolovat můžete v souboru package.json v sekci devDependencies
  7. Do projektu přidejte plugin browser-sync, příkazem npm install browser-sync --save-dev
  8. Na stejné úrovni jako je soubor package.json vytvořte nový soubor gulpfile.js a do něj zkopírujte následující řádky:

    var gulp = require('gulp');
    var browserSync = require('browser-sync');

    var cssFiles = 'css/*.css';

    gulp.task('browser-sync', function() {
        browserSync.init(null, {
            proxy: "hello-world.dev"
        });
    });


    gulp.task('css', function () {
        gulp.src(cssFiles)
            .pipe(browserSync.reload({stream:true}));
    });


    gulp.task('default', ['browser-sync'], function () {
        gulp.watch(cssFiles, ['css']);
    });

  9. Vytvořte soubor index.html, který bude používat nějaký CSS sobor umístěný ve složce css. Na adresář HelloWorld nastavte virtual host tak, aby se zobrazil index.html po zadání adresy hello-world.dev

  10. V příkazové řádce stačí už jen spustit příkaz gulp, automaticky se otevře okno prohlížeče, které zobrazí obsah souboru index.html, teď už jen stačí měnit obsah CSS souboru a stránka se bude sama aktualizovat. Můžete zkopírovat adresu z prohlížeče do jiného okna, které bude menší, můžete mít otevřeno více oken a po jednom uložení editovaného CSS souboru se stránky aktualizují ve všech oknech, paráda!

Zajímavé pluginy pro Gulp

Gulp podporuje spoustu pluginů, vybral jsem některé zajímavé, které sám používám:

Komentáře