Réparer erreurs et utilisation de l'outil javascript grunt sous Thelia V2 minimum ou autres CMS

Grunt cela sert à quoi

Vous exécutez des tâches récurrentes dans le développement web de vos projets Thélia comme de

  • la minification ou de la concaténation de fichiers JavaScript ou CSS
  • Test unitaire
  • déploiement
  • la compilation de LESS, de SASS
  • vérification de code obsolète (linting) exemple erreur d’ouverture – fermeture de balise doublée.

Brièvement

L’outil est un « Javascript task-runner »

Autrement dit un Lanceur de tâches : c’est un outil de build automation bien pratique permettant d’automatiser des tâches codées en JavaScript répétitives pour simplifier et accélérer les développements front-end.

Pour l’utiliser et le configurer, vous devez d’abord l’installer en utilisant npm (Node Package Manager) en exécutant la commande suivante dans votre terminal

npm install -g grunt-cli

Une erreur simple à gérer après installation

Après installation de grunt parce qu’il ne fonnctionnait pas correctement et différentes erreurs relevées par le système
pour sortir des fichiers compresssés, minifiés contenus dans le répertoire src/css ou src/js à destination de votre répertoire template à la racine de votre projet > et le chemin web / www > dist/css et dist/js qui sert de cache au système Thelia pour vos prospects et mis à jour à chaque nouvelle modification

Donc le travail (voir la remarque IMPORTANT ci-dessous) peut-être effectué directement à partir du répertoire dist du template par default de Thelia ou une de votre copie modifiée du template d’origine

Remarque

Fortement déconseillé de travailler à partir des fichiers situé dans le répertoire dist vous allez comprendre par la suite

Le principe est fonctionnel tant que vous n’utilisez pas cette procédure d’automatisation des tâches après ce paragraphe et vous modifiez directement dans le chemin suivant assets/dist/css ou assets/dist/js

La suite va révèler l’erreur lorsque vous allez travailler directement à partir des fichiers sources car vous allez écraser à l’aide de la commande grunt
tout votre configuration sur laquelle vous avez optimisé, peaufiné vos différents réglages votre projet comprendre css et js, scripts maison

et vous allez vous retrouver confronter à afficher l’ancien ben quoi > le thème original en lieu et place avec éventuellement quelques modifications que vous aurez appliquées dans les fichiers opportuns

Ce pourquoi de l’importance d’avoir une copie de votre projet en cours et final avant de lancer la tâche

Car vous aurez à faire des copies de votre fichier thelia.min.css dist/css vers le répertoire src/css thelia.css
et relancer votre grunt watch ( qui prendra vos nouvelles directives )
pour revenir à une éventuelle ressemblance de votre projet

Réparer Grunt et gérer les notifications des erreurs en cours

Après réparation et update pour l’utilisation de sudo grunt default avec différentes erreurs de style

  1. > erreur Task « jshint:all » failed. Use –force to continue grunt/li>
  2. > Task « cssmin » not found. Use –force to continue grunt/li>
  3. > erreur Task « autoprefixer » not found. Use –force to continue grunt

En gros c’est qu’il vous manque quelques plugins à grunt pour fonctionner correctement

1ère étape de vérification : Présence Gruntfiles.js et package.json

Il manque peut-être un certain fichier

en console dans le répertoire de votre template

find Gruntfiles.js /dans votre répertoire il existe rien à ajouter, sinon

Création dudit fichier

sudo touch Gruntfiles.js

exemple de contenu dans le fichier éponyme

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {
options: {
banner: ‘/*! */\n’
},
build: {
src: ‘src/.js’,
dest: ‘build/.min.js’
}
}
});

// Load the plugin that provides the « uglify » task.
grunt.loadNpmTasks(‘grunt-contrib-uglify’);

// Default task(s).
grunt.registerTask(‘default’, [‘uglify’]);

};

Lors de l’installation de npm dans le répertoire du template

npm install

vous obtenez un fichier créé, nommé package.json avec les dépendances

Exemple de contenu

