Compresser les fichiers html, css et js

Comment diminuer la taille des fichiers html, css et js ?

24 novembre 2014

Sommaire

Rappels
Exemple d'utilisation
Pré-requis
Installer grunt-cli
Préparer un nouveau projet grunt
Exécuter les tâches
Analyse des résultats
Arborescence finale
Versions des logiciels et langages utilisés

Rappels

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.

Exemple d'utilisation

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.

Pré-requis

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.

Installer grunt-cli

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)

Préparer un nouveau projet grunt

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

package.json

Dans notre cas nous avons besoin des composants suivants :

grunt-contrib-htmlmin : permet de compresser les fichiers html.
grunt-contrib-cssmin : permet de compresser les fichiers css.
grunt-contrib-uglify : permet de compresser les fichiers js.

{
    "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"
    }
}

gruntfile.js

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']);
};

Installer les composants

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)

Exécuter les tâches

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

Analyse des résultats

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 %

Arborescence finale

├───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

Versions des logiciels et langages utilisés

windows 7
node 0.10
grunt 0.1
html 5
css 3