Beiträge zu “Grunt”

Windows Virtualbox VMs in Proxmox

Microsoft bietet auf dieser Seite virtuelle Maschinen von Windows 7 und Windows 10 mit verschiedenen IE und Edge Browserversionen zum testen der Browser an. Leider ist dort keine Format für Proxmox enthalten. Auf Basis dieser und dieses Dokumentes konnte ich ein VirtualBox Image importieren. Hier meine Notizen (wie immer Use at your own risk)

Image auf den Server kopieren, einloggen und auspacken

   scp -P 22 IE11.Win7.VirtualBox.zip root@proxmox-server.ip:/root
   ssh proxmoxhos-server.ip
   unzip IE11.Win7.VirtualBox.zip

Wenn ich das richtig verstanden habe ist diese ausgepackte ova Datei ein Tarfile aus “Hardwarebeschreibung” und “Festplatte”. Also auspacken

  tar -xf IE11\ -\ Win7.ova

Aus der “PC” Beschreibung kann man erkennen wir groß diese Platte ist

  <Info>List of the virtual disks used in the package</Info>
    <Disk ovf:capacity="42949672960" ovf:diskId="vmdisk1" ovf:fileRef="file1" ovf:format="http://www.vmware.com/interfaces/specifications/vmdk.html#strea
  mOptimized" vbox:uuid="c523f6ad-edc8-4652-8f86-959e366ab2ac"/>

Also: 42949672960 byte = 42,94967296 GB

In Proxmox haben ich dann eine neue VM eingerichtet mit einer Festplatte dieser Größe. Die VM hatte die ID 110. Dann musste ich herausfinden wo die Festplatte von diesem neuen Rechner liegt:

    more /etc/pve/nodes/proxmoxserver/qemu-server/110.conf
    bootdisk: ide0
    cores: 1
    ide0: local-lvm:vm-110-disk-1,size=43G
    ide2: none,media=cdrom
    memory: 4512
    net0: e1000=8A:63:4A:B8:74:9B,bridge=vmbr0
    numa: 0
    ostype: win10
    scsihw: virtio-scsi-pci
    smbios1: uuid=a0f26105-45f5-4b0f-acf7-ee1cca4f1ec0

Das mit den Logischen Volumes habe ich nicht zu Ende verstanden aber so bekommt man den Dateinamen

     lvdisplay
    .....
    .....
    --- Logical volume ---
      LV Path                /dev/pve/vm-109-disk-1
      LV Name                vm-109-disk-1

Jetzt überschreibe ich den dort angegebenen Namen mit der konvertierten Version meines Images von Microsoft.

    qemu-img convert -p -f vmdk IE11\ -\ Win7-disk001.vmdk -O raw /dev/pve/vm-110-disk-1

Und dann konnte ich in das Windows 7 Image booten und es sieht gut aus.

7.3.19
Weitere Beiträge zu: Grunt   Bootstrap  

Bootstrap mit sass und grunt

Für unseren Webshop möchte ich langfristig auf eine neue Bootstrapversion umstellen und ein neues Template bauen. Ich arbeite zwar schon länger mit Grunt aber nur in Teilbereichen. Für die neuen Projekte möchte ich das mit npm noch etwas besser automatisieren. Vor allem das manuelle Downloaden und Anpassen der Abhängigkeiten soll entfallen.

Basis für meine Notizen sind dieses und dieses Dokument und wie immer gilt. Das sind meine Notizen und kein Bulletproof Tutorial

Wir starten also im Rootverzeichnis des Webprojekt und initialisieren unseren npm

npm init vi package.json “dependencies”: { “bootstrap”: “^4.2.1”, “jquery”: “^3.3.1”, “popper.js”: “^1.14.6” }

Damit haben wir eine Art “Inhaltsverzeichnis” eröffnet auf dessen Basis der npm Packete installiert. Jetzt kann ich einfach Boostrap mit allen Abhängigkeiten installieren.

  npm install       
  shop-rusticus-template@1.0.0 /home/hbauer/Dokumente/rusticus/shop/shoproot/templates/tpl_modified
  ├── bootstrap@4.3.1
  ├── jquery@3.3.1
  └── popper.js@1.14.7

  ls node_modules
  bootstrap  jquery  popper.js

Zu Beginn brauche ich erst mal nur die Werkzeuge die ich zum zusammenstellen der Bootstrap CSS Dateien aus den sass Quellen benötige.

 sudo npm install grunt -save-dev
 sudo npm install grunt-contrib-sass -save-dev
 sudo npm install grunt-contrib-watch -save-dev

Dann erstelle ich die Steuerungsdatei für Grunt. Hier werden erst einmal nur die saas Elemente eingebaut und getestet. Die anderen Grunt Funktionen übernehme ich von meinen alten Beispielen. Hier geht es mir vor allem um das Zusammenspiel der Bootstrap Elemente die über npm installiert werden und meine eigenen Notwendigen Anpassungen.

   module.exports = function(grunt) {
       grunt.initConfig({
           sass: {
               dev: {
                   options: { style: 'expanded',
                             loadPath: ['node_modules/bootstrap/scss','sass']},  //Wichtig
                   files: { 'mystyle.css': 'sass/mystyle.scss' }
                   },
               dist: {
                   options: { style: 'compressed',
                       loadPath: 'node_modules/bootstrap/scss' },
                   files: {
                       'mystyle.css': 'sass/mystyle.scss' }
               }
           },
           watch: {
               sass: {
                   files: 'sass/*.scss',
                   tasks: ['sass:dev']  } }
       });
       grunt.loadNpmTasks('grunt-contrib-sass');
       grunt.loadNpmTasks('grunt-contrib-watch');
       grunt.registerTask('buildcss', ['sass:dist']);
       grunt.registerTask('devcss', ['sass:dev']);
   };

Im Verzeichniss sass/ möchte ich alle meine Anpassungen halten. Dazu zählen die Anpassungen in den Variablen und gegebenenfalls eine reduziete bootstrap.scss aus der nicht gewünschte Elemente auskommentiert worden sind. Wichtig ist das wir das !default am ende entfernen (Die Änderung in der _bootstrap_variables_override ist nur ein Testbeispiel um zu sehen das es geht. )

 mkdir sass
 vi _bootstrap-variables-override
    $headings-font-weight: 1800;

 vi sass/mystyle.scss
     @import "bootstrap-variables-override";
     @import "functions";
     @import "variables";
     @import "mixins";
     @import "root";
     @import "reboot";
     @import "type";
     @import "images";
     @import "code";
     @import "grid";
     @import "tables";
     @import "forms";
     @import "buttons";
     @import "transitions";
     //@import "dropdown";
     @import "button-group";
     @import "input-group";
     @import "custom-forms";
     ....
     ...

Jetzt mal starten und dann schauen wir ob die geänderte Schriftform für die Überschriften im CSS ankommt.

   grunt sass:dev                            
   Running "sass:dev" (sass) task

   Done.

   grep -b3 h1 mystyle.css

        .h1, .h2, .h3, .h4, .h5, .h6 {
          margin-bottom: 0.5rem;
          font-weight: 1800;
          line-height: 1.2;
        }

Jetzt kann ich mit einem Werkzeug (npm) sowohl meine Gruntkomponenten als auch meine Abhängigkeiten installieren, updaten und dann direkt meine produktiven Dateien bauen. In meiner Versionskontrolle brauche ich nur die Dateien

  • Gruntfile.js
  • package.json
  • sass/*

zu halten.

2.3.19
Weitere Beiträge zu: Grunt   Bootstrap  

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License