Grunt JS – frontendistův pomocník – 1.díl

2.10.2014

Instalace a první úloha

GRUNT – The JavaScript Task Runner

Jedná se o automatizační nástroj pro vývojáře, který funguje na základě úloh. Pro frontendistu to může v znamenat kompilaci LESS/SASS/STYLUS do css, minifikaci nebo spojování souborů. Úloh, které je možné automatizovat, je opravdu hodně a nejedná se pouze o nástroj zaměřený na webový frontend. Využití najdou například i vyvojáři aplikací.

 

grunt

 

Jak rozchodit Grunt

Instalace Node.js

Grunt a Grunt pluginy jsou instalovány a řízeny přes npm balíčkovací systém – Node.js. Grunt 0.4.x vyžaduje Node.js minimálně ve verzi 0.8.0. Instalační balíček stáhnete na oficiálním webu a jednoduše nainstalujete. Pokud tápete s instalací (doufám že ne) přikládám video:

Základní Grunt projekt – kompilace LESS souboru

Grunt projekt nastavíte vytvořením dvou souborů package.json a Gruntfile.js v rootu vašeho projektu. Tyto dva soubory si nyní popíšeme.

package.json – konfigurační soubor popisující instalované Node.js balíčky, název a verzi. Dále může obsahovat například jméno autora, licenci atd.

Vypadá asi takto:

{
"name": "kompilace_less",
"version": "0.1.0",
"description": "Příklad kompilace LESS souboru pomocí Gruntu",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-less": "~0.11.4"
},
"author": "lukaspavel.cz",
"license": "GNU"
}

Gruntfile.js – javascriptový soubor, kde nastavujeme samotné úlohy. Skládá se z:

Pro náš příklad bude vypadat takto:

module.exports = function (grunt) { // obalovací funkce
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'), // cesta ke konfiguračnímu package.json
        // kompilace LESS souboru
        less: { // název úlohy a její nastavení
            dev: {
                files: {
                    "www/css/style.css": ["www/css/style.less" ]
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less'); // chci načíst balíček grunt-contrib-less

    grunt.registerTask('default', ['less']); // registrace defaultní úlohy
};

Nyní máme vše připraveno k instalaci Gruntu do projektu a spuštění naší první úlohy.

Spuštění Gruntu

  1. Nad složkou projektu spustíme příkazový řádek např.: C:\xampp\htdocs\priklad>
  2. Do příkazové řádky napíšeme npm install. V tuto chvíli se nám nainstalují balíčky zadané v package.json
  3. Poté již stačí zadat grunt – tím spustíme naší defaultní úlohu a proběhne kompilace LESS souboru style.less

Toto je asi úplný základ využití Gruntu na webovém frontendu. V dalších článcích Vám ukážu jaké úlohy využívám. Zaměříme se například na sledování změn, nebo live-reolading.

Popisovaný příklad můžete stáhnout zde

 

Zdroje a další informace:

Lukáš Pavel

HTML/CSS kodér na volné noze

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

Líbí se Vám článek? Sdílejte ho.
1 Comment

Warning: call_user_func() expects parameter 1 to be a valid callback, function 'simplestyle_comment' not found or invalid function name in /data/web/virtuals/72083/virtual/www/blog/wp-includes/comment-template.php on line 1694

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*


two × 4 =


Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>