NodeAtlas —Le Framework JavaScript Serveur Évolutif

Partie outils

Minifier les CSS / JS

Vous pouvez automatiquement générer des fichiers CSS et JS minifiés et offusqués en créant des paquetages en référençant les groupes de fichiers d'entrée par leur chemin d'accès et le chemin du fichier de sortie. Vous pouvez bien entendu en faire autant que vous le souhaitez. La génération des fichiers se fait à chaque démarrage de NodeAtlas que ce soit en tant que serveur ou via la commande --generate pour peu qu'un paquetage existe dans le webconfig.

Créer des paquetages

Avec la configuration suivante :

{
   "bundles": {
      "javascripts": {
         "javascripts/boot.min.js": [
            "javascripts/modernizr.js",
            "javascripts/yepnot.js",
            "javascripts/html5Shiv.js"
         ],
         "javascripts/framework.min.js": [
            "javascripts/jquery.js",
            "javascripts/jquery-ui.js",
            "javascripts/prettify.js",
            "javascripts/prettify/run_prettify.js"
         ],
         "javascripts/common.min.js": [
            "javascripts/components/extended-format-date.js",
            "javascripts/common.js"
         ]
      },
      "stylesheets": {
         "stylesheets/common.min.css": [
            "stylesheets/common.css",
            "stylesheets/common-min780.css",
            "stylesheets/common-min1160.css"
         ]
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

et l'ensemble de fichier suivant :

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  └─ common-min1160.css
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     └─ common.js
├─ views/
│  └─ index.htm
└─ webconfig.json

vous obtiendrez les nouveaux fichiers suivants :

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  ├─ common-min1160.css
│  │  └─ common.min.css     ⤆ nouveau fichier
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     ├─ common.js
│     ├─ boot.min.js        ⤆ nouveau fichier
│     ├─ framework.min.js   ⤆ nouveau fichier
│     └─ common.min.js      ⤆ nouveau fichier
├─ views/
│  └─ index.htm
└─ webconfig.json

Paquetage dans un fichier partagé

Afin de ne pas réécrire une longue liste de configuration de paquetage dans un fichier webconfig.json à destination de votre environnement de développement et webconfig.prod.json à destination de votre environnement de production, vous pouvez mutualiser la déclaration des fichiers dans un fichier de votre choix. Par convention, c'est le fichier bundles.json.

Par exemple,

L'ensemble de fichier suivant :

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  └─ common-min1160.css
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     └─ common.js
├─ views/
│  └─ index.htm
├─ webconfig.json
└─ webconfig.prod.json

avec webconfig.json :

{
   "httpPort": 7777,
   "bundles": {
      "javascripts": {
         "javascripts/boot.min.js": [
            "javascripts/modernizr.js",
            "javascripts/yepnot.js",
            "javascripts/html5Shiv.js"
         ],
         "javascripts/framework.min.js": [
            "javascripts/jquery.js",
            "javascripts/jquery-ui.js",
            "javascripts/prettify.js",
            "javascripts/prettify/run_prettify.js"
         ],
         "javascripts/common.min.js": [
            "javascripts/components/extended-format-date.js",
            "javascripts/common.js"
         ]
      },
      "stylesheets": {
         "stylesheets/common.min.css": [
            "stylesheets/common.css",
            "stylesheets/common-min780.css",
            "stylesheets/common-min1160.css"
         ]
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

et avec webconfig.prod.json:

{
   "httpPort": 7776,
   "httpHostname": "blog.lesieur.name",
   "urlPort": 80,
   "bundles": {
      "javascripts": {
         "javascripts/boot.min.js": [
            "javascripts/modernizr.js",
            "javascripts/yepnot.js",
            "javascripts/html5Shiv.js"
         ],
         "javascripts/framework.min.js": [
            "javascripts/jquery.js",
            "javascripts/jquery-ui.js",
            "javascripts/prettify.js",
            "javascripts/prettify/run_prettify.js"
         ],
         "javascripts/common.min.js": [
            "javascripts/components/extended-format-date.js",
            "javascripts/common.js"
         ]
      },
      "stylesheets": {
         "stylesheets/common.min.css": [
            "stylesheets/common.css",
            "stylesheets/common-min780.css",
            "stylesheets/common-min1160.css"
         ]
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

pourrait devenir l'ensemble de fichier suivant :

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  └─ common-min1160.css
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     └─ common.js
├─ views/
│  └─ index.htm
├─ bundles.json              ⤆ nouveau fichier
├─ webconfig.json
└─ webconfig.prod.json

avec webconfig.json :

{
   "httpPort": 7777,
   "bundles": "bundles.json",
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

avec webconfig.prod.json :

{
   "httpPort": 7776,
   "httpHostname": "blog.lesieur.name",
   "urlPort": 80,
   "bundles": "bundles.json",
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

et bundles.json :

{
   "javascripts": {
      "javascripts/boot.min.js": [
         "javascripts/modernizr.js",
         "javascripts/yepnot.js",
         "javascripts/html5Shiv.js"
      ],
      "javascripts/framework.min.js": [
         "javascripts/jquery.js",
         "javascripts/jquery-ui.js",
         "javascripts/prettify.js",
         "javascripts/prettify/run_prettify.js"
      ],
      "javascripts/common.min.js": [
         "javascripts/components/extended-format-date.js",
         "javascripts/common.js"
      ]
   },
   "stylesheets": {
      "stylesheets/common.min.css": [
         "stylesheets/common.css",
         "stylesheets/common-min780.css",
         "stylesheets/common-min1160.css"
      ]
   }
}

Note : il est possible de désactiver les Bundles en ne les incluant pas dans le webconfig en question.

Désactiver des paquetages

Il est également possible de ne pas exécuter la minification au démarrage d'un site web avec NodeAtlas avec les propriétés "cssBundlingEnable": false et "jsBundlingEnable": false pour chaque type de paquetage.

{
   "cssBundlingEnable": false,
   "jsBundlingEnable": false,
   "bundles": {
      "javascripts": {
         "javascripts/boot.min.js": [
            "javascripts/modernizr.js",
            "javascripts/yepnot.js",
            "javascripts/html5Shiv.js"
         ],
         "javascripts/framework.min.js": [
            "javascripts/jquery.js",
            "javascripts/jquery-ui.js",
            "javascripts/prettify.js",
            "javascripts/prettify/run_prettify.js"
         ],
         "javascripts/common.min.js": [
            "javascripts/components/extended-format-date.js",
            "javascripts/common.js"
         ]
      },
      "stylesheets": {
         "stylesheets/common.min.css": [
            "stylesheets/common.css",
            "stylesheets/common-min780.css",
            "stylesheets/common-min1160.css"
         ]
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

Note : si vos paquetages sont dans un fichier partagé, vous pouvez également les désactiver simplement en retirant la ligne "bundles": "bundles.json".

Régénérer les paquetages avant chaque rendu de page

De manière à toujours tester vos page avec les fichiers minifiés, vous pouvez demander à ce qu'ils soient régénérés avant chaque affichage de page avec les propriétés "cssBundlingBeforeResponse": true et "jsBundlingBeforeResponse": true pour chaque type de paquetage.

{
   "cssBundlingBeforeResponse": false,
   "jsBundlingBeforeResponse": false,
   "bundles": {
      "javascripts": {
         "javascripts/boot.min.js": [
            "javascripts/modernizr.js",
            "javascripts/yepnot.js",
            "javascripts/html5Shiv.js"
         ],
         "javascripts/framework.min.js": [
            "javascripts/jquery.js",
            "javascripts/jquery-ui.js",
            "javascripts/prettify.js",
            "javascripts/prettify/run_prettify.js"
         ],
         "javascripts/common.min.js": [
            "javascripts/components/extended-format-date.js",
            "javascripts/common.js"
         ]
      },
      "stylesheets": {
         "stylesheets/common.min.css": [
            "stylesheets/common.css",
            "stylesheets/common-min780.css",
            "stylesheets/common-min1160.css"
         ]
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

Note : ceci n'est pas conseillé en production car cela ralenti les réponses des pages.

La version dans les noms de fichiers générés

Afin de forcer le navigateur à charger de nouveau vos fichiers en cache il est intéressant de changer leur nom pour chaque version. Ainsi l'occurence {version}, sera remplacée par le numéro de version de votre site actuel (par défaut 0.0.0).

Ainsi, si vous avez un fichier package.json ou un webconfig.json valide avec un numéro de version indiqué sous la propriété version, ce numéro remplacera la valeur {version}. Ainsi avec le webconfig suivant :

webconfig

{
   "version": "1.0.0",
   "bundles": "bundles.json"
   "routes": "routes.json"
}

et les bundles suivants :

bundles.json

{
   "javascripts": {
      "javascripts/boot.{version}.min.js": [
         "javascripts/modernizr.js",
         "javascripts/yepnot.js",
         "javascripts/html5Shiv.js"
      ]
   },
   "stylesheets": {
      "stylesheets/common.{version}.min.css": [
         "stylesheets/common.css",
         "stylesheets/common-min780.css",
         "stylesheets/common-min1160.css"
      ]
   }
}

vous obtiendrez les fichiers assets/javascripts/boot.1.0.0.min.js et assets/javascripts/common.1.0.0.min.css.

que vous pourrez appeler ainsi :

views/*.htm

<!-- ... -->

<link rel="stylesheet" href="stylesheets/common.<?= webconfig.version ?>.min.css">

<!-- ... -->

<script src="javascripts/boot.<?= webconfig.version ?>.min.js"></script>

<!-- ... -->

Paquetages avec WebSockets

Il est possible de minifier le fichier défini par NA.webconfig.socketClientFile même si celui-ci n'existe pas physiquement. Il suffit pour cela de le glisser dans les paquetages souhaités.

Dans l'exemple suivant, le fichier virtuel node-atlas/socket.io.js sera ajouté aux sources avec la bonne configuration pour faire le lien client / serveur.

{
   "bundles": {
      "javascripts": {
         "javascripts/common.min.js": [
            "javascripts/socket.io.js",
            "node-atlas/socket.io.js",
            "javascripts/common.js"
         ]
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

Générer les CSS avec Less

Vous pouvez utiliser le préprocesseur Less pour créer vos CSS. Le fonctionnement est le suivant : à chaque fois qu'une requête CSS est effectuée, si un équivalent Less existe il est lu et celui-ci génère la CSS. Une fois l'opération effectuée, on renvoi la CSS demandée.

Avec la structure suivante :

├─ assets/
│  └─ stylesheets
│     └─ common.less
├─ views/
│  └─ index.htm
└─ webconfig.json

ainsi que le webconfig suivant :

{
   "less": true,
   "routes": {
      "/": "index.htm"
   }
}

et le contenu suivant dans :

views/index.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Test Less</title>
      <link rel="stylesheet" href="stylesheets/common.css">
   </head>
   <body>
      <p>Cette ligne est rouge.</p>
   </body>
</html>

assets/stylesheets/common.less

p {
   color: #f00;
}

vous génèrerez le fichier assets/stylesheets/common.css en appelant l'URL http://localhost/ ou http://localhost/stylesheets/common.css.

Source Map, minification et autoprefix

Par défaut, dans l'exemple ci-dessus un fichier common.css.map sera généré. Celui-ci permet à votre navigateur de vous indiquer qu'elle ligne du fichier .less a générée la propriété CSS de l'élément que vous avez sélectionné dans votre débogueur.

Cela se désactive avec less.sourceMap à false :

   "less": {
      "sourceMap": false
   },
   "routes": {
      "/": "index.htm"
   }

Vous pouvez également générer des fichiers CSS déjà minifiés avec :

   "less": {
      "compress": true
   },
   "routes": {
      "/": "index.htm"
   }

Pour finir, vous pouvez également ajouter automatiquement les prefix vendeur comme --webkit, --moz, --ms, --o lors de la génération sans vous en préoccuper dans vos sources !

   "less": {
      "autoprefix": true
   },
   "routes": {
      "/": "index.htm"
   }

Compiler les Less avec `--generate`

Comme les Less sont compilés à la volé, quand le fichier est demandé en HTTP(s), toutes modifications dans le Less demandera de faire tourner le site pour la répercuter dans la CSS. Ensuite seulement vous pourrez minifier vos CSS. Il est possible d'automatiser cette tâche pour ne pas avoir à démarrer le site grâce à less.files.

Avec le webconfig.json suivant :

{
   "less": {
      "files": [
         "stylesheets/common.less",
         "stylesheets/component-1.less",
         "stylesheets/component-2.less",
         "stylesheets/component-3.less"
      ]
   },
   "routes": {
      "/": "index.htm"
   }
}

ou avec le webconfig.json suivant :

{
   "less": {
      "files": "less.json"
   },
   "routes": {
      "/": "index.htm"
   }
}

avec less.json qui contient :

[
   "stylesheets/common.less",
   "stylesheets/component-1.less",
   "stylesheets/component-2.less",
   "stylesheets/component-3.less"
]

Par défaut, les @import utilisés par Less seront capables de fouiller dans les sous-dossiers : styles, stylesheets ou css. Il est possible de changer cela avec :

{
   "less": {
      "paths": [
         "subdirectory/styles-files",
      ],
      "files": "less.json"
   },
   "routes": {
      "/": "index.htm"
   }
}

Générer les CSS avec Stylus

Vous pouvez utiliser le préprocesseur Stylus pour créer vos CSS. Le fonctionnement est le suivant : à chaque fois qu'une requête CSS est effectuée, si un équivalent Stylus existe il est lu et celui-ci génère la CSS. Une fois l'opération effectuée, on renvoi la CSS demandée.

Avec la structure suivante :

├─ assets/
│  └─ stylesheets
│     └─ common.styl
├─ views/
│  └─ index.htm
└─ webconfig.json

ainsi que le webconfig suivante :

{
   "stylus": true,
   "routes": {
      "/": "index.htm"
   }
}

et le contenu suivant dans :

views/index.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Test Stylus</title>
      <link rel="stylesheet" href="stylesheets/common.css">
   </head>
   <body>
      <p>Cette ligne est rouge.</p>
   </body>
</html>

assets/stylesheets/common.styl

p
   color: #f00

vous générerez le fichier assets/stylesheets/common.css en appelant l'URL http://localhost/ ou http://localhost/stylesheets/common.css.

Source Map, minification et autoprefix

Par défaut, dans l'exemple ci-dessus un fichier common.css.map sera généré. Celui-ci permet à votre navigateur de vous indiquer qu'elle ligne du fichier .styl a générée la propriété CSS de l'élément que vous avez sélectionné dans votre débogueur.

Cela se désactive avec stylus.sourceMap à false :

   "stylus": {
      "sourceMap": false
   },
   "routes": {
      "/": "index.htm"
   }

Vous pouvez également générer des fichiers CSS déjà minifiés avec :

   "stylus": {
      "compress": true
   },
   "routes": {
      "/": "index.htm"
   }

Pour finir, vous pouvez également ajouter automatiquement les prefix vendeur comme --webkit, --moz, --ms, --o lors de la génération sans vous en préoccuper dans vos sources !

   "stylus": {
      "autoprefix": true
   },
   "routes": {
      "/": "index.htm"
   }

Note: Plus d'options sur la documentation du module Stylus.

Compiler les Stylus avec `--generate`

Comme les Stylus sont compilés à la volé, quand le fichier est demandé en HTTP(s), toutes modifications dans le Stylus demandera de faire tourner le site pour la répercuter dans la CSS. Ensuite seulement vous pourrez minifier vos CSS. Il est possible d'automatiser cette tâche pour ne pas avoir à démarrer le site grâce à stylus.files.

Avec le webconfig.json suivant :

{
   "stylus": {
      "files": [
         "stylesheets/common.styl",
         "stylesheets/component-1.styl",
         "stylesheets/component-2.styl",
         "stylesheets/component-3.styl"
      ]
   },
   "routes": {
      "/": "index.htm"
   }
}

ou suivante :

{
   "stylus": {
      "files": "stylus.json"
   },
   "routes": {
      "/": "index.htm"
   }
}

avec stylus.json qui contient :

[
   "stylesheets/common.styl",
   "stylesheets/component-1.styl",
   "stylesheets/component-2.styl",
   "stylesheets/component-3.styl"
]

Par défaut, les @import utilisés par Stylus seront capables de fouiller dans les sous-dossiers : styles, stylesheets ou css. Il est possible de changer cela avec :

{
   "stylus": {
      "paths": [
         "subdirectory/styles-files",
      ],
      "files": "stylus.json"
   },
   "routes": {
      "/": "index.htm"
   }
}

Optimiser les images (Supprimé de la v2.0.2+)

Cette fonctionnalité n'existe plus dans la v2.0.2. La v2.0.1 est identique a cette version avec cette fonctionnalité en plus. Les versions suivantes n'incluront plus ces dépendances souffrant de vulnérabilités et n'étant plus correctement maintenues. Vous pouvez vous tourner vers d'autres outils qui ferront cela beaucoup mieux.

Vous pouvez automatiquement optimiser les images que vous allez utiliser dans votre site pour en limiter le poids de chargement en créant des Optimizations en référençant les fichiers d'entrés par leur chemin d'accès et le chemin du dossier de sortie. Vous pouvez bien entendu en faire autant que vous le souhaitez. L'optimisation des images se fait à chaque démarrage de NodeAtlas que ce soit en tant que serveur ou via la commande --generate pour peu que des optimisations existe dans le webconfig.

Créer des optimisations

Avec la configuration suivante :

{
   "optimizations": {
      "images": {
         "media/images/example.png": "media/images/optimized/",
         "media/images/example.jpg": "media/images/optimized/",
         "media/images/example.gif": "media/images/optimized/",
         "media/images/example.svg": "media/images/optimized/"
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

et l'ensemble de fichier suivant :

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        └─ example.svg
├─ views/
│  └─ index.htm
└─ webconfig.json

vous obtiendrez les nouveaux fichiers suivants :

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        ├─ example.svg
│        └─ optimized/       ⤆ nouveau dossier
│           ├─ example.png   ⤆ nouveau fichier
│           ├─ example.jpg   ⤆ nouveau fichier
│           ├─ example.gif   ⤆ nouveau fichier
│           └─ example.svg   ⤆ nouveau fichier
├─ views/
│  └─ index.htm
└─ webconfig.json

Créer des optimisations par groupes de fichier

Vous pouvez par exemple, plutôt que d'indiquer les fichiers un par un, les indiquer en groupe :

{
   "optimizations": {
      "images": {
         "media/images/*.{gif,jpg,png,svg}": "media/images/optimized/"
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

Ajouter des options aux optimisations

Il est possible de redéfinir les options par défaut pour l'optimisation via ses 4 objets :

{
   "optimizations": {
      "jpg": { "progressive": false },
      "gif": { "interlaced": false },
      "png": { "optimizationLevel": 1 },
      "svg": { "multipass": false },
      "images": {
         "media/images/*.{gif,jpg,png,svg}": "media/images/optimized/"
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

Pour connaître toutes les options c'est par ici :

Optimisations dans un fichier partagé

Afin de ne pas réécrire une longue liste de configuration d'optimisations dans un fichier webconfig.json à destination de votre environnement de développement et webconfig.prod.json à destination de votre environnement de production, vous pouvez mutualiser la déclaration des fichiers dans un fichier de votre choix. Par convention, c'est le fichier optimizations.json.

Par exemple,

L'ensemble de fichier suivant :

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        └─ example.svg
├─ views/
│  └─ index.htm
├─ webconfig.json
└─ webconfig.prod.json

avec webconfig.json

{
   "httpPort": 7777,
   "optimizations": {
      "images": {
         "media/images/example.png": "media/images/optimized/",
         "media/images/example.jpg": "media/images/optimized/",
         "media/images/example.gif": "media/images/optimized/",
         "media/images/example.svg": "media/images/optimized/"
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

et avec webconfig.prod.json :

{
   "httpPort": 7776,
   "httpHostname": "blog.lesieur.name",
   "urlPort": 80,
   "optimizations": {
      "images": {
         "media/images/example.png": "media/images/optimized/",
         "media/images/example.jpg": "media/images/optimized/",
         "media/images/example.gif": "media/images/optimized/",
         "media/images/example.svg": "media/images/optimized/"
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

pourrait devenir l'ensemble de fichier suivant :

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        └─ example.svg
├─ views/
│  └─ index.htm
├─ bundles.json
├─ webconfig.json
└─ webconfig.prod.json

avec webconfig.json :

{
   "httpPort": 7777,
   "optimizations": "optimizations.json",
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

avec webconfig.prod.json :

{
   "httpPort": 7776,
   "httpHostname": "blog.lesieur.name",
   "urlPort": 80,
   "optimizations": "optimizations.json",
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

et optimizations.json :

{
   "images": {
      "media/images/example.png": "media/images/optimized/",
      "media/images/example.jpg": "media/images/optimized/",
      "media/images/example.gif": "media/images/optimized/",
      "media/images/example.svg": "media/images/optimized/"
   }
}

Note : il est possible de désactiver les optimisations en ne les incluant pas dans le webconfig en question.

Désactiver des optimisations

Il est également possible de ne pas exécuter l'optimisation au démarrage d'un site web avec NodeAtlas avec les propriétés "imgOptimizationsEnable": false.

{
   "imgOptimizationsEnable": false,
   "optimizations": {
      "images": {
         "media/images/example.png": "media/images/optimized/",
         "media/images/example.jpg": "media/images/optimized/",
         "media/images/example.gif": "media/images/optimized/",
         "media/images/example.svg": "media/images/optimized/"
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

Note : si vos optimisations sont dans un fichier partagé, vous pouvez également les désactiver simplement en retirant la ligne "optimizations": "optimizations.json".

Ré-générer les optimizations avant chaque rendu de page

Vous pouvez demander à ce que les fichiers soient régénérés avant chaque affichage de page avec les propriétés "imgOptimizationsBeforeResponse": true.

{
   "imgOptimizationsBeforeResponse": false,
   "optimizations": {
      "images": {
         "media/images/example.png": "media/images/optimized/",
         "media/images/example.jpg": "media/images/optimized/",
         "media/images/example.gif": "media/images/optimized/",
         "media/images/example.svg": "media/images/optimized/"
      }
   },
   "routes": {
      "/": {
         "view": "index.htm"
      }
   }
}

Note : ceci n'est pas conseillé en production car cela ralenti les réponses des pages.

Injection de CSS sur les balises

Quand on crée des templates pour envoyer des lettres d'informations par email, ou même de simple message, on ne peut pas attacher de feuille de style. Le seul moyen à notre disposition est d'écrire les instructions CSS dans le template à l'intérieur de l'attribut style brisant ainsi la séparation du font et de la forme.

Injection spécifique

Avec injectCss, il vous suffit d'habiller votre template comme à votre habitude via une feuille de style et NodeAtlas injectera à chaque rendu les styles dans l'attribut style. Il ne vous restera plus qu'à générer vos templates.

Avec par exemple la configuration suivante :

{
   "routes": {
      "/": {
         "view": "email.htm",
         "output": "bienvenue.html",
         "injectCss": "stylesheets/email.css"
      }
   }
}

et l'ensemble de fichiers suivant :

├─ serverless/
├─ assets/
│  └─ stylesheets/
│     └─ email.css
├─ views/
│  └─ email.htm
└─ webconfig.json

dont les contenus sont :

stylesheets/common.css

body {
   color: #f00;
}

views/email.htm

<!DOCTYPE html>
<html lang="fr-fr">
   <head>
      <meta charset="utf-8">
      <title>Email</title>
   </head>
   <body>
      <p>Ceci est un exemple de template email.</p>
   </body>
</html>

vous obtiendrez en sortie avec la commande node-atlas --generate l'ensemble de fichier suivant :

├─ serverless/
│  └─ bienvenue.html    <= template email prêt à l'envoi !
├─ assets/
│  └─ stylesheets/
│     └─ email.css
├─ views/
│  └─ email.htm
└─ webconfig.json

avec comme contenu pour serverless/bienvenue.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Email</title>
   </head>
   <body style="color: #f00;">
      <p>This is a template email.</p>
   </body>
</html>

Ce mécanisme marche également si vous n'avez pas l'intention de générer quoi que ce soit mais sur un site qui tourne. Pratique pour modifier vos maquettes en live avant de les générer.

Injection globale

Il existe également la même propriété globale impactant toutes les pages.

{
   "injectCss": "stylesheets/email.css",
   "routes": {
      "/bienvenue/": {
         "view": "email-a.htm",
         "generate": "bienvenue.html"
      },
      "/au-revoir/": {
         "view": "email-b.htm",
         "generate": "au-revoir.html"
      }
   }
}

ainsi les deux pages bienvenue et au-revoir contiendront chacune <body style="color: #f00;">.

Injection multiple

Il est possible :

de préciser des feuilles spécifiques et communes en même temps.
de préciser plus d'une feuille à la fois.

{
   "injectCss": ["stylesheets/reset.css", "stylesheets/email.css"],
   "routes": {
      "/bienvenue/": {
         "view": "email-a.htm",
         "generate": "bienvenue.html",
         "injectCss": "/stylesheets/welcome.css"
      },
      "/au-revoir/": {
         "view": "email-b.htm",
         "generate": "au-revoir.html",
         "injectCss": ["stylesheets/good-bye.css", "/stylesheets/others.css"]
      }
   }
}

Test : Depuis ./tests/examples/css-injection lancez node "../../../" --generate --webconfig webconfig.multiple.json. Le résultat est dans serverless.

◄ Partie contrôleur

Partie avancée ►

Mise en place Simple

Site vivant et Évolutif

Partie Cliente Agnostique

Partie outils

Minifier les CSS / JS

Créer des paquetages

Paquetage dans un fichier partagé

Désactiver des paquetages

Régénérer les paquetages avant chaque rendu de page

La version dans les noms de fichiers générés

Paquetages avec WebSockets

Générer les CSS avec Less

Source Map, minification et autoprefix

Compiler les Less avec `--generate`

Générer les CSS avec Stylus

Source Map, minification et autoprefix

Compiler les Stylus avec `--generate`

Optimiser les images (Supprimé de la v2.0.2+)

Créer des optimisations

Créer des optimisations par groupes de fichier

Ajouter des options aux optimisations

Optimisations dans un fichier partagé

Désactiver des optimisations

Ré-générer les optimizations avant chaque rendu de page

Injection de CSS sur les balises

Injection spécifique

Injection globale

Injection multiple

Partie outils

Minifier les CSS / JS

Créer des paquetages

Paquetage dans un fichier partagé

Désactiver des paquetages

Régénérer les paquetages avant chaque rendu de page

La version dans les noms de fichiers générés

Paquetages avec WebSockets

Générer les CSS avec Less

Source Map, minification et autoprefix

Compiler les Less avec --generate

Générer les CSS avec Stylus

Source Map, minification et autoprefix

Compiler les Stylus avec --generate

Optimiser les images (Supprimé de la v2.0.2+)

Créer des optimisations

Créer des optimisations par groupes de fichier

Ajouter des options aux optimisations

Optimisations dans un fichier partagé

Désactiver des optimisations

Ré-générer les optimizations avant chaque rendu de page

Injection de CSS sur les balises

Injection spécifique

Injection globale

Injection multiple

Compiler les Less avec `--generate`

Compiler les Stylus avec `--generate`