Inclure des Fichiers HTML et Compiler SCSS comme un Pr

Pour de petits projets front-end rapides ou à faible budget, la tentation est grande de construire les pages HTML à la va-vite, en évitant de s’encombrer d’un workflow complexe. Face à une demande du client pour un simple ZIP avec le contenu du site, il peut être tentant de dépiler les pages HTML avec un fichier CSS « à l’ancienne ».

En réalité, même pour les projets de taille modeste, la mise en place d’un workflow optimisé présente des avantages considérables. Voici pourquoi :

1. Maintenabilité et Évolutivité

Les petits projets ont souvent la fâcheuse tendance de prendre de l’ampleur avec le temps. Une structure de workflow bien définie permet de gérer plus facilement les changements, les modifications dans le menu ou le footer par exemple, les ajouts de sections ou de contenu, etc… et assure une maintenabilité accrue à mesure que le projet évolue.

2. Éviter les pièges de la « Louche »

Construire des pages à la louche peut sembler rapide à court terme, mais cela peut rapidement devenir un piège. Des modifications futures, la gestion de plusieurs pages, et la collaboration avec d’autres membres de l’équipe peuvent devenir laborieuses sans une structure organisationnelle solide.

3. Qualité et Cohérence

Un workflow bien défini garantit une meilleure qualité et cohérence dans le code. Cela permet d’éviter les erreurs communes, de respecter les normes de codage, et d’assurer une expérience utilisateur homogène. Exemple: Si vous avez créer 15 pages HTML et que le client, vous demande de mettre un S sur un item du menu, il faut le faire sur les 15 pages et ne pas se tromper ; ça ne parait pas grand chose mais ça peut devenir problématique rapidement.

4. Gain de Temps sur le Long Terme

Un workflow structuré peut sembler prendre plus de temps au début, mais il devient rapidement rentable. Les tâches répétitives sont automatisées, les erreurs humaines minimisées, et la productivité accrue à mesure que le projet progresse.

5. Professionnalisme et Crédibilité

Adopter un workflow professionnel, même pour les petits projets, démontre votre engagement envers la qualité et la professionnalisme. Cela renforce la crédibilité de votre travail, que ce soit aux yeux du client ou au sein de votre équipe.

Ainsi, bien que la tentation de « faire simple » soit compréhensible, il est essentiel de considérer les avantages à long terme qu’un workflow bien pensé peut apporter, même sur des projets de taille réduite. La méthode des professionnels ne se limite pas à la complexité, mais à l’efficacité et à la prévoyance, garantissant un résultat final qui résiste à l’épreuve du temps.

Partie 1: Inclusion de Fichiers HTML

Prérequis

Assurez-vous d’avoir Node.js et npm installés sur votre machine. Si ce n’est pas le cas, vous pouvez les télécharger depuis le site officiel de Node.js.

Étape 1: Installation du Plugin Gulp

Commencez par installer le plugin Gulp nécessaire en exécutant la commande suivante dans votre terminal :

npm install --save-dev gulp-file-include

Étape 2: Configuration du Fichier Gulp

Créez un fichier gulpfile.js à la racine de votre projet. Copiez le code ci-dessous dans ce fichier :

const gulp = require('gulp');
const fileInclude = require('gulp-file-include');

gulp.task('html', function () {
   return gulp.src('src/*.html')
      .pipe(fileInclude({
         prefix: '@@',
         basepath: '@file'
      }))
      .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.series('html'));

Étape 3: Utilisation des Balises d’Inclusion dans les Fichiers HTML

Dans vos fichiers HTML, vous pouvez maintenant utiliser des balises d’inclusion de manière élégante comme dans cet exemple :

<!-- @@include('./partials/header.html') -->
<div>Contenu principal</div>
<!-- @@include('./partials/footer.html') -->

Ces balises seront automatiquement remplacées par le contenu des fichiers spécifiés lors de la compilation.

Partie 2: Compilation des Fichiers SCSS avec Sass

Étape 1: Installation du Plugin Gulp

Si vous ne l’avez pas déjà fait, installez le plugin gulp-sass en utilisant la commande suivante :

npm install --save-dev gulp-sass

Étape 2: Mise à Jour du Fichier Gulp

Ajoutez la tâche de compilation SCSS dans votre fichier gulpfile.js. Voici comment étendre le fichier existant :

const gulp = require('gulp');
const fileInclude = require('gulp-file-include');
const sass = require('gulp-sass');

gulp.task('html', function () {
   return gulp.src('src/*.html')
      .pipe(fileInclude({
         prefix: '@@',
         basepath: '@file'
      }))
      .pipe(gulp.dest('dist'));
});

gulp.task('sass', function () {
   return gulp.src('src/scss/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.parallel('html', 'sass'));

Étape 3: Exécution de Gulp

Dans votre terminal, lancez la commande suivante pour compiler à la fois vos fichiers HTML et SCSS :

gulp

Et voilà, votre workflow front-end est maintenant optimisé pour inclure des fichiers HTML et compiler des fichiers SCSS de manière professionnelle.

Note pour la livraison :
Vous avez donc la possibilité de livrer « juste » le dossier dist qui sera parfaitement exploitable ou l’intégralité de votre developpement auquel je vous conseille d’ajouter un fichier README.md qui explique le workflow et comment l’installer.

0 0 votes

Évaluation de l'article