Grunt – Les plugins indispensables lorsqu’on est intégrateur

Grunt – Les plugins indispensables lorsqu’on est intégrateur

Html5, CSS3, Javascript Tutoriels

Tout comme son homologue Gulp, Grunt s’est imposé très rapidement comme étant un outil indispensable dans la vie des intégrateurs. Bien maîtrisé, il vous fera gagner un temps considérable dans le développement de vos projets.

Vous trouverez ci-dessous une liste de plugins que j’utilise quasi systématiquement sur l’ensemble de mes projets.

grunt-contrib-less

Adresse : https://www.npmjs.org/package/grunt-contrib-less
Description : permet de compiler vos fichiers .less
Exemple de configuration :

less: {
   dist: {
      options: {
         compress: true
      },
      files: {
         'assets/css/styles.css': 'assets/css/less/sources.less'
      }
   }
}

grunt-contrib-compass

Adresse : https://www.npmjs.org/package/grunt-contrib-compass
Description : permet de compiler vos fichiers .scss en utilisant Compass.
Exemple de configuration :

compass: {
   dev: {
      options: {
         sassDir: 'sass',
         cssDir: 'css'
      }
   }
}

grunt-contrib-concat

Adresse : https://www.npmjs.org/package/grunt-contrib-concat
Description : concatène vos fichiers. Utile si vous souhaitez unifier vos fichiers CSS ou JS.
Exemple de configuration :

concat: {
   plugins: {
      src: ['js/plugins/*.js'],
      dest: 'js/plugins.js'
   }
}

grunt-contrib-uglify

Adresse : https://www.npmjs.org/package/grunt-contrib-uglify
Description : permet de minifier vos fichiers Javascript à l’aide de UglifyJS
Exemple de configuration :

uglify: {
   options: {
      mangle: true
   },
   dist: {
      files: {
         'js/src/scripts.js': ['js/dist/scripts.min.js'],
         'js/src/common.js' : ['js/dist/common.min.js']
      }
   }
}

grunt-banner

Adresse : https://www.npmjs.org/package/grunt-banner
Description : permet d’ajouter une bannière dans l’entête de vos fichiers. Utile si vous distribuez vos sources.
Exemple de configuration :

usebanner: {
   plugin: {
      options: {
         banner: '/*' + "\n" +
                 ' * Author: Sébastien Decamme' + "\n" +
                 ' * Website: http://shakup.net' + "\n" +
                 ' */'
         },
      files: {
         src: ['js/plugin.min.js']
      }
   }
}

grunt-ftp-deploy

Adresse : https://www.npmjs.org/package/grunt-ftp-deploy
Description : permet de déployer vos fichiers via FTP.
Exemple de configuration :

'ftp-deploy': {
   site: {
      auth: {
         host: '255.255.255.255',
         port: 21,
         authKey: 'ftp-connect'
      },
      src: 'dist',
      dest: '/var/www/monsite',
      exclusions: ['**/.DS_Store', '**/Thumbs.db']
   }
}

Les identifiants de connexion doivent être renseignés dans un fichier situé au même niveau que le fichier Gruntfile.js et devra se nommer .ftppass.

{
   "ftp-connect": {
      "username": "ftpuser",
      "password": "monsuperpassword"
   }
}

grunt-contrib-watch

Adresse : https://www.npmjs.org/package/grunt-contrib-watch
Description : plugin indispensable si vous ne souhaitez pas passer votre temps sur la console. Ce plugin détecte automatiquement vos fichiers modifiés et execute la tâche adéquate.
Exemple de configuration :

watch: {
   scripts: {
      files: ['assets/js/scripts.js'],
      tasks: ['uglify']
   },
   less: {
      files: ['assets/css/styles.less'],
      tasks: ['less']
   }
}

grunt-notify

Adresse : https://www.npmjs.org/package/grunt-notify
Description : si vous utiliser le plugin Watch, alors celui-ci devrait vous intéresser. Il vous permet d’afficher une notification à l’écran sur le résultat d’une tâche.
Exemple de configuration :

notify: {
   less: {
      options: {
         title: 'Task Complete',
         message: 'LESS finished running',
      }
   },
   uglify: {
      options: {
         title: 'Task Complete',
         message: 'Uglify finished running'
      }
   }
}

Pour activer les notifications, vous devez préfixer le nom de vos tâches avec notify:. Exemple pour la tâche Watch :

watch: {
   scripts: {
      files: ['assets/js/scripts.js'],
      tasks: ['notify:uglify']
   },
   less: {
      files: ['assets/css/styles.less'],
      tasks: ['notify:less']
   }
}

grunt-uncss

Adresse : https://www.npmjs.org/package/grunt-uncss
Description : relativement compliqué à prendre en main (du moins à la première utilisation), ce plugin est au final très pratique lorsque vous utilisez des frameworks CSS. En effet, lorsque vous utilisez des frameworks tels que Bootstrap, vous n’utilisez généralement qu’une petite partie des fonctionnalités proposées. UnCSS est là pour nettoyer vos feuilles de style pour ne garder que se dont vous utilisez.
Exemple de configuration :

uncss: {
   dist: {
      files: {
         'dist/css/tidy.css': ['app/index.html', 'app/about.html']
      }
   }
}

grunt-contrib-jshint

Adresse : https://www.npmjs.org/package/grunt-contrib-jshint
Description : permet de verifier la conformité de votre code Javascript.
Exemple de configuration :

jshint: {
   all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js']
}

A propos de l'auteur

Commentaires

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.