davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Ébauche de workflow Gulp : tâches courantes, unCSS, includes HTML et critical-CSS (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://www.alsacreations.com/tuto/lire/1685-ebauche-de-workflow-gulp-taches-uncss-includes-critical-css.html">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Ébauche de workflow Gulp : tâches courantes, unCSS, includes HTML et critical-CSS (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://www.alsacreations.com/tuto/lire/1685-ebauche-de-workflow-gulp-taches-uncss-includes-critical-css.html">Source originale du contenu</a></h3>
    <p>
    <em>Préambule : cet article part du principe que vous n’êtes pas totalement étranger aux notions et outils tels que LESS, NodeJS, Gulp ni à la ligne de commande, il ne s'agit d'un tutoriel de découverte de ces outils mais d'usage en environnement professionnel.</em></p>

<h3 id="introduction">
    Introduction</h3>

<p>
    Au sein de l’agence web <a href="http://www.alsacreations.fr">Alsacreations.fr</a>, nous avons instauré un processus de travail (un “workflow”) composé de langage <a href="http://lesscss.org/">LESS</a>, compilé avec des tâches <a href="http://gulpjs.com/">Gulp</a> et saupoudré de conventions internes et de <a href="http://knacss.com/">KNACSS</a>.</p>

<p>
    Le site <a href="http://goetter.fr">goetter.fr</a> est mon site personnel, mon bac à sable et mon espace de test pour moults expériences web.<br/>
    La version actuelle du site est très artisanale et manuelle. J’ai voulu tester la mise en place d’un workflow automatisé afin de profiter de toutes les tâches courantes (compilation LESS, minification, préfixes CSS automatiques, concaténation des fichiers JS, optimisation des images) tout en testant deux fonctionnalités intéressantes : les includes de fichiers en HTML ainsi que l’outil de perf web prôné par Google : “critical CSS”.</p>

<p>
    Cela m’a pris une journée de reprendre tout le workflow de mon site perso. Je vous la partage ici…</p>

<p class="center">
    <img alt="goetter.fr" src="/xmedia/doc/full/goetterfr.png"/></p>

<h3 id="lenvironnement-gulp">
    L’environnement Gulp</h3>

<p>
    Dans la version précédente de mon site personnel, mon dossier de travail était le même que celui de production : je faisais simplement attention à ne pas mettre en prod les fichiers inutiles (CSS non minifié, images non optimisées) et j'employais le logiciel Prepros.io pour compiler mes fichiers.</p>

<p>
    Avec le choix de Gulp, mon processus de travail est aujourd'hui différent dans la mesure où je scinde deux environnements distincts :</p>

<ul>
    <li>
        tous mes fichiers en développement sont dans <code>_src/</code></li>
    <li>
        les fichiers compilés, à envoyer en prod sont tous dans <code>_dist/</code></li>
</ul>

<p>
    Gulp est un outil d'automatisation de tâches (un "task manager") basé sur <a href="https://nodejs.org/">nodeJS</a>. Une fois NodeJS en place, Gulp s'installe en ligne de commande :</p>

<pre class="code">
<code>npm install gulp -g</code></pre>

<p>
    Pour fonctionner, Gulp nécessite deux fichiers de travail :</p>

<ul>
    <li>
        <code>package.json</code> (contient tous les plugins nécessaires aux tâches à éxécuter)</li>
    <li>
        <code>gulpfile.js</code> (exécute les tâches)</li>
</ul>

<p class="remarque">
    Pour rappel, je ne prévois pas de rentrer dans les détails de ce que sont gulp, <code>gulpfile.js</code> et <code>package.json</code> car cet article n'est pas une introduction à ces outils. Si ces termes vous sont totalement étrangers, je vous invite à vous renseigner sur les très nombreux écrits sur ce sujet (on me souffle dans l'oreillette qu'il va prochainement y avoir un article à ce sujet sur Alsacréations).</p>

<p>
    J’utilise à présent Gulp pour réaliser toutes mes tâches courantes (pas bien complexes mais souvent répétitives), et voici quels sont les plugins prévus au sein de mon fichier <code>package.json</code> :</p>

<ul>
    <li>
        “gulp”</li>
    <li>
        “gulp-less” (compilation LESS vers CSS)</li>
    <li>
        “gulp-autoprefixer” (ajout des préfixes nécessaires)</li>
    <li>
        “gulp-minify-css” (minification CSS)</li>
    <li>
        “gulp-rename” (renommage en “.min.css”)</li>
    <li>
        “gulp-uglify” (minification JS)</li>
    <li>
        “gulp-imagemin” (optimisation des images)</li>
    <li>
        “gulp-html-extend” (includes HTML)</li>
    <li>
        “gulp-uncss” (suppression des CSS non utilisés)</li>
    <li>
        “critical” (CSS inline)</li>
</ul>

<h3 id="les-tâches-courantes">
    Les tâches courantes</h3>

<p>
    Toutes les tâches suivantes sont inclues dans mon fichier <code>gulpfile.js</code> et exécutées sur demande ou automatiquement (<code>watch</code>) en ligne de commande.</p>

<h4 id="tâches-css">
    tâches CSS</h4>

<ul>
    <li>
        LESS</li>
    <li>
        autoprefixer</li>
    <li>
        minification</li>
</ul>

<p>
    La tâche <strong>“css”</strong> du fichier <code>gulpfile.js</code> :</p>

<pre class="code">
<code class="javascript"><span class="hljs-comment">// Tâche "css" = LESS + autoprefixer + minify</span>
gulp.task(<span class="hljs-string">'css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
  <span class="hljs-keyword">return</span> gulp.src(source + <span class="hljs-string">'/assets/css/styles.less'</span>)
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(rename({
      suffix: <span class="hljs-string">'.min'</span>
    }))
    .pipe(minify())
    .pipe(gulp.dest(prod + <span class="hljs-string">'/assets/css/'</span>));
});</code></pre>

