Beiträge zu “grunt”

Jekyll: CSS Optimierungen "above the fold" mit Grunt

Bevor der Browser die Seite darstellen kann muss er die Formatierungen (CSS) und den Inhalt (html) der Seite im Speicher haben. Das bedeutet in den meisten Fällen das die Seite erst dann dargestellt wird wenn CSS und HTML Datei geladen sind.

Eine auch von Google empfohlene Möglichkeit ist das man die großen CSS Dateien erst am Schluss lädt und die für die Darstellung des sichtbaren Bereichs notwendigen CSS Information direkt in den HTML Bereich stellt.

Dann kann der Browser mit der Darstellung des sichtbaren Bereichs beginnen wenn er Formatierungen und Inhalt und der Rest wird nachgeladen.

So weit die Theorie. Die Frage ist nur “Welche CSS Formatierungen” brauche ich?”.

Wenn man Grunt verwendet gibt es hier ein Werkzeug das einem genau diese notwendigen CSS Anweisungen heraussucht.

Diese Beschreibung für meinen Jekyll Blog geht davon aus, das Grunt bereits installiert und konfiguriert ist.

Zuerst die Module installieren

    sudo npm install grunt-penthouse --save-dev
    sudo npm install penthouse --save-dev
    
    vi Gruntfile.js
    penthouse: {
      extract : {
          outfile :  './_includes/critical.css',
          css : './css/style.min.css',
          url :'http://localhost:4000/',
          width : 1200,
          height : 500
      },
    },
    grunt penthouse

Mit diese Anweisung wird Grunt angewiesen sich die URL anzusehen und für die Bildschirmgröße 1200 x 500 alle CSS Anweisungen aus der Datei css/style.min.css herauszusichen die man braucht und das Ergebnis in die Datei _include/critical.css zu schreiben.

