. WebdeZign
web design, intégration web et WordPress

J’ai réussi à installer Gulp !! Sass, à nous deux !

Oui, pour moi c’est un grand jour !! Parce qu’en plus d’avoir réussi à installer un ‘manager de tâches’ via la ligne de commande (l’effrayant Terminal sur Mac…) et à mettre en place la compilation et la minification automatiques des fichiers de styles écrits en Sass, cela m’a imposé un exercice inédit que j’ai réalisé sans même me rendre compte de ce que je faisais : j’ai créé mon premier script !!

Mais avant de vous expliquer tout ça le plus précisément possible, je vais tout d’abord rendre à César ce qui lui appartient, c’est-à-dire remercier mes copains de la communauté pour leur aide au moment où ça coinçait (merci les potos !) ainsi que citer les deux articles qui m’auront été très utiles dans ce pas en avant :


En fait, hier je suis tombée sur un ‘os à ronger’ en dénichant ‘un truc’ au cours de ma veille quotidienne : http://corpuscss.com

webdezign-20151103-corpus-front

 

Ce layout responsive, style Bootstrap ou Zurb Foundation, m’a plu. J’ai donc creusé et me suis retrouvée face à des fichiers exclusivement codés en Sass. J’aurais très bien pu me diriger vers un convertisseur .scss > .css mais je savais également que, ce faisant, j’allais perdre toute la souplesse réputée des préprocesseurs quand il s’agit de webdesigner un site de A à Z et d’écrire du CSS structuré, organisé et complet … ^^ Comme le code à télécharger se trouvait sur GitHub (voir la capture d’écran), c’est là, en voyant la liste des fichiers, que j’ai compris que je me retrouvais à nouveau face à ce ‘monstre’ nommé Gulp (chez d’autres, il s’appelle Grunt, mais c’est du pareil au même !!).

webdezign-20151103-corpus-github

 

Pour parler en termes peut-être plus clairs aux novices de ce sujet, et surtout pour poser la problématique, voyons nos ingrédients de départ :

Sass (comme Less) est une façon d’écrire du CSS qui bénéficie d’une ‘ergonomie’ pointue mais moins rébarbative ou répétitive. Par contre, pour que le navigateur puisse afficher correctement le layout, le design du site, il doit recevoir des règles de style écrites en CSS, alors que les préprocesseurs fournissent des fichiers .scss. Ces derniers doivent donc être ‘convertis’ et ‘le système’ Gulp produit, sans toucher aux fichiers originaux, un fichier CSS utile au navigateur.

Les fichiers Sass font appel à la notion de ‘variable’. Imaginez que vous ayez choisi #502694 comme couleur d’accentuation du design de votre site, à côté de deux autres couleurs plus neutres que je vous laisse choisir à votre goût. Sur une feuille de style CSS ‘classique’, vous avez donc 3 propriétés de couleur que vous allez ‘insérer’ à droite et à gauche dans vos propriétés. Avec Sass, la couleur d’accentuation, les couleurs primaire et secondaire, font l’objet de variables dédiées, regroupées avec d’autres dans un court fichier, ce qui permet de modifier très facilement une des couleurs, sur une seule ligne de code, avec une mise à jour automatique – au moment de la compilation et de la minification –  de la variable correspondante au travers de toutes les propriétés de style.

Mais cela implique également qu’à chaque changement d’un (ou de plusieurs) des fichiers .scss (Sass) du projet, il faille re-compiler et re-minifier le style Sass en style CSS, et c’est là que ça se complique dans l’idée … C’est là qu’un ‘manager de tâches’ et un ‘compilateur-minificateur’ sont indispensables, et qu’automatiquement, dès la 3e ligne, les articles répondant à cette recherche parlent de ligne de commande et de npm, de Node.js, de Gulp et de Grunt (entre autres…), parce que c’est précisément ce pour quoi ils sont faits !

Je pense que le fait d’avoir eu un projet Sass en main (le framework Corpus) pour démarrer cet apprentissage a grandement participé à ma réussite. Cela m’a donné la motivation (j’avais très envie de pouvoir utiliser Corpus ou à tout le moins jouer avec) et la matière nécessaire à l’exercice. Ainsi, aujourd’hui, j’ai donc successivement :

  • installé Node.js et npm (ça va ensemble, comme j’ai compris)
  • installé Gulp
  • démarré un projet en Sass
  • configuré mon projet pour Gulp
  • automatisé la tâche de compilation et minification des fichiers Sass en CSS

et je vais tenter de récapituler tout ça ci-dessous, de manière à bien le mémoriser et à le partager.

Installer Node.js / npm

On démarre tout d’abord avec une installation classique, avec boîte de dialogue, ‘validation des paquets’ et tout l’toutim. Faciiiiile ! Et ce qu’il faut installer se trouve ici : https://nodejs.org. Je ne vous fais pas l’affront de vous expliquer quoi que ce soit sur cette installation, hein … Ce n’est qu’une fois ce logiciel installé que les choses sérieuses vont commencer avec l’entrée en scène de la ligne de commande, dénommée le Terminal sur Mac (cherchez dans les utilitaires de Mac pour le localiser).

https://openclassrooms.com/courses/des-applications-ultra-rapides-avec-node-js/installer-node-js

Installer Gulp

