Euromind
  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

Euromind
CSS/SCSSHTMLJavascriptWebdesign

GULP møder AMP – del 1

af Per Lindsø Larsen 5. juni, 2019
skrevet af Per Lindsø Larsen 5. juni, 2019
GULP møder AMP – del 1

GULP er som bekendt en Task-runner eller opgave-knuser på linje med f.eks. Grunt, Hvis du oplever, at der er arbejdsprocesser, som du foretager igen og igen, så er det som regel værd at overveje, om GULP kan hentes ind over.

AMP (Accelerated Mobile Pages) er et nemt framework at arbejde med, men rummer også mange trivielle processer, der gør det oplagt at koble det med GULP.

AMP er et koncept, der er udviklet af oraklerne fra Google, i første omgang i samarbejde med nyhedsmedier, der ønskede kortere responstider fra mobil på deres sites. Nyheds-junkies har meget begrænset tålmodighed. AMP blev præsenteret i oktober 2015 og selv om det – af mange fornuftige grund – har skabt en del kontrovers, har udviklingen siden vist, at det næppe er gavnligt at ignorere det i web-strategien. Med Google’s egne ord, så går vi med AMP fra “mobile first” til “user-first”. Median-tiden for at loade en AMP-side fra Google-søgning er under et halvt sekund. Det hører med i billedet, at Google fremadrettet vil favorisere AMP-sider på mobile Google-søgning. Alt efter temperament kan man kalde det enten pisk eller gulerod.

AMP er også hurtigt at udvikle i – og kan gøres endnu hurtige med hjælp fra f.eks. GULP. Fort at kridte banen hurtigt op, så indebærer udvikling af en AMP-validerbar side nogle restriktioner, hvoraf de væsentligste er:

  • Du kan ikke bruge javascript (ud over framework-ets egne), så glem alt om jQuery, bootstrap.js og hvad du ellers har troet uundværligt.
  • Du kan max. bruge 50 kB CSS, der skal in-lines i HTML-siden.
  • Der er forbud mod flere elementer i CSS, f.eks. er det slut med enhver anvendelse af !important; (hvilket i forvejen også er en dårlig skik!)

I det følgende vil blive demonstreret, hvorledes nogle GULP-funktioner kan tage brodden af stort set alle trivielle processer i AMP-udviklingen og nedsætte produktionstiden væsentligt.  Den samlede kode kan downloades

Gulp

Du har brug for både at have installeret Node og Gulp/Gulp CLI. Node kan du hente på node.js . Herfter kan du installere Gulp med:

npm install gulp-cli -g
npm install gulp -D

I denne serie af blog-indlæg vil følgende Gulp Plugins blive anvendt:

 PluginInstaller  Beskrivelse
gulp-tapnpm i -D gulp-tapTap ind til hver enkelt fil i pipen
gulp-sassnpm i -D node-sass gulp-sassKompiler SCSS.filer til CSS
gulp-renamenpm i -D gulp-rename Omdøb filnavn
gulp-purgecssnpm i -D gulp-purgecssFrasorter ikke anvendt CSS
gulp-runnpm i -D gulp-runShell kommando i gulp
gulp-opennpm i -D gulp-openåbn fil eller Url
gulp-amphtml-validatornpm i -D gulp-amphtml-validator 
gulp-html-partialnpm i -D gulp-html-partial 
gulp-changednpm i -D gulp-changedRegistrer hvorvidt en nydannet eller redigeret
gulp-cleannpm i -D gulp-clean 
gulp-copynpm i -D gulp-copy 
gulp-json-editornpm i -D gulp-json-editor 
gulp-imageminnpm i -D gulp-imagemin 
fs Node FileSystem Modul
path Node Path modul
3dubnpm i 3dubDev Server med support for https/http2

Hvis du vil slippe nemt om ved det, kan du kopiere nedenstående til package.json  og køre:

npm install
{
   "name": "amp-boilerplate",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "3dub": "^1.1.0",
     "gulp": "^4.0.0",
     "gulp-amphtml-validator": "^1.0.2",
     "gulp-changed": "^3.2.0",
     "gulp-clean": "^0.4.0",
     "gulp-cssnano": "^2.1.3",
     "gulp-purgecss": "^1.1.1",
     "gulp-sass": "^4.0.2",
     "gulp-strip-comments": "^2.5.2"
   },
   "dependencies": {
     "gulp-cli": "^2.0.1",
     "gulp-contains": "^1.2.0",
     "gulp-copy": "^4.0.1",
     "gulp-html-partial": "^1.0.1",
     "gulp-htmlmin": "^5.0.1",
     "gulp-imagemin": "^5.0.3",
     "gulp-json-editor": "^2.5.0",
     "gulp-open": "^3.0.1",
     "gulp-rename": "^1.4.0",
     "gulp-run": "^1.7.1",
     "gulp-tap": "^1.0.1"
   }
 } 

