CategoryDevelopment workflow

[NPM] Résolution d’erreurs

tunneling socket could not be established, cause=getaddrinfo ENOTFOUND address address:8080

$ vim /home/intlangf/.npmrc et commenter la la ligne qui dirige vers le port 8080 :


Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x

Found bindings for the following environments:
– Linux 64-bit with Node.js 11.x


lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/bin/node -v
v8.10.0
lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/local/bin/node -v
v11.2.0

Lors de npm install ou npm rebuild, c’était « /usr/local/bin/node » qui était utilisé, au lieu de « /usr/bin/node »
Je n’ai pas trouvé où changer ça pour utiliser la bonne commande. j’ai donc renommé « /usr/local/bin/node » vers « /usr/local/bin/node.old » et créer un lien symbolique vers « /usr/bin/node » et là, ça passe.

[Bower] Astuces d’utilisation du gestionnaire de packages front-end

Installer un package non répertorié par Bower

Important : ne faites pas ça comme des sauvages. Tout se fait en ligne de commande.

  1. Aller sur la page github du package en question (dans notre exemple, gulp-sass).
  2. Récupérer l’URL *.git du repository (bouton vert « Clone or download » en haut à droite). Dans notre exemple : https://github.com/dlmanning/gulp-sass.
  3. En ssh, taper la commande bower install git://github.com/dlmanning/gulp-sass --save-dev (vous avez remarqué qu’on a changé le préfixe https en git et qu’on a ajouté le paramètre –save-dev afin que les informations sur ce nouveau package soient ajoutées dans le fichier bower.json).

Résolution de problèmes liés à votre mauvaise utilisation de Bower 😛

Error: Cannot find module ‘nom-du-module’

Intervient notamment lorsqu’un package non répertorié par Bower a été installé.
Il faut ré-installer le package avec npm en tapant sudo npm install -g <mon_bô_package>.

Error: EACCES: permission denied, open ‘/home/mco/.config/configstore/bower-github.json’

Quand on tape bower install et qu’on a l’erreur suivante :

Si bower install --allow-root renvoie aussi une erreur :

Taper les eux commandes suivantes :

…et retenter un bower install.

[Front-end development workflow] Les ressources en ligne pour utiliser Brunch

Bien démarrer avec Brunch

Plugins

Où trouver des plugins pour Brunch ?

Minification de code

  • clean-css
  • UglifyJS

Edition de code bi-directionnelle en temps réel

  • Emmet LiveStyle – The first bi-directional real-time edit tool for CSS, LESS and SCSS.
  • BrowserSync – Time-saving synchronised browser testing (CSS).
  • fb-flo – A Chrome extension that lets you modify running apps without reloading them (injecte CSS et JS).

[Gulp] Astuces d’utilisation et ressources en ligne

Ressources en ligne pour apprendre à maîtriser Gulp

Un peu de lecture au format PDF

A Gulp Workflow for Frontend Development Automation


Link

What does our Gulpfile do?

So what exact­ly does our Gulp fron­tend work­flow automa­tion do for us? Here’s a rundown:

  • Han­dles our CSS 
    • Com­piles all of our SCSS down to CSS, using a cache to make it faster
    • Auto-pre­fix­es our CSS for the browsers we support
    • Cre­ates SourceMaps for our CSS to make debug­ging easy
    • Pulls in CSS from any third-par­ty modules/​packages we use
    • Com­bines and mini­fies all of our CSS
  • Han­dles our JavaScript
    • Tran­spiles all of the JavaScript we write from ES6 to some­thing web browsers support
    • Pulls in JavaScripts from any third-par­ty modules/​packages we use
    • Ugli­fies our JavaScripts
    • Pulls in any JavaScripts we need to inline in our HTML separately
  • Han­dles live reloading
    • CSS/SCSS changes cause an imme­di­ate brows­er repaint with­out a page load
    • JavaScript changes cause the brows­er to reload the page
    • Changes to our Twig/​HTML tem­plates cause the brows­er to reload the page
  • Gen­er­ates Crit­i­calC­SS for our website
  • Runs an acces­si­bil­i­ty audit on our website
  • Gen­er­ates a cus­tom icon font using only the glyphs we use via Fontel­lo
  • Gen­er­ates all of the var­i­ous fav­i­cons for our web­site (and the HTML code for them) from a sin­gle source image
  • Loss­less­ly min­i­mizes all of the the images our web­site uses via imagemin

…and a bit more too! But that’s a quick overview of what a work­flow automa­tion can do for you. And it’s portable from project to project, because of sep­a­ra­tion of con­cerns that puts the data into our package.json.

Gulp 4

Débuter avec Gulp

Les plug-ins Gulp utiles

Astuces d’utilisation de Gulp

Installer Gulp en tant que package Bower

bower install gulp --save-dev

Installer un plugin Gulp non répertorié en tant que package Bower

bower install <url_git://_du_plugin> --save-dev suivi de sudo npm install <nom_du_plugin> -g. Exemple :

Copier uniquement des fichiers (et pas un chemin complet) dans un dossier

Exemple : j’ai des webfonts accessibles depuis src/webfonts/MyFontsWebfontsKit/webfonts/ et je souhaite les copier via Gulp vers image/webfonts/ sans conserver l’arborescence initiale.