Via cette ligne de commande donc, il nous faut maintenant réaliser une première étape qui est celle d’installer Gulp de manière globale (par la suite, l’installation d’autres modules Gulp se fera exactement la même chose).

npm install -g gulp

Si vous recevez en retour un message d’erreur lié à votre permission de faire cela, refaites pareil en insérant ‘sudo’ en début de ligne, ainsi :

sudo npm install -g gulp

Le mot de passe d’administrateur de votre ordinateur vous sera alors demandé. Tapez-le (le Terminal n’affichera aucun caractère) et pressez Enter. Regardez ce qui se passe, normalement tout devrait se mettre en place.

Et on en a fini avec les installations ‘globales’. Nous allons maintenant utiliser cet outil (Gulp) pour un projet en particulier et mettre en place la gestion de nos fichiers .scss. Et comme j’ai réalisé ce pas en avant sur la base de Corpus, je vais garder ce projet comme exemple.

Mise en place du projet Sass

Les fichiers téléchargés depuis Corpus sont exclusivement des fichiers .scss. C’est le fichier corpus.scss qui est au centre : il est très court et ne fait qu’importer l’un après l’autre les autres fichiers présents dans le projet Corpus. Ces fichiers ont un nom précédé d’un « _ » et contiennent – par partie du layout – les variables et les propriétés CSS de notre futur site.

Il nous faut donc les placer correctement dans l’arborescence de notre projet que nous allons créer ainsi, placée pour l’exemple dans le dossier –gulp-tutotita quelque part dans la partie ‘développement local’ de notre disque dur. Pour moi, ça donnera donc : http://localhost:8888/sites-local/gulp-tutotita/ …

index.html
--css
--fonts
--images
--sass
     corpus.scss
     --scss_parts
--scripts

Je mets donc le fichier corpus.scss dans le dossier /sass et tous les fichiers précédés d’un _ dans le sous-dossier /sass/scss_parts. D’autre part, je mets à jour le fichier corpus.scss avec les bons chemins vers les différents fichiers ‘parties’ de manière à refléter l’arborescence de mon projet.

webdezign-20151103-corpus-import-paths

 

Configurer mon projet pour Gulp

Ensuite, dans mon éditeur de code, je vais créer deux fichiers que je vais placer à la racine de mon projet /gulp-tutotita, à côté d’index.html : gulpfile.js (vide pour l’instant) et package.json, dans lequel je vais créer un élément vide en écrivant simplement

{}

= accolade ouverte accolade fermée

Une fois tous ces éléments en place, je vais pouvoir insérer Gulp dans mon projet : dans la ligne du commande du Terminal*, je vais me rendre dans le répertoire /gulp-tutotita et demander :

npm install --save-dev gulp gulp-sass

Cela va créer un nouveau sous-dossier dans mon projet qui s’appellera /node_modules et cela modifiera automatiquement le fichier package.json en y incluant les dépendances entre ce projet et Node.js (en l’occurrence, Gulp et Gulp-sass, les deux modules que nous avons installés). Il ne nous reste plus que la partie la plus pointue, la définition des tâches que nous assignons à Gulp pour automatiser la conversion de .scss vers .css.

Automatiser la tâche de compilation et de minification des fichiers Sass

Voici mon premier script !!!

var gulp = require('gulp'),
    sass = require('gulp-sass');

gulp.task('sass', function(){
 return sass('./sass/corpus.scss', { style: 'expanded' })
 .pipe(gulp.dest('./css'));
});

gulp.task('watch', function(){
gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp.task('default', ['sass', 'watch']);

Il y a dans ce code 4 commandes passées :

  1. la définition des modules actifs (‘gulp’ et ‘gulp-ruby-sass’)
  2. la définition d’une tâche dénommée ‘sass’ qui va ‘convertir’ le fichier ./sass/corpus.scss et envoyer le résultat à la destination ./css
  3. la définition de la tâche de surveillance (‘watch’) de tous les fichiers .scss placés dans ./sass/
  4. la commande d’exécution des tâches par défaut, en l’occurrence ‘sass’ et ‘watch’

C’est ce code que j’ai enregistré dans le fichier gulpfile.js présent à la racine de mon projet. Ainsi, désormais, il me suffit de demander gulp dans le Terminal pour qu’en parallèle avec mon travail de webdesigner, les deux mains dans le cambouis du code, la conversion soit faite dès le moment où j’enregistre mes modifications et je peux ainsi voir le résultat à l’écran de mon navigateur préféré ! C’est-y pas beau ?

Si vous constatez des erreurs ou des coquilles à la lecture de cet article, merci de m’en faire part (commentaire ou message). J’écrirai la conclusion demain ;-)

Bonne nuit !


https://openclassrooms.com/courses/domptez-votre-mac-avec-mac-os-x-mavericks/le-terminal-dans-os-x

Tita

Conceptrice & CEO chez Tita Créations
Passionnée de chevaux, de nature, d'écriture... et d'informatique, j'ai découvert cette dernière avec un tout premier modèle d'ordinateur portable : un SHARP écran cristaux liquides d'au moins 10kg ! ... 1988
Aujourd'hui, je donne libre cours à ma créativité dans les domaines du web design, de la gestion de projet et de la gestion de contenu.


Commenter