Catégorie : Gulp

[Gulp] Utilisation de Blendid! Bonnes pratiques, astuces…

Importer et étendre Foundation for Sites 6

Foundation s’importe dans le dossier node_modules en tant que dev dependency. Depuis la racine de votre Blendid, taper:

…où #v6.4.3 correspond à la version de Foundation que vous souhaitez utiliser.

Ensuite, éditer le fichier config/task-config.js comme suit:

Si vous ne souhaitez pas les modifier, vous pourrez utiliser les sources de Foundation consignées dans le dossier node_modules/foundation-sites/ sans avoir à les surcharger dans votre dev en ajoutant ceci au fichier src/stylesheets/app.scss:

Si vous souhaitez modifier un fichier de Foundation, vous devez obligatoirement le surcharger dans votre dev. Nous allons par exemple surcharger typography/_base.scss. Pour ce faire, nous allons être obligé de surcharger également le fichier typography/_typography.scss (sans le modifier) car il contient le @import 'base'; qui importe le fichier qu’on souhaite modifier (et node-sass includePaths n’est pas assez intelligent pour vérifier la surcharge de fichier importés dans des fichiers qui ont eux-mêmes déjà été importés).

[Police d’icônes] bugs connus et leurs solutions

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Vous avez ajouté ou retiré des icônes de votre police et, après mise à jour sur votre serveur, l’affichage des polices est décalé et ce n’est plus les bonnes polices qui s’affichent au bon endroit (je sais, c’est pas très français tout ça, mais vous comprenez ce que je veux dire, non?)

Le problème peut venir de la mise en cache des fonts et le blog CSS Tricks propose plusieurs solutions dans son article Strategies for Cache-Busting CSS.

C’est notamment la seconde solution qui est intéressante pour un dev front-end: Changing file name.
Elle consiste (pour faire simple) à attribuer un libellé unique au fichier incriminé à chaque fois qu’il est modifié. De cette manière, le serveur (quasiment) peu importe comment il est configuré, verra que c’est un nouveau fichier et en tiendra compte lors du prochain affichage d’une page dans un navigateur.

css-tricks.com-Strategies for Cache-BustingCSS (version PDF pour la postérité).

Une solution à mettre en place via Gulp

gulp-iconfont issue – font change so every build. One think bothers me: on every build of the iconfont the resulting font changes so it’s in my local changes all the time. Why the font changes despite I’m not changing the svg icons? How can I solve this issue?

See the gulp-svg2ttf timestamp option https://github.com/nfroidure/gulp-iconfont#iconfontoptions.

I have solved this problem as follows: first I generate a checksum and store it in the package.json with the current timestamp. This way the timestamp changes only when the checksum changes.

The relevant parts of my gulpfile:

Ce n’est pas la bonne icône qui s’affiche sous Chrome

Après avoir ajouté à la volée une ou plusieurs icônes à votre bibliothèque custom, certaines icônes en front sont remplacées par d’autres… C’est un souci avec les caches du navigateur Chrome. Il est évoqué ici: Issue with Icon Fonts in Chrome 23.

La solution consiste à déclarer le(s) format(s) woff jsute après le format eot et avant tous les autres:

Source: Bulletproof @font-face Syntax par Paul Irish.

Une deuxième solution consiste à ne générer que le format woff, la prise en charge de ce dernier étant particulièrement étendue aujourd’hui:

[NPM][Gulp] Ajouter un custom build de Modernizr à un projet

Ajouter les sources de Modernizr comme dépendances NPM

Source: Modernizr documentation > Downloading Modernizr > Command Line Config.

Installer également le paquet gulp-modernizr.

Ce plugin permet tout un tas de paramétrages détaillés ici. Pour l’heure, nous exploiterons uniquement les champs options et tests.

gulpconf.json

Ici je créer un custom build avec uniquement la feature touchevents à déclarer sous tests.

Connaître les options requises en fonction des features qu’on souhaite embarquer

Pour vous aider à savoir quelles sont les options requises en fonction des features que vous souhaitez utiliser, vous pouvez créer votre custom build via l’interface en ligne disponible sur modernizr.com.

Choisissez par exemple la feature touchevents et cliquez sur BUILD (bouton rose en haut à droite). Une modale apparaît. Sous Grunt config cliquez sur « Copy to clipboard ». Le code suivant apparaît:

Les champs options et tests révèlent les pré-requis à renseigner dans la configuration de votre plugin Gulp.

gulpfile.js

Déclarer gulp-modernizr:

Puis initialiser la tâche de build:

[Gulp][SASS] Exploiter l’option includePaths de gulp-sass pour définir, en cas de surcharges, un ordre de priorité des chemins vers lequels Gulp ira regarder quand il rencontrera un @import

(Ma question) gulp-sass includePaths parameter and import of partial files declarations that are not in the main.scss issue sur Stack Overflow.


Problème: I’m using gulp-sass and would like to define a load_path so that I don’t have to have really long @import rules voor bower dependencies e.g..

…à la place de:

Quel serait le meilleur moyen pour parvenir à ce résultat en utilisant gulp-sass?

Exemple d’utilisation de l’option includePaths de gulp-sass avec les sources SCSS de Foundation 6 for Sites

ATTENTION: gulp-sass semble ne pas digérer le globbing dans les chemins.

gulpconf.json

  • config.paths.styles.src: le chemin vers vos SCSS custom
  • config.paths.styles.srcIncludePaths: dans mon exemple ci-dessous, on répète le chemin vers les SCSS custom, puis on déclare le chemin vers les surcharges de SCSS relatives aux sources de Foundation ("src/style/vendor-override/foundation-sites/scss/") puis pour finir on déclare le chemin vers les sources out-of-the-box de Foundation qui seront utilisées si Gulp ne trouve aucune surcharge (les surcharges doivent respecter l’arborescence, les noms des dossiers et des fichiers de l’original pour être prises en compte!).

