<commit_before># Grunt
Quand on crée des sites internet, il nous arrive de faire souvent les mêmes tâches : 

* *Minifier* la taille des fichiers javascript et css pour gagner en temps de chargement
* Optimiser la taille des images
* Lancer les tests javascript
* ...

Afin de ne pas s'embêter à tout configurer à chaque fois. Des petits malins ont créé les gestionnaires de tâches tels que [grunt](http://gruntjs.com/). 

Nous allons utiliser grunt en ligne de commande. **Toutes les lignes de commandes devront être lancées à partir du répertoire de ce projet.**

# Installation

Pour l'installer il suffit de regarder la documentation officielle [ici](http://gruntjs.com/getting-started).
>Grunt a besoin de npm, le gestionnaire de paquet de node.js pour fonctionner.

## Créer un projet grunt
Grunt a besoin de [2 fichiers](http://gruntjs.com/getting-started#preparing-a-new-grunt-project) pour fonctionner **package.json** et **Gruntfile.js**
* **package.json** contient la liste des *plugins* utilisés dans notre projet. *npm* se base sur ce fichier pour télécharger les fichiers des plugins (les dépendances).
* **Gruntfile.js** est utilisé pour charger et paramétrer les *plugins*

# Livereload

Le rafraichissage automatique de la page dans le navigateur web est une fonctionnalité qui peut être très pratique quand on fait de l'intégration. 

En sauvegardant nos modifications la page de rafraîchit automatiquement !

Pour l'utiliser, il faut d'abord installer le plugin *grunt-contrib-watch* mais pas seulement ! **Il faut aussi installer [l'extension](http://livereload.com/extensions/) livereload pour notre navigateur internet**. Pour ma part, je l'ai installé sur Chrome.

Une fois l'extension installée, on va installer *grunt-contrib-watch*.

Tout d'abord, on doit créer le fichier *package.json*
```
{
  "name": "hello-grunt", 
  "version": "0.1.0",    
  "devDependencies": {   
    "grunt": "~0.4.5",
    "grunt-contrib-watch": "^1.0.0"
  }
}
```
Comme dit précédemment, ce fichier contient les dépendances, nos plugins. Pour l'instant *grunt* et *grunt-contrib-watch*. 
Nous allons récupérer les sources des plugins pour les rapatrier sur notre ordinateur :
```console
npm install
```
Par cette commande, *npm* va aller lire le fichier *package.json* et télécharger les plugins correspondant à ceux présents dans **devDependencies**. Si on regarde dans notre dossier, on voit qu'il y a un nouveau répertoire qui s'appelle *node_modules*. C'est là où *npm* a téléchargé les sources des plugins.

Voilà *grunt* et *grunt-watch* sont installés. 

## CSS

Nous allons maintenant configurer grunt pour actualiser automatiquement la page de notre navigateur quand on modifie les fichiers css qui se trouvent dans le répertoire *css*. Nous allons créer le fichier **Gruntfile.js** : 
```javascript
/** Gruntfile.js */
module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //Configuration for watch
        watch: {
            //watch all changes on css files in the css directory and subdirectories<commit_msg>Precision about where to create the gruntfile and the package.json<commit_after># Grunt
Quand on crée des sites internet, il nous arrive de faire souvent les mêmes tâches : 

* *Minifier* la taille des fichiers javascript et css pour gagner en temps de chargement
* Optimiser la taille des images
* Lancer les tests javascript
* ...

Afin de ne pas s'embêter à tout configurer à chaque fois. Des petits malins ont créé les gestionnaires de tâches tels que [grunt](http://gruntjs.com/). 

Nous allons utiliser grunt en ligne de commande. **Toutes les lignes de commandes devront être lancées à partir du répertoire de ce projet.**

# Installation

Pour l'installer il suffit de regarder la documentation officielle [ici](http://gruntjs.com/getting-started).
>Grunt a besoin de npm, le gestionnaire de paquet de node.js pour fonctionner.

## Créer un projet grunt
Grunt a besoin de [2 fichiers](http://gruntjs.com/getting-started#preparing-a-new-grunt-project) pour fonctionner **package.json** et **Gruntfile.js**
* **package.json** contient la liste des *plugins* utilisés dans notre projet. *npm* se base sur ce fichier pour télécharger les fichiers des plugins (les dépendances).
* **Gruntfile.js** est utilisé pour charger et paramétrer les *plugins*

**Attention : ces fichiers doivent se trouver à la racine du répertoire du projet**

# Livereload

Le rafraichissage automatique de la page dans le navigateur web est une fonctionnalité qui peut être très pratique quand on fait de l'intégration. 

En sauvegardant nos modifications la page de rafraîchit automatiquement !

Pour l'utiliser, il faut d'abord installer le plugin *grunt-contrib-watch* mais pas seulement ! **Il faut aussi installer [l'extension](http://livereload.com/extensions/) livereload pour notre navigateur internet**. Pour ma part, je l'ai installé sur Chrome.

> Sous Chrome, pour que l'extension fonctionne il faut activer "Autoriser l'accès aux URL de fichiers" dans les options de l'extension.

Une fois l'extension installée, on va installer *grunt-contrib-watch*.

Tout d'abord, on doit créer le fichier *package.json*
```
{
  "name": "hello-grunt", 
  "version": "0.1.0",    
  "devDependencies": {   
    "grunt": "~0.4.5",
    "grunt-contrib-watch": "^1.0.0"
  }
}
```
Comme dit précédemment, ce fichier contient les dépendances, nos plugins. Pour l'instant *grunt* et *grunt-contrib-watch*. 
Nous allons récupérer les sources des plugins pour les rapatrier sur notre ordinateur :
```console
npm install
```
Par cette commande, *npm* va aller lire le fichier *package.json* et télécharger les plugins correspondant à ceux présents dans **devDependencies**. Si on regarde dans notre dossier, on voit qu'il y a un nouveau répertoire qui s'appelle *node_modules*. C'est là où *npm* a téléchargé les sources des plugins.

Voilà *grunt* et *grunt-watch* sont installés. 

## CSS

Nous allons maintenant configurer grunt pour actualiser automatiquement la page de notre navigateur quand on modifie les fichiers css qui se trouvent dans le répertoire *css*. Nous allons créer le fichier *Gruntfile.js* : 
```javascript
/** Gruntfile.js */
module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //Configuration for watch
        watch: {
            //watch all changes on css files in the css directory and subdirectories
{'fraction_non_alphanumeric': 0.08790533271861073, 'fraction_numerical': 0.0030736130321192563, 'mean_word_length': 4.3039934800326, 'pattern_counts': {'":': 10, '<': 3, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1479563', 'n_tokens_mistral': 2097, 'n_tokens_neox': 2041, 'n_words': 817}