<p>
    <strong>Explications :</strong> mon fichier de travail (<code>styles.less</code>) est tout d'abord compilé en CSS classique, puis préfixé, puis renommé en <code>.min.css</code> avant d'être minifié et placé dans mon dossier de production.</p>

<h4 id="tâches-javascript">
    tâches JavaScript</h4>

<ul>
    <li>
        concaténation</li>
    <li>
        minification (uglify)</li>
</ul>

<p>
    La tâche <strong>“js”</strong> du fichier <code>gulpfile.js</code> :</p>

<pre class="code">
<code class="javascript"><span class="hljs-comment">// Tâche "js" = uglify + concat</span>
gulp.task(<span class="hljs-string">'js'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
  <span class="hljs-keyword">return</span> gulp.src(source + <span class="hljs-string">'/assets/js/*.js'</span>)
    .pipe(uglify())
    .pipe(concat(<span class="hljs-string">'global.min.js'</span>))
    .pipe(gulp.dest(prod + <span class="hljs-string">'/assets/js/'</span>));
});</code></pre>

<p>
    <strong>Explications :</strong><span> tous les fichiers JavaScript du dossier  </span><code>/js/</code><span> sont minifiés pour concaténés (regroupés) en un seul fichier <code>global.min.js</code></span><span> et placé dans mon dossier de production.</span></p>

<h4 id="tâches-doptimisation-dimages">
    tâches d’optimisation d’images</h4>

<ul>
    <li>
        optimisation PNG, JPG, SVG</li>
</ul>

<p>
    La tâche <strong>“img”</strong> du fichier <code>gulpfile.js</code> :</p>

<pre class="code">
<code class="javascript"><span class="hljs-comment">// Tâche "img" = Images optimisées</span>
gulp.task(<span class="hljs-string">'img'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
  <span class="hljs-keyword">return</span> gulp.src(source + <span class="hljs-string">'/assets/img/*.{png,jpg,jpeg,gif,svg}'</span>)
    .pipe(imagemin())
    .pipe(gulp.dest(prod + <span class="hljs-string">'/assets/img'</span>));
});</code></pre>

<h3>
    unCSS pour alléger les fichiers</h3>

<p>
    <strong>unCSS</strong> est un outil (disponible en versions <a href="https://www.npmjs.com/package/grunt-uncss">grunt</a> et <a href="https://www.npmjs.com/package/gulp-uncss">gulp</a>) permettant de supprimer les styles CSS non utilisés au sein de votre projet.</p>

