Utiliser Grunt pour spip

Accueil > Nouvelles brèves > Utiliser Grunt pour spip

J’ai découvert Grunt en étudiant la création de site sous Thélia 2. Un peu compliqué à prendre en main et à en comprendre l’utilité, depuis que je sais comment Grunt fonctionne, je m’en passe difficilement.

Rapidement, Grunt est un "task Worker", un logiciel qui travaille pour vous et qui vous simplifie la vie.

Dans le cas présent, j’utilise Grunt pour travailler avec des fichiers Less, et pour que Grunt surveille les modifications de mes fichiers Less, et les transforme automatiquement en fichier css.

Je mets ici par écrit la procédure que je suis pour installer Grunt pour nu projet sous Spip, afin de ne pas avoir chaque fois à rechercher la méthode à suivre.

1. Installer le site, dans mon cas grâce à la mutualisation de Spip sous Linux
2. Créer un fichier squelettes. Vérifier les droits, pour que le fichier soit bien accessible en écriture
3. Naviguer dans le dossier :

cd /var/www/html/monprojet/squelettes

4. Initier un nouveau projet Node

npm init

Remplir les informations demandées. Cette initialisation crée le fichier package.json
5. Initier Grunt pour ce projet

sudo npm install -g grunt cli

6. Installer ensuite les dépendances de Grunt dont j’ai besoin :

sudo npm install grunt grunt-contrib-less grunt-contrib-watch jit-grunt --save-dev

J’installe les dépendance pour la conversion des fichiers Less en fichier css comprimés (!!) et Watch, pour surveiller les changements des fichiers Less
7. Je crée un fichier Gruntfile.js, et j’adapte sa configuration à mon site sous Spip. Dans mon cas, j’obtiens un fichier Gruntfile.js de ce genre :

module.exports = function(grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    less: {
      development: {
        options: {
          compress: true,
          yuicompress: true,
          optimization: 2
        },
        files: {
          "css/main.css": "less/main.less",
          "css/smallscreens.css": "less/smallscreens.less" // destination file and source file
        }
      }
    },
    watch: {
      styles: {
        files: ['less/**/*.less'], // which files to watch
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    }
  });

  grunt.registerTask('default', ['less', 'watch']);
};

8. Ne pas oublier de créer le dossier less dans lequel on mettra les fichiers main.less et smalscreens.less
9. Lancer Grunt

On est dans /var/www/html/monprojet/squelettes/ et on tape simplement :

grunt