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 🙂