Comment diminuer la taille des fichiers html, css et js ?
html est un langage informatique qui permet de structurer le contenu des pages web. Il est le fond.
css est un langage informatique qui permet de formater l'affichage des documents html. Il est la forme.
js ou javascript est un langage informatique principalement employé dans les pages web interactives.
grunt est un outil libre qui permet d'automatiser des tâches répétitives, par exemple, diminuer la taille des fichiers html, css et js.
Nous avons utilisé cette méthode pour diminuer l'utilisation de la bande passante dans nos projets de cartes intéractives Croc'Lyon et projects.glicer.com/lyon pour en accélérer le téléchargement.
Cette méthode permet également de rendre difficilement compréhensible le code javascript.
node.js doit être installé, ce logiciel libre permet d'exécuter du javascript côté serveur, il est nécessaire au fonctionnement de grunt.
grunt-cli est l'interface de commande.
grunt-cli permet d'exécuter la version de grunt qui a été configurée dans un fichier gruntfile.js. Ceci permet d'utiliser différentes versions de grunt installées sur une même machine.
En mode administrateur, exécuter la ligne de commande ci-dessous :
npm install -g grunt-cli
Cela affiche :
C:\Users\GLICER\AppData\Roaming\npm\grunt -> C:\Users\GLICER\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\GLICER\AppData\Roaming\npm\node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)
grunt a besoin d'un fichier package.json et d'un fichier gruntfile.js qui doivent être situés dans le même répertoire.
package.json : Contient la liste des composants grunt nécessaires.
gruntfile.js : Contient la liste des tâches à exécuter.
Nos fichiers sont organisés comme ci-dessous :
├───gruntproject
│ gruntfile.js
│ package.json
│
└───src
│ asiatique.html
│ aujourdhui.html
│ boire.html
│ evenement.html
│ francais.html
│ monde.html
│ rapide.html
│
├───css
│ getter.css
│
└───js
getter.js
Dans notre cas nous avons besoin des composants suivants :
{
"name": "nom-du-projet",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-htmlmin": "~0.2.0",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-contrib-uglify": "~0.3.0"
}
}
Nous devons configurer les options des différents composants.
module.exports = function (grunt)
{
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
cwd: '../src/', //répertoire des fichiers html à compresser
src: '**/*.html', //tous les fichier html dans tous les sous-répertoires
dest: '../build/' //répertoire des fichiers html compressés
}]
}
},
cssmin: {
compress: {
options: {
keepSpecialComments: '*'
},
src: '../src/css/getter.css', //fichier css à compresser
dest: '../build/css/getter.min.css' //fichier css compressé
}
},
uglify: {
dist: {
src: '../src/js/getter.js', //fichier js à compresser
dest: '../build/js/getter.min.js' //fichier js compressé
}
}
});
// Charge les composants nécessaires
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Tâches à exécuter par défaut
grunt.registerTask('default', ['htmlmin', 'cssmin', 'uglify']);
};
En mode administrateur, depuis le même répertoire que le fichier package.json, exécuter la ligne de commande ci-dessous :
npm install
Cela affiche :
npm WARN package.json nom-du-projet@0.1.0 No description
npm WARN package.json nom-du-projet@0.1.0 No repository field.
npm WARN package.json nom-du-projet@0.1.0 No README data
grunt-contrib-htmlmin@0.2.0 node_modules\grunt-contrib-htmlmin
├── each-async@0.1.3
├── pretty-bytes@0.1.2
├── html-minifier@0.5.6
└── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
grunt-contrib-cssmin@0.7.0 node_modules\grunt-contrib-cssmin
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── clean-css@2.0.8 (commander@2.0.0)
grunt@0.4.5 node_modules\grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.14
├── colors@0.6.2
├── getobject@0.1.0
├── rimraf@2.2.8
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── nopt@1.0.10 (abbrev@1.0.5)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── lodash@0.9.2
├── underscore.string@2.2.1
├── coffee-script@1.3.3
├── iconv-lite@0.2.11
├── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
grunt-contrib-uglify@0.3.3 node_modules\grunt-contrib-uglify
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)
Depuis le même répertoire que gruntfile.js, exécuter la ligne de commande ci-dessous :
grunt
Cela affiche :
Running "htmlmin:dist" (htmlmin) task
Minified ../build/asiatique.html 41.18 kB → 23.31 kB
Minified ../build/aujourdhui.html 59.06 kB → 33.38 kB
Minified ../build/boire.html 35.94 kB → 21.14 kB
Minified ../build/evenement.html 56.67 kB → 31.75 kB
Minified ../build/francais.html 78.73 kB → 43.24 kB
Minified ../build/monde.html 33.25 kB → 19.86 kB
Minified ../build/rapide.html 71.44 kB → 40.06 kB
Running "cssmin:compress" (cssmin) task
File ../build/css/getter.min.css created.
Running "uglify:dist" (uglify) task
File ../build/js/getter.min.js created.
Done, without errors.
ou en spécifiant le chemin du fichier gruntfile.js :
grunt --gruntfile gruntproject/gruntfile.js
| Type | Taille originale | Taille compressée | Gain |
|---|---|---|---|
| html | 378 Ko | 214 Ko | 43 % |
| css | 149 Ko | 121 Ko | 18 % |
| js | 576 Ko | 264 Ko | 54 % |
├───build
│ │ asiatique.html
│ │ aujourdhui.html
│ │ boire.html
│ │ evenement.html
│ │ francais.html
│ │ monde.html
│ │ rapide.html
│ │
│ ├───css
│ │ getter.min.css
│ │
│ └───js
│ getter.min.js
│
├───gruntproject
│ │ gruntfile.js
│ │ package.json
│ │
│ └───node_modules
│ ├───grunt
│ ├───grunt-contrib-cssmin
│ ├───grunt-contrib-htmlmin
│ └───grunt-contrib-uglify
└───src
│ asiatique.html
│ aujourdhui.html
│ boire.html
│ evenement.html
│ francais.html
│ monde.html
│ rapide.html
│
├───css
│ getter.css
│
└───js
getter.js