<p>
    Il s'agit d'une véritable bénédiction lorsque vous travaillez à l'aide de frameworks CSS tels que Bootstrap ou KNACSS car il va réduire drastiquement le poids de vos fichiers CSS :</p>

<blockquote class="twitter-tweet" lang="fr">
    <p dir="ltr" lang="en">
        If you're building a <a href="https://twitter.com/hashtag/twitterbootstrap?src=hash">#twitterbootstrap</a> page with <a href="https://twitter.com/hashtag/grunt?src=hash">#grunt</a> or <a href="https://twitter.com/hashtag/gulp?src=hash">#gulp</a>, consider using <a href="https://twitter.com/hashtag/uncss?src=hash">#uncss</a>. &gt; CSS file reduced from 150kB to 11kB! <a href="https://twitter.com/hashtag/Javascript?src=hash">#Javascript</a></p>
    — Sascha Sambale (@mastixmc) <a href="https://twitter.com/mastixmc/status/575676418266390529">11 Mars 2015</a></blockquote>

<p>
    unCSS fonctionne bien évidemment sur un ensemble de fichiers et fait très bien son boulot... à condition que vous n'ayez oublié aucun fichier dans la boucle !</p>

<p>
    Sur le site de <strong>goetter.fr</strong>, la feuille de style CSS minifiée est passée <strong>de 16ko à 10ko</strong> après l'action de unCSS, soit une réduction de 40%. Imaginez le résultat sur des gros fichiers de centaines de ko. Le pire est que le site fonctionne toujours, rien n'est cassé :)</p>

<p>
    unCSS a été intégrée dans ma tâche "css" ainsi :</p>

<pre class="code">
<code class="javascript">// Tâche "css" = LESS + autoprefixer <strong>+ unCSS</strong> + minify
gulp.task('css', function() {
  return gulp.src(source + '/assets/css/*.less')
    .pipe(less())
    .pipe(autoprefixer())
    <strong>.pipe(uncss({</strong>
      <strong>html: [source + '/{,_includes/}/{,conf/}/{,livres/}*.html']</strong>
    <strong>}))</strong>
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(minify())
    .pipe(gulp.dest(prod + '/assets/css/'));
});</code></pre>

<p>
    <span><strong>Explications :</strong> tous les fichiers HTML à la racine du site ainsi que ceux situés dans les dossiers </span><code>/conf</code><span>,</span><span> </span><code>/livres </code><span>et </span><code>/_include</code><span> seront testés par un navigateur fantôme. Tous les styles qui ne sont pas utilises au sein de ces fichiers sont supprimés.</span></p>

<h3 id="des-includes-en-html">
    Des includes en HTML</h3>

<p>
    Passons à présent à des tâches moins classiques, voire carrément spécifiques à mes besoins et envies.</p>

<p>
    En tant qu'intégrateur HTML/CSS, j’ai toujours été quelque peu frustré de devoir passer par un langage serveur pour faire des inclusions de fichiers partiels (header, footer, nav, etc.).</p>

<p>
    Bien-sûr, il est possible de passer par JavaScript, AJAX, webcomponents / polymer ou des langages tels Jade, HAML ou Handlebars pour atteindre cet objectif, mais en toute honnêteté je ne suis pas fan de rajouter une couche de complexité à mon workflow et je ne supporte pas les syntaxes “à la Jade”.</p>

<p>
    Je veux écrire du bête HTML <strong>et</strong> avoir des include de fichiers. Je veux le beurre et l’argent du beurre. Et là, sur mon site perso, je peux me le permettre.</p>

<p>
    Par chance, puisque mon workflow est déjà basé sur NodeJS / Gulp, il existe des plugins pour parvenir à mes fins.</p>

<p>
    L’un de ces plugins est <strong><a href="https://www.npmjs.com/package/gulp-html-extend">“Gulp HTML extend”</a></strong>.</p>

<p>
    À l’aide de simples commentaires HTML, il offre (au-moins) deux fonctionnalités qui m’intéressent tout particulièrement :</p>

<ul>
    <li>
        les inclusions de fichiers partiels</li>
    <li>
        l’utilisation de variables</li>
</ul>

<p>
    Le principe est simplissime : les instructions se présentent sous forme de commentaires HTML (pour préserver la syntaxe et la validité), par exemple <code>&lt;!-- @@include fichier.txt --&gt;</code> pour inclure un fichier dans le document, ou bien <code>&lt;!-- @@var variable --&gt;</code> pour inclure une variable.</p>

