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.

Erstellt: 06/2013| Geändert: 10/2015