gulp-sass ne supportant pas le globbing dans les chemins, il faudra déclarer des chemins très précis vers vos vendors et vos vendors-override ici. Le dossier vendors-override devra toujours respecter la même arborescence que le dossier vendor pour que l’héritage fonctionne.

gulpfile.js

main.scss

Cette partie de ma main.scss comporte un copier/coller du contenu du fichier foundation.scss qui met en place les bases du framework côté SCSS.

Je n’ai rien modifié mise à part l’ajout de mon propre fichier settings :

Gulp va d’abord chercher les fichiers à importer dans src/style/ (il n’y trouvera rien pour ce qui est de Foundation) avant de se rabattre sur src/style/vendor-override/foundation-sites/scss/, puis sur src/vendor/foundation-sites/scss/.


  • sass-include-paths – Generates include paths for node-sass for packages from popular package managers like npm, bower, ruby gem, ruby bundler.
  • What does Gulp’s includePaths do?

    The SASS compiler uses each path in loadPaths when resolving SASS @imports.

    Note that the compiler resolves each @import by considering each path in loadPaths from left-to-right (similar to $PATH in a UNIX environment). An example scenario could be:

    There was no _x.scss file in styles/i, so it moved on to look inside styles/ii. Eventually it found an _x.scss file in styles/iii and finished the lookup. It looks at each folder in loadPaths starting from the first element in the array and moving right. After attempting all paths, if we can’t find the file, then we declare that this @import statement is invalid.

    Load paths is useful if you have a external library (like bournon/neat). The external library is large and will use lots of @import statements. However they won’t match your project folder structure and so won’t resolve. However, you can add an extra folders to the loadPaths so that the @imports inside the external library do resolve.

  • gulp-sass work around for load_path support?

    After struggling with this myself I found a option in gulp-sass :

    Example:

  • Import and globbing in SASS

[Gulp] Spritesmith

Utilisation de gulp.spritesmith-multi, ATTENTION: je déconseille l’utilisation de ce plugin pour créer plusieurs sprites à partir d’une tâche Gulp unique. Préférer gulp-spritesmith et l’utilisation de gulp-folders.

Ressources en ligne:

Gulp – make one sprite per folder

Source: Gulp – make sprites by folder

Plugins: path, gulp.spritesmith, merge-stream, gulp-folders, imagemin, imagemin-pngquant ATTENTION: dans le sujet StasckOverflow, l’auteur omet le plugin gulp-folders dans la liste des paquets requis.

Créer un sprite bitmap (PNG, JPG) par dossier

Spritesmith : Multiple spritesheets, one css file?

Source: Multiple spritesheets, one css file?

It’s possible to have multiple sprite sheets based on directory structure, but all de CSS go to just one single file?
For example, given this directory structure:

it’s possible to generate two spritesheets icons-spritesheet.png and logos-spritesheet.png, and then all the CSS just to one file, lets say css/sprites.css.

Error: Cannot find module ‘gulp.spritesmith’

Si ce message d’erreur apparaît au lancement de la tâche Gulp, tenter une installation avec la commande suivante et à la racine du dossier qui contient la gulpfile.js :

[Gulp] Supprimer un ensemble de fichiers ayant la même extension avec Del et la méthode .unshift() en omettant certains fichiers en particulier

Problème

J’ai une tâche style:clean qui supprime des fichiers inutiles et ayant l’extension *.css dans un dossier /style. Le plugin Del fonctionne très bien pour ça, mais j’avais besoin de déclarer le scope des fichiers à cibler par la tâche en 2 entités distinctes :

  • Le chemin vers le dossier style/ et le format de fichier à cibler (config.paths.styles.dest + '*.css').
  • Une liste de fichiers à ignorer (config.clean.style.ignore).

Lors de mes tests infructueux, les fichiers ignorés étaient supprimés.

Solution

La méthode .unshift() permet l’insertion d’éléments en début de tableau.

Dans mon fichier gulpconf.json:

Si vous n’avez pas de fichiers à ignorer, laissez le tableau vide comme ceci:

Dans mon gulpfile.js:

Optimiser ce code en passant par une fonction

ATTENTION: ce code ne fonctionne pas. En réalité, si vous avez plusieurs tâches de clean (css, js, etc…), le lancement d’une seule de ces tâches va également faire le travail de toutes les autres …

Exemple: je lance gulp js:clean et les fichiers CSS concernés par la tâche gulp css:clean sont effacés également.

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

Sources :

Problématique :

Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :

  1. L’ensemble des fichiers JS stockés dans un dossier ./src/js qui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets.
  2. .

  3. Une sélection de fichiers JS stockés dans un dossier ./src/vendor/[...] qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).

J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :

Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :

Solution :

A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :

[Gulp] Des icônes au format SVG dans vos projets avec gulp-svgstore

Voir une autre approche avec gulp-svg-sprites qui génère un sprite SVG et une feuille SASS avec des mixins prêts à l’emploi.

Des tutos sur la mise en place de sprites SVG avec gulp et le plug-in gulp-svgstore:

Icon System with SVG Sprites sur css-tricks.com.

Obtenir un guide de styles des icônes générées:

Des ressources à propos de SVG:

[Gulp] Gulpfile.js – Les bonnes pratiques de coding

Patterns et recettes

Des workflows Gulp sous GitHub