Die Informationen aus dieser Datei importieren ich dann im Jekyll Build Prozess in meinen <head> Abschnitt

    vi _includes/head.htm
      <style>
         .highlight,h1,h3,p,pre,ul{margin-bottom:15px}.wrapper{max-width:-webkit-calc(800px - (30px * 2));max-width:calc(800px - (30px * 2));margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}@media screen and (max-width:800px){.wrapper{max-width:-webkit-calc(800px - (30px));max-width:calc(800px - (30px));padding-right:15px;padding-left:15px}}.wrapper:after{content:"";display:table;clear:both}.page-content{padding:30px 0}.post-list{margin-left:0;list-style:none}.post-link{display:block}.highlight{background:#fff}@font-face{font-family:icons;src:url(/fonts/icons.eot?d30c1b80659ee9dba62c4125fe8fca0c);src:url(/fonts/icons.eot?#iefix) format("embedded-opentype"),url(/fonts/icons.woff2?d30c1b80659ee9dba62c4125fe8fca0c) format("woff2"),url(/fonts/icons.woff?d30c1b80659ee9dba62c4125fe8fca0c) format("woff"),url(/fonts/icons.ttf?d30c1b80659ee9dba62c4125fe8fca0c) format("truetype"),url(/fonts/icons.svg?d30c1b80659ee9dba62c4125fe8fca0c#icons) format("svg");font-weight:400;font-style:normal}.icon{font-family:icons;display:inline-block;vertical-align:middle;line-height:1;font-weight:400;font-style:normal;speak:none;text-decoration:inherit;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon_Blue_and_yellow_ribbon:before{content:"\f101"}.icon_box_archive:before{content:"\f102"}.icon_glyphicons-28-search:before{content:"\f104"}.icon_glyphicons-66-tag:before{content:"\f108"}.icon_glyphicons-social-38-rss:before{content:"\f10c"}.icon_meisen-cam:before{content:"\f10e"}.icon_solar_pannel_solar_cell:before{content:"\f10f"}.icon_weather-station:before{content:"\f111"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}header{display:block}a{background-color:transparent}img{border:0}pre{overflow:auto}code,pre{font-size:1em}button{color:inherit;font:inherit;margin:0}button{overflow:visible}button{text-transform:none}button{-webkit-appearance:button;cursor:pointer}button::-moz-focus-inner{border:0;padding:0}@media print{:after,:before{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.42857;background-color:#efefef}button{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#ff8f00;text-decoration:none}img{vertical-align:middle}.img-circle{border-radius:50%}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h3{margin-top:22px;margin-bottom:11px}h1{font-size:35px}h3{font-size:28px}code,pre{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}pre{display:block;font-size:15px;line-height:1.42857;word-break:break-all;word-wrap:break-word}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{margin-left:-15px;margin-right:-15px}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.col-md-9,.col-sm-3,.col-sm-9,.col-xs-6{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-6{float:left}.col-xs-6{width:50%}@media (min-width:768px){.col-sm-3,.col-sm-9{float:left}.col-sm-3{width:25%}.col-sm-9{width:75%}}@media (min-width:992px){.col-md-9{float:left}.col-md-9{width:75%}}.collapse{display:none}.nav{margin-bottom:0;padding-left:0;list-style:none}.nav:after,.nav:before{content:" ";display:table}.nav:after{clear:both}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.navbar{position:relative;min-height:50px;margin-bottom:22px;border:1px solid transparent}.navbar:after,.navbar:before{content:" ";display:table}.navbar:after{clear:both}@media (min-width:768px){.navbar{border-radius:4px}}.navbar-collapse{overflow-x:visible;padding-right:15px;padding-left:15px;border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.navbar-collapse:after,.navbar-collapse:before{content:" ";display:table}.navbar-collapse:after{clear:both}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-fixed-top .navbar-collapse{padding-left:0;padding-right:0}}.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-top .navbar-collapse{max-height:200px}}.container>.navbar-collapse{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container>.navbar-collapse{margin-right:0;margin-left:0}}.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-brand{float:left;padding:14px 15px;height:50px}@media (min-width:768px){.navbar>.container .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;margin-right:15px;padding:9px 10px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:22px}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:14px;padding-bottom:14px}}@media (min-width:768px){.navbar-right{float:right!important;margin-right:-15px}}.navbar-inverse{background-color:#607d8b;border-color:#4b626d}.navbar-inverse .navbar-brand{color:#fff}.navbar-inverse .navbar-nav>li>a{color:#fff}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse{border-color:#516a76}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:transparent;border:1px solid none;border-radius:4px}.visible-xs{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}#sidebar{height:100%;padding-right:0;padding-top:20px}#sidebar .nav{width:95%}@media screen and (max-width:767px){.row-offcanvas{position:relative;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;transition:all .25s ease-out}.row-offcanvas-right .sidebar-offcanvas{right:-41.6%}.sidebar-offcanvas{position:absolute;top:0;width:41.6%}#sidebar{padding-top:0}}ul{list-style:square inside}ul li{padding-left:1em;margin-bottom:.5em}body,h1,h3,p,pre,ul{margin:0;padding:0;color:#757575}p{margin:0 0 9px}body{padding-top:50px;padding-bottom:40px}.sidebar-nav{padding:9px 0}img{max-width:100%;height:auto}.hb-entry-title a{color:#757575;display:block;margin-top:10px;padding:0 0 3px;text-decoration:none}.widget-header{font-size:22px}.navbar-inverse .navbar-nav>li>a{font-size:20px}.navbar-brand{box-sizing:border-box;display:block;font-size:24px;color:#fff;font-weight:400;letter-spacing:.02em;line-height:1;position:relative}.widget-content{margin:5px 30px 30px;position:relative}.highlight pre{overflow-x:auto}.highlight pre code{white-space:pre}.highlight pre,pre{background-color:#f8f8f8;border:1px solid #ccc;padding:6px 10px;border-radius:3px}.navbar-toggle .icon-bar:nth-of-type(2){top:1px}.navbar-toggle .icon-bar:nth-of-type(3){top:2px}.navbar-toggle .icon-bar{position:relative;transition:all 500ms ease-in-out}
      </style>

Damit bin ich zu mindestens für den Desktop Bereich mit den von Google Pagespeed vorgeschlagenen Optimierungen durch.

page insights

29.8.15
Weitere Beiträge zu: jekyll   grunt   performance  

Webfont Dateien mit Grunt-Webfont teilweise verschoben

An dieser Stelle habe ich beschrieben wie man mit grunt-webfont aus SVG Icons Schriften erstellt die man schön einfach in seiner Webseite verwenden kann.

Wie ich nach ein paar Tagen leider feststellen musste wurden diese Schriften nicht auf allen Plattformen und allen Browsern gleich dargestellt. Im Opera (Windows, Mac) als auch mit IE / Firefox (Windows) wurden die Icons “nach oben geschoben”.

Webfont Icons verschoben

Aufgrund eines Hinweises das unterschiedliche Icon Größen zu Problemen führen bin ich die Icons noch mal Stück für Stück durchgegangen.

Das “Problemicon” war ein rechteckiges Icon. Als ich das Icon in eine quadratische Form gebracht hatte konnte ich die Probleme nicht mehr beobachten.

Warum die Probleme allerdings nicht überall auftreten kann wohl nur der Programmierer beantworten.

2.8.15
Weitere Beiträge zu: grunt  

Webfont Dateien mit Grunt-Webfont zusammenstellen

Möchte man seine Webseite mit Icons auf hübschen bieten sich verschiedene Möglichkeiten an. Neben dem klassischem Ansatz von Grafikdateien gibt es auch die Möglichkeit diese Icons in Fontdateien zu verteilen. Iconfontdateien haben den Vorteil, dass man sie über CSS Angaben formatieren kann und das sie sich auch verlustfrei skalieren lassen.

Es gibt einige Icon Fonts die sich kostenlos oder gegen Gebühr verwenden lassen. Ungünstig ist allerdings, dass man für ein oder zwei Icons immer dem gesamten Font bereitstellen muss und dann vielleicht auch noch mehrere dieser Fonts.

Mithilfe des Grunt Plugins grunt-webfont kann man recht einfach verschiedene Icons im SVG Format in einer Fontdatei zusammenfassen.

Die Installation ist recht einfach:

 npm install grunt-webfont
 sudo apt-get install fontforge ttfautohint

Seiner Gruntfile.js muß man nur folgende Zeilen hinzufügen

 webfont: {
    icons: {
        src: '_icons/*',
        dest: 'fonts',
        destCss: '_sass',
        options: {
            stylesheet: 'scss',
            relativeFontPath: '/fonts'
            }
        }
    }

Jetzt kann man die Icons die man haben möchte in das Verzeichnis _icons kopieren und man bekommt die Fontdatei in das Verzeichnis fonts kopiert. Da ich sass verwende bekomme ich die CSS Anweisungen so erstellt, das ich sie direkt in meinen Grunt Workflow einbauen kann.

19.7.15
Weitere Beiträge zu: grunt  

CSS Dateien mit Grunt zusammenfassen und minimieren

Gängige Praxis bei der Performanceoptimierung von Web Seiten ist es die Anzahl der Request zu reduzieren. Verwendet man verschiedene CSS Dateien wird jede Datei einzelnd aufgerufen. Dabei kommt es zu Verzögerungen die vermieden werden können wenn man alle CSS Definitionen in eine Datei schreibt. Grunt soll hier einen Lösungsansatz geben. Die Basisinstallation hatte ich hier beschrieben.

Hier der Ablauf. Erst die Installation dann ein Projektverzeichnis erstellen und den Befehl für die Initialisierung geben. Ich hatte erstmal nur ein Element ausgewählt

sudo  npm install -g grunt
mkdir gruntprojects
cd gruntprojects/

grunt init:gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.

"gruntfile" template notes:
This template tries to guess file and directory paths, but you will most likely
need to edit the generated grunt.js file before running grunt. If you run grunt
after generating grunt.js, and grunt exits with errors, edit the grunt.js file!

Please answer the following:
[?] Is the DOM involved in ANY way? (Y/n) n
[?] Will files be concatenated or minified? (Y/n) y
[?] Will you have a package.json file? (Y/n) n
[?] Do you need to make any changes to the above before continuing? (y/N)

Writing grunt.js...OK

Initialized from template "gruntfile".

Done, without errors.

Eigentlich wollte ich Javascript und CSS Files zusammenfassen und minimieren. Mit den Standardbeispielen hat das aber nicht geklappt. Die Gründe habe ich nicht rausgefunden. Deshalb habe ich ein anderes Beispiel benutzt und erstmal nur die CSS Dateien angegangen mit diesem Plugin. Erst Installieren und dann die Grunt Befehlsdatei anpassen:

npm install grunt-contrib-mincss

vi grunt.js

module.exports = function(grunt) {
  grunt.initConfig({
    meta: { version: '0.1.0', banner: ' ' },
    lint: { files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js'] },
    test: { files: ['test/**/*.js'] },
mincss: {
  compress: {
    files: {
       '/var/www/html/output.min.css': [
                        '/var/www/html/bootstrap/css/bootstrap.css' ,
                        '/var/www/html/stylesheet.css' ,
                        '/var/www/html/scheet2.css' ,
                        '/var/www/html/thickbox.css' ,
                        ]
    } } },
jshint: {
      options: {
        curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, boss: true, eqnull: true
      },
      globals: {}
    },
    uglify: {}
  });
grunt.registerTask('default', 'lint test concat min');
grunt.loadNpmTasks('grunt-contrib-mincss');
};

Und jetzt aufrufen

#grunt mincss
Running "mincss:compress" (mincss) task
File /var/www/dev-server/html/templates/xtc5/bootstrap/css/all.min.css created.
Uncompressed size: 122760 bytes.
Compressed size: 18698 bytes gzipped (109417 bytes minified).

Die Datei wird auch gut erstellt. Aufpassen muss man bei der CSS dann vor allem auf Pfadangaben. Wenn man CSS Dateien aus verschiedenen Dateien zusammenstellt kann es sein das in der minimierten Datei die Angabe nicht mehr stimmen.

Auf jeden Fall ist die Webseite erstmal durchgehend zu testen.

17.2.13
Weitere Beiträge zu: grunt  

Basisinstallation Grunt auf Debian

Ich möchte grunt verwenden um CSS und JS Dateien zu minimieren und zusammenzufassen. Die Installation von grunt setzt einige Packete vorraus die ich nach dieser  Anleitung so installiert haben.

Zuerst die Installation von git

sudo apt-get update
sudo apt-get install git-core curl build-essential openssl libssl-dev

Dann node.js

git clone https://github.com/joyent/node.git
cd node
./configure
make
sudo make install

Dann npm und Grunt

curl https://npmjs.org/install.sh | sudo sh
npm install -g grunt-cli

 

15.2.13
Weitere Beiträge zu: grunt  

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