THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonjour,

Et oui, c'est encore moi...! cool

J'ai besoin de supprimer une fonction JS qui perturbe le nouveau fonctionnement d'un site. J'ai commencé par la supprimer depuis le fichier templates/frontOffice/perso/assets/src/js/global.js.

Après quoi je lance le fichier generate_assets.cmd à la racine du site pour compiler les assets dans src, et j'obtiens bien un fichier templates/frontOffice/perso/assets/dist/js/perso.js qui regroupe tous les scripts que j'avais dans src (et surtout qui ne contient plus la fonction que je cherchais à supprimer.

En revanche, ça n'a pas d'effet sur le site. Et pour cause, j'ai bien l'impression que ce dernier va chercher les infos dans web/assets/frontOffice/perso/template-assets/dist/js/nomGénériqueAvecLettres&Chiffres.js. Et ce script là ne change jamais, quoi que je fasse. Même quand je fouille directement dedans pour aller moi-même supprimer la fonction qui y est encore, elle réapparaît dedans dès que je recharge la page. Il est donc recompilé à chaque fois ? Et si oui, je ne comprends pas à partir de quel fichier il retrouve cette fonction...

Je vide entièrement les caches à chaque fois mais ça ne change rien.

Last edited by HeishPi (06-06-2019 14:02:44)


Développeur web Junior

Offline


Les assets du template "default" de Thelia sont générés avec Grunt. Il ne faut jamais modifier ce qu'il y a dans "dist", mais modifier les fichiers dans "src", puis générer les assets. Plus d'infos sur ce processus ici : http://thelia-school.com/utiliser-grunt … helia.html

En 2 mots :

Installer Node JS
Ouvrir une console
Aller dans templates/frontOffice/default
Taper : npm install
Pour compiler les assets, taper: grunt default (ou grunt watch pour générer les assets dès que quelque chose change)

Si il y a une erreur genre "grunt not found", taper : npm install -g grunt-cli


OpenStudio Toulouse

Offline


Pour compléter la réponse de Roadster, installer Node peut se faire ainsi :
(remplacer X.x.X par la version stable la plus récente)
(la dernière ligne permet de vérifier que l'installation s'est correctement déroulée)

wget https://nodejs.org/download/release/latest/node-vX.x.x-linux-x64.tar.gz
tar -xvf node-*.tar.gz
mkdir ~bin
mv node-vX.x.x-linux-x64 ~/bin/nodejs
~/bin/nodejs/bin/node --version
Pour installer npm

cd ~/bin

cp nodejs/bin/node .

ln -s nodejs/lib/node_modules/npm/bin/npm-cli.js npm

se rendre dans le dossier du template (pas dans assets)

npm install package (ne pas tenir compte des warnings)

Pour utiliser le template default de Thelia (depuis le dossier du template)

node_modules/bower/bin/bower install (lire la configuration Bower pour rapatrier toutes les dépendances)

npm install (lire la configuration Grunt pour rapatrier tous les modules)

node_modules/grunt-cli/bin/grunt watch
(scruter tous les fichiers dans 'src', les compiler/mignifier)

Last edited by anti-conformiste (30-05-2019 11:14:08)

Offline


Roadster, faudra quand même que tu prenne 5 min de ton précieux temps hippy pour faire une mise a jour de cette partie dans Thelia school

Offline


Sous Windows, c'est simplissime d'installer node + npm : https://nodejs.org/en/download/

gimly wrote:

Roadster, faudra quand même que tu prenne 5 min de ton précieux temps hippy pour faire une mise a jour de cette partie dans Thelia school

Ça m'arrangerait qu'un généreux contributeur s'en charge smile


OpenStudio Toulouse

Offline


En suivant ce que préconise Roadster :

I:\Sites\lcv3\templates\frontOffice\default>grunt default
Running "copy:js" (copy) task

Running "copy:fonts" (copy) task

Running "copy:less" (copy) task

Running "copy:images" (copy) task
Warning: ENOTSUP: operation not supported on socket, scandir 'I:\Sites\lcv3\temp
lates\frontOffice\default\assets\src\img\218x146.png' Use --force to continue.

Aborted due to warnings.

Petit avertissement, j'essaie de suivre ce que la console me dit, je rajoute --force et j'obtiens ça :

I:\Sites\lcv3\templates\frontOffice\default>grunt default --force
Running "copy:js" (copy) task


Running "copy:fonts" (copy) task


Running "copy:less" (copy) task


Running "copy:images" (copy) task
Warning: ENOTSUP: operation not supported on socket, scandir 'I:\Sites\lcv3\temp
lates\frontOffice\default\assets\src\img\218x146.png' Used --force, continuing.

Running "jshint:all" (jshint) task
>> 1 file lint free.

Running "uglify:all" (uglify) task
>> 1 file created.

Running "less:all" (less) task
>> 2 stylesheets created.

Running "autoprefixer:all" (autoprefixer) task
>> 1 autoprefixed stylesheet created.

Running "cssmin:target" (cssmin) task
>> 1 file created. 227.62 kB → 182.13 kB

Running "imagemin:all" (imagemin) task
Warning: ENOTSUP: operation not supported on socket, scandir 'I:\Sites\lcv3\temp
lates\frontOffice\default\assets\src\img\280x196.png' Used --force, continuing.

Done, but with warnings.

Et mes fichiers présents dans web\assets\frontOffice\lcv\template-assets\assets\dist\js n'ont pas changé d'un pouce, la fonction que j'essaie d'enlever est toujours présente. hmm Je comprends pas comment ils marchent, ces assets. Et surtout je ne comprends pourquoi je dois faire ça dans le dossier default ? Pourquoi pas dans mon dossier custom (copié de default) ?

Last edited by HeishPi (03-06-2019 14:41:14)


Développeur web Junior

Offline


Tu utilises sans doute un version ancienne de Node. Solution : en installer une plus récente, ou alors https://stackoverflow.com/questions/301 … sing-grunt (google est ton ami).

Le "pourquoi" : le dev front moderne, c'est des fichiers sources (le repertoire src), et des fichier compilés (minifiés, transpilés, etc., le repertoire dist, comme "distribution"), il n'y a aucune raison d'inclure 200 Ko de CSS explosé en 50 fichiers si on peut minifier le tout en un seul fichier de 30 ko.

Grunt permet de faire ça. Et évidemment, tu dois generer les assets dans TON template, et pas ceux de default...

Si tu n 'es pas à l'aise avec ça ou que ça ne te dérange pas de gaspiller de la bande passante et du temps de chargement, tu peux toujours mettre tes fichiers assets (css, js, images) dans un dossier web/mes-assets, et les inclure avec des trucs du genre <link rel="stylesheet" href="{url file="/mes-assets/css/xyz.css"}"> ou <img src=""{url file="/mes-assets/img/toto.png"}" alt="toto"> (cf. http://doc.thelia.net/en/documentation/ … .html#file)

C'est d'ailleurs le moyen le plus simple de fabliquer des assets avec les outils actuel genre webpack.


OpenStudio Toulouse

Offline


A vrai dire, qu'ils soient minifiés, ça me va très bien, le système src/dist marche très bien. Ce qui sort de ma compréhension c'est le lien avec le dossier web/assets/frontOffice/template-assets/assets. Je comprends pas comment les fichiers dans ce dossier (ceux utilisés concrètement par l'application) se mettent à jour...?

Parce que c'est exactement ça le problème qui m'empêche d'avancer, c'est que le site continue de se baser sur ces assets, et ne prends pas en compte les modifs opérées dans le dossiers templates/frontOffice/perso/assets...

Bon j'ai essayé un tas de trucs parmi ce que vous m'avez conseillé, j'ai longuement suivi le tuto Grunt/Bower, avec un bel échec arrivé devant l'utilisation de la commande grunt less. J'ai tenté d'installer la dernière version de node, et maintenant la commande grunt n'est plus trouvée du tout, faudrait que je reparte à 0.
Je ré-essaierai plus tard parce que j'avoue être intéressé par l'automatisation des processus assets, mais pour l'instant c'est malheureusement pas urgent.

Merci en tout cas ! smile


Développeur web Junior

Offline


le système src/dist marche très bien

Si tu n'arrives pas à les compiler avec grunt, je ne vois pas comment tu pourrais générer les assets dans dist.

web/assets est un cache, qui permet de publier les assets des templates, puisque seul le contenu du dossier web est public.

Les assets y sont copiés automatiquement lorsque nécessaire, c.a.d  quand ils sont modifiés dans assets/dist. Ce cache peut être détruit à tout moment, c'est une très mauvaise idée de toucher aux fichiers qui s'y trouvent.

Tout ceci fonctionne avec le {declare_assets directory='assets/dist'} qui se trouve dans layout.tpl, et se charge du contrôle du changement et des copies éventuelles.

Je te recommande la lecture de http://doc.thelia.net/en/documentation/ … ssets.html


OpenStudio Toulouse

Offline


Pour écrire dans dist, on utilise un script à la racine du projet, que voici :

REM Javascripts


copy /b templates\frontOffice\lcv\assets\src\js\lcv\global.js^
+templates\frontOffice\lcv\assets\src\js\lcv\kit.js^
+templates\frontOffice\lcv\assets\src\js\lcv\register.js^
+templates\frontOffice\lcv\assets\src\js\lcv\opinion.js^
+templates\frontOffice\lcv\assets\src\js\lcv\saison-background.js^
+templates\frontOffice\lcv\assets\src\js\lcv\warranty.js^
+templates\frontOffice\lcv\assets\src\js\number-polyfill.js^

 templates\frontOffice\lcv\assets\src\js\lcv.js


java -jar yuicompressor-2.4.8.jar --type js -v -o templates\frontOffice\lcv\assets\dist\js\lcv.min.js templates\frontOffice\lcv\assets\src\js\lcv.js

REM CSS

copy /b templates\frontOffice\lcv\assets\src\css\lcv\global.css^
+templates\frontOffice\lcv\assets\src\css\lcv\header.css^
+templates\frontOffice\lcv\assets\src\css\lcv\aside.css^
+templates\frontOffice\lcv\assets\src\css\lcv\main.css^
+templates\frontOffice\lcv\assets\src\css\lcv\index.css^
+templates\frontOffice\lcv\assets\src\css\lcv\product.css^
+templates\frontOffice\lcv\assets\src\css\lcv\kit.css^
+templates\frontOffice\lcv\assets\src\css\lcv\footer.css^
+templates\frontOffice\lcv\assets\src\css\lcv\account.css^
+templates\frontOffice\lcv\assets\src\css\lcv\cart.css^
+templates\frontOffice\lcv\assets\src\css\lcv\neo.css^
+templates\frontOffice\lcv\assets\src\css\number-polyfill.css^
 templates\frontOffice\lcv\assets\src\css\lcv.css

 copy /b templates\frontOffice\lcv\assets\src\css\thelia.css^
 +templates\frontOffice\lcv\assets\src\css\lcv.css^
  templates\frontOffice\lcv\assets\src\css\styles.css

java -jar yuicompressor-2.4.8.jar --type css -v -o templates\frontOffice\lcv\assets\dist\css\styles.min.css templates\frontOffice\lcv\assets\src\css\styles.css
PAUSE

Développeur web Junior

Offline


Soit. Donc vous n'avez pas besoin de grunt puisque vous avez écrit votre propre script de génération des assets.

Du coup c'est quoi le problème ?


OpenStudio Toulouse

Offline


Le problème c'est que les assets présents dans le dossier web ne se mettent pas à jour en fonction de ceux présents dans le dossier templates hmm


Développeur web Junior

Offline


OK, je vais encore avoir l'air bête mais j'ai enfin compris mon erreur : dans layout.tpl j'avais :

{javascripts file="assets/dist/js/scripts.min.js"}
        <script src="{$asset_url}"></script>
    {/javascripts}

Or, ce n'est pas le bon fichier qui était mis à jour. J'ai donc pointé vers le bon fichier : lcv.min.js... Et bien sûr, tout va bien maintenant.

Merci pour ta patience, Roadster !


Développeur web Junior

Offline


Top ! Tu peux aussi écrire plus simplement :

<script src="{javascript file="assets/dist/js/scripts.min.js"}"></script>

OpenStudio Toulouse