nav line

Automatizace frontendových úkonů - část 2.

Při práci na frontendu u webintegračního projektu je mnoho opakujících se nebo ne zcela záživných úkonů. Na následujících řádcích si ukážeme několik velmi užitečných nástrojů, které významným způsobem ulehčí a urychlí práci. Mezi tyto nástroje patří Bower, Grun, Gulp a Yeoman.

V předešlé části jsme si vysvětlili, na čem jsou Bower, Grunt, Gulp a Yeoman postaveny a nyní si je tedy již můžeme blíže představit.

Bower

Bower je balíčkovací systém od Twitteru a na rozdíl od balíčkovacího systému npm, který řeší tu “serverovou část”, tak Bower řeší klientské komponenty, jako jsou jQuery, Angular, Bootstrap, apod. Moduly lze procházet na webu bower.io/search/.

Bower je dostupný jako npm modul a protože ho budeme používat na všech projektech, nainstalujeme jej globálně takto:

npm install bower -g

Příkazy na ovládání jsou podobné jako u npm a např. instalace Bootstrapu bude vypadat takto:

bower install bootstrap

bower install bootstrap

Zde je vidět, že modul bootstrap je závislý ještě na jQuery, kterou s to společně s tímto modulem stáhlo do složky bower_components a ze které je možné pak vlastní jQuery nebo Bootstrap začít používat v projektu.

Při instalaci lze opět zadávat přímo názvy modulů, nebo se odkazovat na na url, lokální soubor, git repo, github, atd.

Inicializace nového projektu pak probíhá pomocí příkazu:

bower init

http://bower.io/docs/creating-packages/

Což nám po krátkém dotazníku v projektu vytvoří soubor bower.json (v obdobné struktuře jako je package.json z npm), který nám daný projekt popisuje. Obsah souboru bower.json je vidět v obrázku výše.

Takže pokud dostaneme od někoho nový projekt, tak by měl obsahovat jednak soubor package.json a bower.json, na základě kterých se pak provede instalace daného projektu:

npm install
bower install

a vše potřebné se nám do projektu stáhne. Nutno dodat, že samotný příkaz bower install bootstrap v již existujícím projektu sice do tohoto projektu fyzicky přidá ten bootstrap, ale neprovede aktualizaci souboru bower.json (sekce dependencies). Pokud chceme, aby daný projekt s tímto modulem počítal, tak je nutné ještě přidat parametr --save.

Grunt

Grunt „The JavaScript Task Runner“ je robot, který automatizuje úkoly na frontendu a umožňuje tak např. automatickou minifikaci CSS, JavaScriptu, převod preprocesorového kódu (LESS, SASS, …) do CSS, kompilaci Coffee Scriptu do JavaScriptu a další. Modulů pro Grunt existují tisíce a lze jimi provádět celou řadu zajímavých věcí:

Instalaci samotného Gruntu provedeme standardně pomocí npm:

npm install -g grunt-cli

Pro práci s Gruntem jsou klíčové dva soubory - package.json a tzv. Gruntfile (Gruntfile.js popř. Gruntfile.coffee). V již existujícím projektu budou oba soubory již existovat, takže stačí pouze doinstalovat závislosti pomocí npm install. V novém projektu si soubor package.json můžeme vytvořit buď ručně, pomocí příkazu npm init nebo pomocí grunt-init templaty.

Pak pomocí npm nainstalujeme mezi tzv. devDependencies samotný Grunt a jeho moduly, např. modul uglify, který slouží pro minifikaci JavaScriptu, takto:

npm install grunt-contrib-uglify --save-dev

Gruntfile

Gruntfile (Gruntfile.js popř. Gruntfile.coffee) je soubor, ve kterém jsou nakonfigurovány jednotlivé Grunt úkoly.

module.exports = function(grunt) {

  //načtení package.json
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    //definice modulu uglify - pro minifikaci JavaScriptu
    uglify: {
    options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
    },
    dist: {
    files: {
      'js/input.min.js': ['js/input.js']
    }
    }
    },

    //definice modulu watch - který hlídá změny js souborů a provádí s nimi minifikaci
    watch: {
    files: ['js/*.js'],
    tasks: ['uglify']
    }
  });

  //načtení Grunt modulů, které potřebujeme
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  //zaregistrování defaultního tasku, ktery se provádí po zadaní příkazu grunt v příkazovém rádku
  grunt.registerTask('default', ['watch']);

};

V příkladu výše je vytvořen jednoduchý Gruntfile s dvěma moduly (uglify a watch), přičemž jeden modul (watch) je přidán do defaulního úkolu Gruntu a spustí se zadáním příkazu grunt v příkazovém řádku. Tento úkol hlídá změny v javascriptových souborech a pokud k nějaké změně dojde, tak pustí modul uglify, který vezme soubor input.js a minifikuje jej jako soubor input.min.js. Uglify úkol můžeme také pustit samostatně z příkazového řádku jako grunt uglify.