Utiliser le plugin gulp-flatten.

Afficher des logs d’erreurs quand la compilation SASS est foireuse

Logger les erreurs de compilation pour n’importe quel plugin

Ajouter la ligne .pipe(uglify()).on('error', function(e){console.log(e);}). Exemple d’intégration avec gulp-uglify :

Définir un ordre dans lequel les fichiers doivent être chargés

Il peut-être est important que certains fichiers JS soient chargés avant d’autres dans un projet donnée sous peine d’avoir une exception JS au chargement de la page.

Il faut donc dire à Gulp l’ordre dans lequel les fichiers doivent être chargés. Pour cela nous allons utiliser un tableau pour déclarer nos fichiers au lieu d’une regex :

Mettre en place des tâches de cleaning

Nous allons rajouter les tâches de « cleaning » qui serviront à supprimer du dossier contenant les fichiers destinés à la prod certains fichiers avant l’exécution des tâches :

Maîtriser l’ordre dans lequel les tâches Gulp sont exécutées avec gulp.parallel et gulp.series

Solution ultime: Plug-in run-sequence.


To watch and run a single task upon a change, you will use the following syntax:

If your project requires you to run multiple tasks upon a change, you will use one of the following syntaxes:

Simply replace the task string with the method that you need to use for your project and then pass in all tasks that need to be ran as arguments.


Source : How to run Gulp tasks synchronously/one after the other.

Dans un snippet comme celui-ci :

Dans la tâche develop, je veux d’abord exécuter clean et, après seulement, exécuter coffee.

La solution à ce problème est détaillée dans la documentation de Gulp :

Résolutions d’erreurs liées à l’utilisation de Gulp

Plugin gulp-imagemin – SyntaxError: Use of const in strict mode

Message d’erreur complet lorsqu’on lance Gulp et que le script utilise le plugin gulp-imagemin:

Solution ici : Upgrading Node.js to latest version

The module n makes version-management easy:
sudo npm install n -g
sudo n 0.12.2

For the latest stable version:
sudo n stable

Il est possible qu’avec une mise à jour de nodejs, un autre message d’erreur intervienne après lancement de la commande gulp watch :

A ce moment, il ne faut pas tenter de rebuilder ou de ré-installer node-sass, mais de réinstaller gulp-sass :
sudo npm uninstall --save-dev gulp-sass
sudo npm install --save-dev gulp-sass@2

Plugin gulp-imagemin Unhandled rejection Error :

Solution : I am getting this when running gulp serve #101.

Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 6.x

Contrairement à ce que propose le message d’erreur un peu plus bas (Run <code>npm rebuild node-sass to build the binding for your current environment.), il ne faut pas tenter de rebuilder ou de ré-installer node-sass, mais de réinstaller gulp-sass :

Au lancement d’une ou plusieurs tâches Gulp, des problèmes de droits sur les fichiers de destination interviennent :

Attention : dans mon cas, l’erreur provenait du fait que je confondais les commandes « chmod » et « chown ». Message d’erreur complet :

Pour vérifier l’owner et les droits du fichier : ls -l <chemin_vers_le_fichier>. Ce qui donne :

En remontant jusqu’à la racine du dossier responsive, je me suis rendu compte que tout le dossier ainsi que l’ensemble de ses sous dossiers et fichiers avait pour owner « 777 ». J’avais probablement dû, à un moment donné, essayer de donner un maximum de droits en lecture/écriture à ce dossier ou à un fichier en particulier, mais en tapant la commande « chown » au lieu de « chmod »! L’owner du fichier est donc devenu 777. Cet utilisateur n’existe pas sur ma machine. Il faut donc redonner l’appartenance du dossier ou du fichier incriminé à un utilisateur existant.

sudo chown -R intlangf:intlangf /home/intlangf/change30/alainflou/themes/responsive pour donner tous les droits à l’owner intlangf sur le dossier responsive et tous ses sous-dossiers (avec « -R »). Résultat :

Moving NPM packages main files out or bower_components directory

Problem : You’ve got directory bower_components full of packages downloaded from NPM, and there’s a lot of fluff, tests and examples, those serve an important purpose to the development of the project, but has little value to the end user. Most of those files don’t belong to the end product and should not be included to the project repo. That’s what this post is all about, moving packages main files out or bower_components.

gulpfile Cédric

TODO

  • Compression du sprite png
  • Compression des icones svg avec création de la police
  • Séparation plug-ins Gulp dans bower.json
  • Régler le watch pour que la tâche Gulp se relance après des modifs sur les fichiers à surveiller
  • mettre une option comme –watch pour qu’elle tourne en boucle, et par défaut elle rendrait la main

[Yeoman] Réussir à installer Yeoman sur Ubuntu en 3 étapes

Source : Yeoman: Getting it to Work on Ubuntu

Si l’installation de Yeoman sur Ubuntu Server vous pète à la tronche (en vous affichant, par exemple, un message d’erreur de ce style) :

1. Installer Node

2. Pouvoir tout installer avec NPM

3. Installer Yeoman

Tester en tapant simplement la commande :

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