<p>
    Voici un exemple de page <code>index.html</code> avant compilation :</p>

<pre class="code">
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- @@include _includes/head.html {"title": "Mon site web personnel", "path": "../"} --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span></code></pre>

<p>
    Le fichier inclus <code>head.html</code> :</p>

<pre class="code">
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span><span class="hljs-comment">&lt;!-- @@var title --&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
...
<span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"&lt;!-- @@var path --&gt;assets/css/styles.min.css"</span> <span class="hljs-attribute">media</span>=<span class="hljs-value">"all"</span>&gt;</span></code></pre>

<p>
    Et le résultat compilé <code>index.html</code> en prod :</p>

<pre class="code">
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>Mon site web personnel<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
...
<span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"../assets/css/styles.min.css"</span> <span class="hljs-attribute">media</span>=<span class="hljs-value">"all"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span></code></pre>

<p>
    Voici la tâche <strong>“html”</strong> du fichier <code>gulpfile.js</code> correspondant à mes besoins :</p>

<pre class="code">
<code class="html"><span class="hljs-comment">// Tâche "html" = includes HTML</span>
gulp.task(<span class="hljs-string">'html'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
  <span class="hljs-keyword">return</span>  gulp.src(source + <span class="hljs-string">'/{,conf/}/{,livres/}*.html'</span>)
    <span class="hljs-comment">// Generates HTML includes</span>
    .pipe(extender({
      annotations: <span class="hljs-literal">false</span>,
      verbose: <span class="hljs-literal">false</span>
    })) <span class="hljs-comment">// default options</span>
    .pipe(gulp.dest(prod))
});</code></pre>

<p>
    <strong>Explications :</strong> tous les fichiers HTML à la racine du site ainsi que ceux situés dans les dossiers <code>/conf</code> et <code>/livres</code> seront compilés en tenant compte des inclusions et des variables fournies.</p>

<p>
    La documentation et les options de ce plugin : <a href="https://www.npmjs.com/package/gulp-html-extend">https://www.npmjs.com/package/gulp-html-extend</a></p>

<h3 id="critical-css">
    Critical CSS</h3>

<p>
    Autre plugin que j’ai pu mettre en place sur mon site perso : “Critical CSS”.</p>

<p>
    Vous avez déjà certainement été confronté à l’un des conseils récurrents de <a href="https://developers.google.com/speed/pagespeed/insights/">Google PageSpeed Insights</a> (l’outil de perf web très pratique pour tester son site mobile et desktop) qui est <q><em>Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison</em></q>.</p>

<p>
    L’explication est celle-ci : JavaScript et CSS retardent l’affichage de la page tant qu’ils ne sont pas chargés.<br/>
    Google considère que la partie visible d’une page web, c’est à dire tout se qui se trouve au-dessus de la <em>ligne de flottaison</em> (ou “above the fold”), devrait être affiché instantanément, soit :</p>

<ul>
    <li>
        en différant ou en rendant les ressources asynchrones (<code>async</code>, <code>defer</code>),</li>
    <li>
        soit en éliminant toutes les requêtes de <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=fr">styles CSS “critiques”</a> (= ceux participant à l’affichage du design au dessus de la ligne de flottaison). Pour cela, la méthode est d’insérer ces CSS “critiques” directement dans la page HTML (on “inline” les CSS dans l’élément <code>&lt;style&gt;</code> comme au bon vieux temps des newsletter).</li>
</ul>

<p class="center">
    <img alt="ligne de flottaison" src="/xmedia/doc/full/ligne_de_flottaison.png"/></p>

<p>
    Sans surprise, la méthode d‘“inliner” les CSS dans l’élément <code>&lt;style&gt;</code> présente un sacré paquet d’inconvénients (un peu les mêmes que l’on retrouve avec les <code>data-URI</code>) :</p>

<ul>
    <li>
        les fichiers HTML sont beaucoup plus lourds</li>
    <li>
        ils sont également moins lisibles et plus difficiles à maintenir</li>
    <li>
        c’est moche</li>
</ul>

<p>
    La contrepartie est que les avantages... ne sont pas négligeables non plus :</p>