Gulp

Gulp dělá obdobnou práci jako Grunt. Jen jde trochu jinou cestou. Zatímco Grunt klade důraz na konfigurovatelnost, takže je vhodnější pro uživatele, kteří chtějí spíše konfigurovat, než psát vlastní kód. Gulp jde cestou psaní vlastního kódu. Existuje celá řada modulů, ale není jich toliko jako pro Grunt. Gulp jich totiž ani tolik nepotřebuje, protože na to, co v Gulpu potřebujete modul, to si můžete pomocí Gulpu napsat sami. Gulp se také zaměřuje více na rychlost i když tu lze zlepšit i v Gruntu pomocí modulu jit-grunt, což je modul, který se stará o načítání jiných modulů až jsou potřeba.

Dalším rozdílem mezi Gruntem a Gulpem je přístup ke zpracování souborů. Zatím co v Gruntu vidíte jednotlivé mezikroky při například slučování a minifikaci JavaScriptu, tak v Gulpu se pracuje s tzv. Node.js streamy, kdy už na disku nevznikají mezivýsledky, ale data se mezi jednotlivými úkoly předávají prostřednictvím pipeline.

Instalaci samotného Gulpu provedeme standardně pomocí npm:

npm install -g gulp

Pro práci s Gulpem jsou klíčové také dva soubory - package.json a tzv. Gulpfile (Gulpfile.js), je to tedy obdobné jako v Gruntu, včetně instalace modulů pro Gulp.

Gulpfile

//načtení samotného Gulpu do objektu s názvem gulp
var gulp = require('gulp');

//načtení modulu watch
var watch = require('gulp-watch');

//vytvoření nového úkolu “test”, který jen vypíše do příkazového řádku text
gulp.task('test', function() {
  console.log('Hello, this is test ...');
});

//vytvoření nového “defaultního” úkolu, který kontroluje obsah složky input a pokud v ní je vytvořen nebo změněn soubor, tak jen překopíruje do složky output
gulp.task('default', function() {
  gulp.src('input/*')
    .pipe(watch())
    .pipe(gulp.dest('output/'))
});

Tento jednoduchý příklad ukazuje dva úkoly, jeden s názvem test a druhý defaultní. Defaultní úkol spustíme zapsáním příkazu gulp do příkazového řádku. Defaultní úkol využívá modul gulp-watch. Úkol “test” spustíme příkazem gulp test. Z tohoto kódu je patrný rozdíl mezi soubory Gruntfile a Gulpfile a také proč si uživatelé Gulpu vystačí s méně moduly.

Yeoman

Yeoman se stará o generování kódu dle předem daných šablon (scaffolding). A nemluvíme zde o šablonách ve smyslu textových souborů, ale o jakémsi “mustru” nebo vzoru, dle kterého se nám vygenerují základ naší aplikace nebo jen její část. Dokážeme si takto např. vygenerovat základ Wordpress webu, AngularJS aplikace, apod.

Instalaci provedeme následovně:

npm install yo -g

Dále ještě potřebujeme tzv. generátor, který říká, co se kde má a jak vytvořit. Lze využít nějaký již předpřipravený generátor, nebo si jej vytvořit svépomocí.

Užitečné nástroje - alternativa k příkazovému řádku

Pokud nejste příznivci příkazového řádku, mám pro vás dobrou zprávu. Bower, Grunt i Gulp jsou podporovány nativně v IDE Webstorm (PhpStorm) a lze tak projekty využívající tyto nástroje spravovat přímo v IDE. Lze jednoduše spravovat moduly, jen se neobejdete od ruční editace příslušného Gruntfile popř. Gulpfile.
Zajímavé odkazy s ukázkami práce s těmito nástroji:

Závěr

Použití těchto nástrojů přináší velké ulehčení a zrychlení práce webového vývojáře a ulehčuje a hlavně sjednocuje práci v týmu, protože jednotlivé konfigurační soubory se verzují (na rozdíl od samotných modulů), takže jednotné nastavení se sdílí napříč celým týmem a nemusíte se tak bát, že každý vývojář vytvoří např. ze SASSu jiné CSS nebo že v JavaScriptu budou nějaké problémy, pokud celý tým použije JSHint.

Ohodnoťte článek

Automatizace frontendových úkonů  - část 2.

Související články

Vyhledávání na blogu

Webová integrace

Webová integrace jako nová oblast pro business „velkých" webových agentur.

o webové integraci

Profily blogujících