Grunt – frontendistův pomocník – 2.díl Bootstrap + LESS – kompilace a minifikace

8.10.2014

V minulém díle jsme se společně podívali na základní instalaci Node.js a Gruntu. Poté jsme si vytvořili základní projekt, který budeme dále rozvíjet. V tomto díle se budeme zabývat frameworkem Bootstrap a jeho zapojením do projektu.

 

bootstrap2_logo

 

Rád bych začal použitím Bootstrapu jako takového. Pokud chcete použít Bootstrap na frontend tak zásadně používejte jeho zdrojové kódy v LESS nebo SASS. Není nic horšího pokud přepisujete vygenerované style.css. Naopak pokud ho používáte pro backend (administraci) můžete použít .css soubor.

Já osobně, pokud to jde, používám Bootstrap v LESS. Tzn. stáhnu zdrojové kódy a dám je všechny do složky less. Následně upravuji pouze variables.less, kde jsou všechny proměnné a bootstrap.less, kde jsou importovány jednotlivé komponenty. Ostatní soubory nechávám původní. Následně vytvořím svůj style.less kam naimportuju bootstrap.less. Nyní mám základ pro práci na projektu.
Struktura tedy vypadá takto:

 

clanek_4_1

 

V dalším kroku přejdeme ke konfuguraci Gruntu respektive package.json a Gruntfile.js
Cílem je překompilovat soubor style.less do style.css a poté ho zminifikovat. Tuto úlohu budeme chtít opakovat po jakékoli uložené změně v .less souborech.
Začneme s package.json – zde budeme potřebovat náledující balíčky:

To znamená že package.json bude vypadat 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",
    "grunt-contrib-watch" : "0.5.3"
  },
  "author": "Lukaspavel.cz",
  "license": "GNU"
}

Jednodušší část máme za sebou a nyní se vrhneme na Gruntfile.js ten bude vypadat následovně:

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // kompilace a minifikace LESS souboru
    less: {
      dev: {
        options: {
          compress: true
        },
        files: {
          "www/css/style.css": ["www/css/style.less" ]
        }
      }
    },
    // sledování změn ve všech LESS souborech
    watch: {
      files: ['./**/*.less'],
      tasks: ['less']
    }
});

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');

grunt.registerTask('default', ['less']);
};

Kostra zůstává totožná jako v prvním díle. Přibyla pouze minifikace při kompilaci pomocí options u less úlohy. Grunt-contrib-less tuto vlastnost nabízí ve svém základu. Další vlastnosti najdete v dokumentaci.

Nově přibyla druhá úloha nazvaná watch, která nám bude hlídat všechny soubory LESS (včetně těch Bootstrapovských). To nastavíme vlastností files a příslušným selektorem. Další důležitou vlastností je tasks. Tam nastavujeme jaké úlohy se spustí pokud budou zaznamenány změny. Sledování změn spustíme příkazem grunt watch v příkazové řádce stejně jako jsme spouštěli v prvním díle. Stejným způsobem lze sledovat například i javascriptové soubory.

V příštím díle se podíváme na zníměné javascriptové soubory a možnosti práce s nimi + na optimalizaci obrázků. Pokud se Vám článek líbil, sdílejte ho :) .

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.

Napsat komentář

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

*


twenty − 9 =


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>