<ul>
    <li>
        les résultats sont très probants en terme de performance d’affichage (des gains de parfois plusieurs secondes)</li>
    <li>
        de très gros sites comme <a href="http://www.theguardian.com/">The Guardian</a> ont réussi à charger leur page d’accueil en moins de 1 seconde grâce à l’optimisation de leurs CSS “critiques”.</li>
    <li>
        il est possible d’automatiser ce processus</li>
</ul>

<p>
    Quelques ressources intéressantes sur ce sujet qui ne l’est pas moins :</p>

<p>
    Si vous ne deviez retenir qu’une seule ressource, je vous invite vivement à vous imprégner de la conférence de Patrick Hamann (The Guardian), “CSS and the critical path” dont voici <a href="https://speakerdeck.com/patrickhamann/css-and-the-critical-path">les slides</a> et <a href="https://www.youtube.com/watch?v=_0Fk85to6hA">la vidéo associée</a>.</p>

<h4 id="critical-css-en-pratique">
    Critical CSS en pratique</h4>

<p>
    Il existe deux outils connus et suffisamment maintenus et testés pour réaliser la tâche de “inliner des CSS” : <a href="https://github.com/addyosmani/critical"><strong>Critical</strong></a> d’Addy Osmani et <a href="https://github.com/filamentgroup/criticalCSS">CriticalCSS</a> de Filament Group. Les deux proposent une version Grunt et Gulp.</p>

<p>
    Pour ma part et sur mon site perso <a href="http://goetter.fr">goetter.fr</a>, j’ai utilisé le premier de ces deux outils, <strong>Critical</strong>, en version Gulp bien sûr.</p>

<p>
    Voici ma tâche <strong>“critical”</strong> du fichier <code>gulpfile.js</code> :</p>

<pre class="code">
<code class="javascript"><span class="hljs-comment">// Tâche "critical" = critical inline CSS</span>
gulp.task(<span class="hljs-string">'critical'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
  <span class="hljs-keyword">return</span>  gulp.src(prod + <span class="hljs-string">'/*.html'</span>)
    .pipe(critical({
      base: prod,
      inline: <span class="hljs-literal">true</span>,
      width: <span class="hljs-number">320</span>,
      height: <span class="hljs-number">480</span>,
      minify: <span class="hljs-literal">true</span>
    }))
    .pipe(gulp.dest(prod));
});</code></pre>

<p>
    Le principe général est celui-ci :</p>

<ul>
    <li>
        un navigateur fantôme parcourt la(es) page(s) concernée(s) dans les dimensions précisées (ici 320x480)</li>
    <li>
        il en déduit les CSS “critiques”, participant à l’affichage au dessus de la ligne de flottaison</li>
    <li>
        il les extrait et les insère directement (minifiés) au sein d’une balise <code>&lt;style&gt;</code> dans la page</li>
    <li>
        le “reste” de la feuille de style est chargée de manière asynchrone via JavaScript et <a href="https://github.com/filamentgroup/loadCSS">LoadCSS</a></li>
    <li>
        pour les navigateurs sans JS, la feuille de style est chargée au sein d’un <code>&lt;noscript&gt;</code></li>
    <li>
        et tout ça tout seul comme un grand !</li>
</ul>

<p>
    Dans mon cas, j’ai décidé que seront concernés tous les fichiers à la racine du site (et uniquement ceux-là).</p>

<h4 id="critical-efficace">
    Critical : efficace ?</h4>

<p>
    Maintenant que l’on s’est bien amusé, passons quelques tests pour découvrir si ça en valait vraiment la peine…</p>

<h5 id="daprès-google-pagespeed-insights">
    D’après Google PageSpeed Insights</h5>

<p>
    <a href="https://developers.google.com/speed/pagespeed/insights/">Google PageSpeed Insights</a> donne une “note globale de performance” sur 100 à votre page en version mobile et desktop.</p>

<ul>
    <li>
        <strong>Avant Critical :</strong>
        <ul>
            <li>
                note mobile : 91/100</li>
            <li>
                note desktop : 97/100</li>
        </ul>
    </li>
    <li>
        <strong>Après Critical :</strong>
        <ul>
            <li>
                note mobile : <strong>99/100</strong>*</li>
            <li>
                note desktop : 99/100* <em>(*le 1% restant est dû à… la présence du script Google Analytics)</em></li>
        </ul>
    </li>