AMP

At udvikle Accelerated Mobile Pages kræver ikke særlig opsætning, men er regulær HTML-sider med nogle væsentlige modifikationer og tilføjelser. 

Som udgangspunkt skal følgende krav skal være opfyldt, for at din AMP-side kan valideres:

1. HTML-siden starter med <!doctype html> efterfulgt af <html ⚡> eller <html amp>
2. <meta charset=”utf-8″> som første element i <head>
3. <script async src=”https://cdn.ampproject.org/v0.js”></script> i <head> for at loade AMP JS library.
4. <link rel=”canonical” href=”$SOME_URL”> i <head> der peger til den regulære version af AMP-siden.
5. Angiv viewport, f.eks. <meta name=”viewport” content=”width=device-width,minimum-scale=1″>
6. Indsæt standard  AMP Boilerplate CSS  i <style amp-boilerplate>. Væsentligste funktion er at forhindre FUIC (Flash of Unstyled Content) før AMP JS er loaded.

I sin enkleste form vil en validerbar AMP-side derfor se udsom f.eks.:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Struktur

Projektet er delt op i folderne src, build og dist. Src-folderen og sass-foldseren (med scss-filedr) er de eneste steder, der kodes. Build er en mellemstation, hvor css-filer m.v. placeres for debug. Dist-folderen indeholder de færdige AMP-sider, der med live-reload vises i browseren.

1. Fra Sass/Less til <style amp-custom>

Et af kritikpunkterne i forhold til AMP er, at frameworkets skræddersyede moduler går AMP-sider kedelige og ensartede. Man behøver ikke at kigge sig langt omkring for at få bekræftet, at den kedelige tendens er der. Den individuelle styling er derfor væsentlig og det vanskeliggøres så igen af AMP-konceptets noget rigide holdning til brugen af CSS, hvor det ikke er muligt at linke til blot en enkelt css-fil. For at gøre det muligt at arbejde videre med Sass/Less og fortsat have Live-Reload af AMP-sider er det oplagt at inddrage GULP. Følgende opgaver skal løses:

  1. Kompile scss-filer til css.
  2. Tree-shake den dannede CSS-fil til hver enkelt AMP-side, så der kun medtage styles, som rent faktisk bliver anvendt på siden. 
  3. Komprimere den nødvendige CSS til hver enkelt side.
  4. Indsætte CSS’et i <style amp-custom> tag’et så vi får opdateret den færdige AMP-side med det samme.

Der findes mere end 3500 plugins til GULP og for at løse nærværende opgave vil jeg først bruge gulp-sass :

npm i gulp-sass

Med følgende GULP-task konverteres SCSS-filer i folderen “./src/sass” til en samlet CSS-fil i Build-folderen:

const sass = require('gulp-sass');
sass.compiler = require('node-sass');

const buildPath = 'build';
const scssPath = 'src/scss';
';
gulp.task('sass', () => {
    return gulp.src(scssPath + '/*.scss')
        .pipe(sass())
        .on('error', (error) => {
            console.log(error.toString());
           // this.emit('end')
        })
        .pipe(gulp.dest(buildPath));
});

Næste skridt er, for hver enkelt AMP HTML-fil i Folderen “./src” at udtrække de dele af CSS.filen, der anvendes i den enkelte HTML. Til det formål er plugin’et Gulp-css-purge nyttigt.

Ryst css-træet

Css-filer er et sted, hvor der traditionelt ophober sig uanede mængder af overflødig bloat-code. Derfor er purgeCSS en dejlig opfindelse, der analyser html for at finde hvilken css-kode, der er nødvendig. For index.html i dette projekt betyder det, at CSS reduceres til at fylde mindre end 1/6 del af den oprindelige størrelse.
Fremgangsmåden har den bagside, at purgeCSS naturligvis ikke kan ane, hvad der i fremtiden kan blive kaldt af klasser i f.eks. dynamisk indhold fra database eller javascript. I nærværende eksempel hentes indhold til amp-carousel og amp-list fra JSON. Heri defineres CSS-klasser, der sætter baggrundsfarve for badges. Det har purgeCSS ingen anelse om, og de vil derfor mangle i <style amp-custom>.
Problemet kan løses på flere måder. Den mest autoriserede er at bruge tags i SCSS/CSS koden, der fortæller purgeCSS, at den skal gå uden om markeret kode, når den renser ud. I dette tilfælde bruges klasserne bg-[farve]-dark til at sætte baggrundsfarve for badges. Rundt om det sted, hvor de bliver defineret i SCSS sættes purgecss-ignore-tags:

@mixin dark($name, $color) {
/* purgecss start ignore */
   .#{"bg-" + $name + "-dark"} {
    background-color: $color;
    color: "#FFFFFF";
  }
/* purgecss end ignore */
  .#{"color-" + $name + "-dark"} {
    color: $color;
  }
   .#{"border-" + $name + "-dark"} {
    border: solid 1px $color;
  }
}

/* purgecss start ignore */ medfører at ignorerede kode frem til /* purgecss end ignore */ vil blive medtaget i alle AMP-sider. Den skal derfor kun bruges til det mest nødvendige.

En alternativ løsning kunne være at indsætte en dummy i den relevante HTML-fil, som indeholder de baggrundsfarver, der bliver brug for:

<span  class="bg-blue-dark bg-green-dark bg-red2-dark bg-orange2-dark bg-night-dark bg-magenta-dark"></span>

Herefter vil purgeCSS medtaget klasserne. Begge måder løser problemet, og sidstnævnte kan i en håndevending være at foretrække, hvis det på forhånd står klart, at css-undtagelse kun er relevant for en enkelt HTML-fil og ikke for 50 andre.

const tap = require('gulp-tap')
const fs = require("fs");
const purgecss = require('gulp-purgecss')
const rename = require("gulp-rename");
const path = require('path');


gulp.task('createAMPCustom', () => {
    return gulp.src(srcPath + '/*.html')
        .pipe(tap((file) => {
            var fname = path.basename(file.path);
            return gulp.src(buildPath + '/style.css')
                .pipe(purgecss({ content: [buildPath + '/' + fname] }))
                .pipe(cssnano())
                .pipe(rename(fname.replace(".html", ".min.css")))
                .pipe(gulp.dest(buildPath));
        }));
});

AMPGulp
0 Kommentarer
0
FacebookTwitterPinterestEmail
forrige post
Stylometri i C# – del 1
næste post
Stylometri i C# – del 2

Relaterede indlæg

Dansk evighedskalender

7. december, 2020

Headless browser på 10 minutter

25. juli, 2020

API til Statistikbanken

21. september, 2019

Variable fonte med dansk tegnsæt i open source

11. august, 2019

IntersectionObserver

9. august, 2019

Progressbar for dokumentposition

31. juli, 2019

Navngivne RegEx-grupper i ECMAScript 2018

29. juli, 2019

RegEx: Unicode og Look Backward i ECMAScript 2018

24. juli, 2019

Media Query i 2019

18. juli, 2019

Danske Adressers Web API

17. juli, 2019

Efterlad en kommentar Afbryd svar

Gem mit navn, email, og website i denne browser til senere kommentarer.

Seneste indlæg

  • Dansk evighedskalender

    7. december, 2020
  • Automatisk køreafstand i Excel

    17. august, 2020
  • Headless browser på 10 minutter

    25. juli, 2020

Kategorier

  • C#
  • CSS/SCSS
  • Excel
  • HTML
  • Javascript
  • Mobile
  • Webdesign
  • Xamarin

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bo9sat i Aarhus.

Du kan hyre mig til korterevarende projekter eller konkrete opgaveløsninger.

Pæn rabat til non-profit organisationer og foreninger.

Når jeg ikke koder, deltager jeg løbende i diverse spændende forskningsprojekter om alt andet end kodning.

Keep in touch

Facebook Twitter Email Github

Tags

Adresser AMP AMP Story Android API Billedformater Billedoptimering Brand C# Codepen Cordova CPR Crome DevTools CSS Debug Ecmascript Excel Fonte Gmail Gulp HTML Ikoner IOS Javascript JsFiddle Machine Learning Mail Mediaquery ML.NET Mobile RegEx SCSS SMTP Stylometri Visual Studio Webdesign Xamarin

Nyhedsbrev

Timeld nyhedsbrev for info om nye blog-indlæg, tips m.v.

  • Facebook
  • Twitter
  • Email
  • Github

@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273


Tilbage til top
Euromind
  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 3

    Andersen, Grundvig, Kierkegaard og ML.NET – del 1

    11. august, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    Registrer Gmail API til brug i javascript

    27. juni, 2019
@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273

Læs ogsåx

Gmail, Yahoo og Outlook som SMTP-server

18. april, 2019

Headless browser på 10 minutter

25. juli, 2020

Media Query i 2019

18. juli, 2019