Grunt - pravá ruka frontend kodéra

Kódování webů prošlo v posledních letech velkým vývojem. Kompilujeme kaskádové styly z preprocesorů LESS nebo SASS. CSSka členíme atomicky do komponent a doplňujeme podporu pro různé prohlížeče přes prefixy. Javascripty a jejich knihovny spojujeme a minifikujeme pro zmenšení zátěže na server. Nástup formátu SVG umožnil vkládat vektorové obrázky přímo do obsahu webu. A v neposlední řadě použití nejrůznějších lokalních serverů, které nám pomáhání při real-time ladění webových šablon.

V tomto článku bych se podělil rád o své odzkoušené workflow použití nástroje Grunt. Workflow se krystalizuje téměř dva roky a dodnes jej vylepšují pro nejlepší a nejefektivnější použití.

Co to vlastně Grunt je?

Grunt je dle oficiálního zdroje ekosystem pro usnadnění běhu automatických operaci a je to plugin nástroje npm, který běží na lokáním počítači. Existuje pro něj několik stovek rozšíření pro práci při kódování webových šablon. Pro nás to znamená především použití preprocesorů, spojování a optimalizace kaskádových stylů, javascriptů, obrázků a běh samotného lokálního serveru.

Browsersync

V mém workflow použivám skvělý nástroj browsersync, který automaticky vytvoří na počítači lokální server a dokonce se postará o nastavení externí IP adresy, abychom mohli přistupovat k šablonám i z jiných zařízení v dané síti. Plugin watch hlídá změny v less a js souborech a ihned provede soustavu ukolů, které provedou kompilaci, optimalizaci a minifikaci souborů. Následně provede automaticky reload stránky a my vidíme výsledek v mžiku oka. Jak moje nastavení gruntu postupuje je naznačeno v jednoduchém diagramu.

Instalace a spuštění npm a gruntu

Pro použití gruntu je nutno nainstalovat node.js. V případě, že nevíte jak npm nainstalovat postupujte pomoci oficiální dokumentace zde. Ve zkratce jde o instalaci v příkazové řádce nebo konzoli. Je dobré spouštět příkazy přímo nad pracovní složkou, ve které budeme budovat náše webové šablony. Nejprve musíme nainstalovat npm:

npm install -g grunt-cli

Následně si vytvoříme v pracovní složce soubor package.json, kde nakonfigurujme základní parametry a knihovny které grunt použije:

{
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-autoprefixer": "*",
    "grunt-contrib-concat": "*",
    "grunt-contrib-cssmin": "*",
    "grunt-contrib-less": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "matchdep": "*",
    "grunt-browser-sync": "*"
  }
}

Spustíme příkaz pro instalaci projektu grunt a instalaci knihoven:

npm i

Dále musíme vytvořit konfiguraci samotného gruntu vytvořením souboru Gruntfile.js. Základní stavba obsahu souboru vypadá následovně:

module.exports = function (grunt) {
 
   require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
   grunt.initConfig({
 
       autoprefixer: {
           dist: {
               src: ['www/css/main.css'],
               dest: 'www/css/main.css'
           },
           options:{
               browsers: ['> 10%']
           }
       },
 
       uglify: {
           options: {
               mangle: false
           },
           my_target: {
               files: {
                   'www/js/main.js': ['www/js/main.min.js']
               }
           }
       },
 
       cssmin: {
           target: {
               files: {
                   'www/css/main.min.css': ['www/css/main.css']
               }
           }
       },
 
       concat: {
           dist: {
               src: [
                   'bower_components/jquery/dist/jquery.min.js',
                   'bower_components/jquery-unveil/jquery.unveil.min.js',
                   'js/main.js'
               ],
               dest: 'www/js/main.min.js'
           }
       },
 
       less: {
           development: {
               files: {
                   "www/css/main.css": ['less/main.less']
               }
           }
       },
 
       watch: {
           less: {
               files: ['less/*.less'],
               tasks: ['less','autoprefixer','cssmin']
           },
           js:{
               files: [
                   'bower_components/jquery/dist/jquery.min.js',
                   'bower_components/jquery-unveil/jquery.unveil.min.js',
                   'js/main.js'
               ],
               tasks: ['concat','uglify']
           }
       },
 
       browserSync: {
           dev: {
               bsFiles: {
                   src : [
                       'www/css/*.css',
                       'www/js/*.js',
                       'www/*.html'
                   ]
               },
               options: {
                   watchTask: true,
                   server: 'www'
               }
           }
       }
   });
 
   grunt.registerTask('default', ['browserSync', 'watch']);
 
};

Nyní máme připraveno vše pro první spuštění gruntu, stačí zadat do příkazové řádky grunt. Ihned se spustí grunt a vytvoří lokální server a následně otevře adresu v prohlížeči.  V příkazové řádce nám napíše údaje o adresách:

Local: http://localhost:3000
External: http://192.168.0.218:3000
 
UI: http://localhost:3001
UI External: http://192.168.0.218:3001

Pokud se vše podaří, kdykoliv změníme less soubor nebo js soubor, tak se vše překompiluje a stránka se nám automatický obnoví.

Pokud zadáme adresu  http://192.168.0.218:3000 do prohlížeče mobilu nebo tabletu, uvidíme opět výsledek naší práce a zároveň se nám výsledek bude při dalších změnách automatický obnovovat. Někdy změna trvá několik sekund, ale pomoc je i tak obrovská.

Přednastavený projekt si můžete stáhnout na githubu.