</ul>

<p>
    Illustration avant critical :</p>

<p class="center">
    <img alt="avant critical" src="/xmedia/doc/full/before-critical.png"/></p>

<p class="center">
    Illustration après critical :</p>

<p class="center">
    <img alt="après critical" src="/xmedia/doc/full/after-critical.png"/></p>

<h5 id="daprès-dareboost">
    D’après Dareboost</h5>

<p>
    <a href="https://www.dareboost.com">Dareboost</a> testé sur mobile (Nexus 5, en 3G et en France) attribue une note totale de 92% avant et après critical.</p>

<p>
    <strong>Avant Critical :</strong></p>

<ul>
    <li>
        chargement complet en 2.30s (visuellement complet en 1.37s)</li>
    <li>
        <a href="http://www.sitepoint.com/speed-index-measuring-page-load-time-different-way/">speed index</a> de 607</li>
</ul>

<p>
    <strong>Après Critical :</strong></p>

<ul>
    <li>
        chargement complet en 2.01s <strong>(visuellement complet en 0.80s)</strong></li>
    <li>
        speed index de 436</li>
</ul>

<p>
    Illustration : comparaison avant et après :</p>

<p class="center">
    <img alt="avant et après critical" src="/xmedia/doc/full/dareboost-before-after-critical.png"/></p>

<h3 id="la-tâche-de-mise-en-production">
    La tâche de mise en production</h3>

<p>
    Voici la tâche complète de mise en production de l’ensemble des contenus de <code>_src/</code> vers <code>_dist/</code> que j’emploie :</p>

<pre class="code">
<code class="javascript">// Tâche "prod" = toutes les tâches ensemble
gulp.task('prod', gulpsync.sync(['css', 'js', 'html', 'critical','img']));</code></pre>

<p>
    En un clic, voici les actions menées automatiquement :</p>

<ul>
    <li>
        styles LESS compilés en CSS</li>
    <li>
        préfixes CSS3 ajoutés au besoin</li>
    <li>
        concaténation et minification des fichiers CSS</li>
    <li>
        concaténation et minification des fichiers JavaScript</li>
    <li>
        optimisation des images PNG, JPG et SVG</li>
    <li>
        compilation des fichiers HTML pour permettre les inclusions de fichiers partiels et des variables</li>
    <li>
        “inline” des styles CSS “critiques” directement dans la page</li>
</ul>

<p>
    Et pour finir, voici la tâche "watch" qui va surveiller en continu toutes les modifications opérées sur les fichiers LESS et HTML et qui va automatiquement lancer les tâches correspondantes :</p>

<pre class="code">
<code class="javascript">// Tâche "watch" = je surveille LESS et HTML
gulp.task('watch', function () {
  gulp.watch(source + '/assets/css/*.less', ['css']);
  gulp.watch(source + '/{,conf/}/{,livres/}*.html', ['html']);
});</code></pre>

<p>
    Si l'envie vous prend et si vous avez envie de tester tout ça chez vous, vous pouvez récupérer les fichiers <code>package.json</code> et <code>gulpfile.js</code> sur mon espace Gist.</p>

<p>
    <a class="demo" href="https://gist.github.com/raphaelgoetter/9713f2d953b645b342a5">Télécharger les fichiers</a></p>

<h3>
    Que conclure de tout ça ?</h3>

<p>
    Disposer d'un environnement de travail automatisé (au moins en partie) est devenu une évidence de nos jours où nous ne pouvons plus nous contenter d'écrire du HTML et du CSS. L'industrialisation de notre métier exige d'aller vite, de tester sur de nombreux devices, d'éviter les régressions, de maintenir son code et de le rendre le plus performant possible.</p>

<p>
    Des outils tels que Grunt, Gulp ou Brunch offrent un "workflow" automatique pour la plupart des tâches courantes.</p>

<p>
    Pour ce qui est du reste, par exemple inclure des fichiers en HTML ou rendre inline ses CSS "critiques"... <em>il y a aussi une application pour ça ! </em>:)</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://www.alsacreations.com/tuto/lire/1685-ebauche-de-workflow-gulp-taches-uncss-includes-critical-css.html">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>