{
« name »: « alex »,
« version »: « 1.0.0 »,
« description »: « Default template for Thelia 2 »,
« main »: « Gruntfile.js »,
« keywords »: [
« template »,
« default »,
« thelia »
],
« author »: « Michael Espeche « ,
« license »: « LGPL-3.0+ »,
« dependencies »: {
« bower »: « ^1.8.14 »,
« default »: « ^0.1.1 »,
« grunt-autoprefixer »: « ^3.0.4 »,
« grunt-contrib-copy »: « ^0.8.0 »,
« grunt-contrib-cssmin »: « ^5.0.0 »,
« grunt-contrib-imagemin »: « ^4.0.0 »,
« grunt-contrib-uglify »: « ^5.2.2 »,
« load-grunt-tasks »: « ^3.1.0 »,
« readmore-js »: « ^2.2.1 »,
« watch »: « ^0.13.0 »
},
« devDependencies »: {
« grunt »: « ^1.6.1 »,
« grunt-browser-sync »: « ^2.2.0 »,
« grunt-contrib-concat »: « ^2.1.0 »,
« grunt-contrib-jshint »: « ^3.2.0 »,
« grunt-contrib-less »: « ^3.0.0 »,
« grunt-contrib-watch »: « ^1.1.0 »
},
« scripts »: {
« test »: « echo \ »Error: no test specified\ » && exit 1″
}
}

On peut exécuter un coup de mise à jour de npm
sudo npm update

2nde étape : vérification des droits sur fichiers

Déjà on continue par vérifier les permissions sur les fichiers et dossiers en cours d’utilisation qui vous interdiraient d’écrire dans les dossiers les fichiers qui ont été générés lors de l’automatisation de la tâche

Ce lanceur d’automation de tâche

C’est fait pour vous faciliter la vie

Au niveau des droits et pour des raisons de sécurité, vous devez avoir 755 sur les dossiers et 644 sur les fichiers. Ce qui est le cas par défaut si vous n’avez pas fait de modifications. En aucun cas vous ne devez poser des droits « 777 » sur un dossier ou un fichier.

sudo chown -R www-data:www-data /var/www/alex/

Si vous avez un doute ou que vous pensez avoir modifié les droits, vous pouvez rectifier la situation.

Pour les fichiers, exécutez cette commande :

sudo find /var/www/html/ -type f -exec chmod 644 {} \;

Pour les dossiers, exécutez cette commande :

sudo find /var/www/html/ -type d -exec chmod 755 {} \;

Grunt – Thelia et son travail d’automatisation pour lequel il est prévu

Différents fils de lecture sur l’utilisation de Grunt et son environnement

Citation

Thelia, le fichier CSS principal du template front-office, assets/dist/css/thelia.min.css, est généré par grunt ( https://gruntjs.com/ ) à partir d’une ribambelle de fichiers less et des directives du fichier Gruntfile.js.

Pour générer automatiquement les modifications positionner la variable process_assets à 1 dans le tableau de bord, dans la configuration des variables.

Poursuivre toute l’explication dans ce fil de lecture

Le démarrage

Grunt

Installer des plugins

Plugins

Dans chaque plugin est intégré un fichier README.md mis à disposition pour l’intégrateur de site web vous indiquant la procédure d’installation et ce pourquoi il est destiné

Un module manque à l’appel rechercher puis notifier l’élément oublié pour une installation à partir de votre répertoire de template, pour moi

> templates/frontOffice/store_front_catalog_production_art/

tous les modules s’installent dans le répertoire node_modules de votre template par défaut

en mode console

sudo npm install grunt-contrib-watch --save-dev

ou autre exemple

npm install grunt-contrib-cssmin --save-dev

Voilà votre plugin Grunt grunt-contrib-watch est installé dans le répertoire adéquat

Donc indépendamment de votre projet global vous pouvez démarrer un plugin à partir du répertoire de votre template

grunt cssmin

Pas plus, pas moins pour exécuter une branche du plugin Grunt

A l’issue vous pouvez effectuer votre tâche > minification, compression de tous vos dernières modifications

sudo grunt default ou sudo grunt watch

Conclusion, résultat, environnement dev

Vous appréciez le résultat de la compression, le nettoyage de code par la rapidité d’exécution des requètes finales dans le répertoire web de votre nouvelle installation Thelia v2.5.4 en mode local et au travers de la partie front-end

A l’issue vous pourrez déployer votre projet sur votre hébergement web

Le projet Thelia ecommerce

Vous avez un souci, visitez le forum de Thélia pour tous types d’informations avec les contributeurs ou les personnes chargées du cms français de l’ecommerce sur mesure
Thelia A savoir que cette version est synchronisée avec symfony 5

Tutoriel pour apprendre à utiliser l’outil JavaScript Grunt – Installation et mise en place dans un projet

Un guide complémentaire sur la mise en place de Grunt

Coté environnement technique
Les commandes sont faites dans un terminal sous linux-Mint 21.3 Virginia

  1. Thelia V2.5.4
  2. npm 8.5.1
  3. grunt-cli v1.4.3
  4. grunt v1.6.1

A lire avant de commencer

/*** === IMPORTANT === ***/

Avant de poursuivre la lecture, faites une copie de votre projet de développement local

/*** Après vous faites ce que vous voulez, vous êtes seul maître à bord ***/