Bootstrap
rsyslayout_bootstrap: Bootstrap Integration
Das Vorgehen ist analog zu meiner Beschreibung unter Bootstrap Basis-Setup im Menüpunkt HTML mit folgenden Unterschieden:
Aus der Dateistruktur verwende ich den Ordner make, dieser wird nach Resources/Public/make kopiert. Unterhalb von Resources/Public/ folgende Ordner anlegen:
make.sh
Im Verzeichnis make habe ich ein eigenes Skript angelegt: make.sh:
#!/bin/bash
# set working directory
MY_PATH="`dirname \"$0\"`"
cd $MY_PATH
# set path
PATH=$PATH:/usr/local/bin/
export PATH
if [ "$1" = "" ]; then
#---------------------------
# make css
#---------------------------
cp bootstrap/less/\*.less ../less/
# application.less
cp rsys/\*.less ../less/
# insert imports at beginning
for i in $( ls ../less/\*.less ); do
if [ "$i" != "../less/variables.less" ]; then
if [ "$i" != "../less/mixins.less" ]; then
if [ "$i" != "../less/bootstrap.less" ]; then
echo '@import "variables.less";' > ../less/tmp.less
echo '@import "mixins.less";' >> ../less/tmp.less
cat $i >> ../less/tmp.less
rm $i
mv ../less/tmp.less $i
fi
fi
fi
done
fi
#---------------------------
# compile css
#---------------------------
/usr/local/bin/lessc ../less/bootstrap.less > ../css/bootstrap.css
/usr/local/bin/lessc --yui-compress ../less/bootstrap.less > ../css/bootstrap.min.css
if [ "$1" = "css" ]; then
exit
fi
#---------------------------
# make bootstrap js
#---------------------------
# make bootstrap.js
cat copyright/copyright.bootstrap.js > ../Javascript/bootstrap.js
# bootstrap.js
cat bootstrap/js/transition.js >> ../Javascript/bootstrap.js
cat bootstrap/js/alert.js >> ../Javascript/bootstrap.js
cat bootstrap/js/button.js >> ../Javascript/bootstrap.js
cat bootstrap/js/carousel.js >> ../Javascript/bootstrap.js
cat bootstrap/js/collapse.js >> ../Javascript/bootstrap.js
cat bootstrap/js/dropdown.js >> ../Javascript/bootstrap.js
cat bootstrap/js/modal.js >> ../Javascript/bootstrap.js
cat bootstrap/js/tooltip.js >> ../Javascript/bootstrap.js
cat bootstrap/js/popover.js >> ../Javascript/bootstrap.js
cat bootstrap/js/scrollspy.js >> ../Javascript/bootstrap.js
cat bootstrap/js/tab.js >> ../Javascript/bootstrap.js
cat bootstrap/js/affix.js >> ../Javascript/bootstrap.js
# minimize
cat copyright/copyright.bootstrap.js > ../Javascript/bootstrap.min.js
bootstrap/node_modules/uglify-js/bin/uglifyjs -nc ../Javascript/bootstrap.js >> ../Javascript/bootstrap.min.js
if [ "$1" = "js" ]; then
exit
fi
#---------------------------
# copy other js from docs
#---------------------------
cp bootstrap/assets/js/\*.js ../Javascript/
#---------------------------
# application.js
#---------------------------
cp rsys/\*.js ../Javascript/
#---------------------------
# copy other resources
#---------------------------
cp bootstrap/assets/ico/\* ../Icons/
#---------------------------
# make jquery
#---------------------------
cp jquery/jquery-1*.js ../Javascript/jquery.js
cp jquery/jquery-ui*.js ../Javascript/jquery-ui.js
cat copyright/copyright.jquery.js > ../Javascript/jquery.min.js
cat copyright/copyright.jquery-ui.js > ../Javascript/jquery-ui.min.js
bootstrap/node_modules/uglify-js/bin/uglifyjs -nc ../Javascript/jquery.js >> ../Javascript/jquery.min.js
bootstrap/node_modules/uglify-js/bin/uglifyjs -nc ../Javascript/jquery-ui.js >> ../Javascript/jquery-ui.min.js
Anmerkung: im obigen Skript ist /* ersetzt mit /\* damit das Syntax highlighting funktioniert hier auf der Internetseite. Im Skript muss der \ entfernt werden.
Erklärung
Bei Aufruf ohne Parameter compiliert, concateniert und komprimiert das Skript meine less Dateien im Verzeichnis less zu css in das Verzeichnis Resources/Public/Css. Zu Beginn der less Dateien füge ich noch ein (redundantes) @import "variables.less"; und @import "mixins.less"; ein - dies dient um in Eclipse im less Editor die Variablen zur Verfügung zu haben.
Dann kopiere ich noch meine application.less, dort befindet sich das zusätzliche css zur Anpassung von bootstrap.
Dasselbe ausser compilieren dann noch für die Javascript Dateien im Verzeichnis Resources/Public/make/bootstrap/js.
Dann kopiert es noch die Javascript Dateien aus dem assets Verzeichnis nach /Resources/Public/Javascript. holder.js ist z.B. für das erzeugen von Platzhalter Bildern.
Dann kopiere ich noch meine application.js nach /Resources/Public/Javascript, dort kommt das zusätzliche Javascript rein.
Zuletzt werden Icons und Grafiken kopiert aus bootstrap, sowie jQuery erzeugt.
Damit ist das Bootstrap soweit in der Extension verfügbar und man kann die less Dateien editieren und bei Ausführung von make.sh css sind die Stylesheets compiliert und minimiert im Verzeichnis Resources/Public/Css verfügbar.
Autobuild
Die Ausführung von make.sh css kann man in Eclipse als Builder automatisieren.