Bower + Grunt + Colorbox

Dnes vám naznačím jak do projektů přidávám knihovny třetích stran  a jak spojuji css a js soubory, které následně minifukuji. Ukážeme se to na pluginu Colorbox který používám pro zobrazení detailu fotek v pop-up okně.

Nainstalujeme Colorbox přes bower:

bower install jquery-colorbox --save-dev

Grunt task pro Colorbox

Pro zkopírování souborů používám balíček grunt-contrib-copy a pro minifikaci css do jednoho souboru grunt-contrib-cssmin:

npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-concat --save-dev

Nejdůležitější část souboru Gruntfile.js:

        copy: {
            colorbox: {
                expand: true,
                flatten: true,
                src: './bower_components/jquery-colorbox/example3/images/*',
                dest: 'www/css/images'
            }
        },
        cssmin: {
            target: {
                files: {
                    'www/css/main.min.css': [
                        'www/css/main.css',
                        'bower_components/jquery-colorbox/example3/colorbox.css',
                    ]
                }
            }
        },
        concat: {
            js: {
                src: ['bower_components/jquery/dist/jquery.min.js',
                    'bower_components/bootstrap/dist/js/bootstrap.min.js',
                    'bower_components/jquery-colorbox/jquery.colorbox-min.js',
                    'www/js/main.js'
                ],
                dest: 'www/js/compiled.min.js'
            }
        },

Tím se nakopírují ohrají obrázky obrázky z ./bower_components/jquery-colorbox/example3/images/ do www/css/image, soubor bower_components/jquery-colorbox/example3/colorbox.css se zmnifikuje a připojí k souboru www/css/main.css a soubor bower_components/jquery-colorbox/jquery.colorbox-min.js připojíme k zminifikovanému souboru www/js/compiled.min.js

Do souboru s JS přidáme inicializaci Colorboxu (v mém případě main.js):

$('.colorbox').colorbox({rel:'gal'});

Parametr {rel:’gal’} označuje že se jedná o galerii. Pokud bude více odkazů s class=”colorbox” půjde mezi fotkami přepínat a nebude se muset pop-up okno zavírat.

Odkazu s obrázkem přidáme classu colorbox:

<a href="{$pubPhoto->photo}" class="colorbox">
   <img src="{$pubPhoto->photoSmall}" alt="{$pubPhoto->title}">
</a>

A je to 🙂