{"id":62,"date":"2014-10-24T11:29:37","date_gmt":"2014-10-24T11:29:37","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=62"},"modified":"2015-01-19T14:42:55","modified_gmt":"2015-01-19T13:42:55","slug":"grunt-installation-et-utilisation","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/grunt-installation-et-utilisation\/","title":{"rendered":"Grunt : Installation et utilisation"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/grunt1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-63\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/grunt1-300x158.jpg\" alt=\"grunt1\" width=\"206\" height=\"97\" \/><\/a><\/p>\n<p>Non &#8220;Grunt&#8221; n&#8217;est pas juste un cri de b\u00eate f\u00e9roce !<\/p>\n<p>En d\u00e9veloppement d&#8217;applications, moins vous avez de travail \u00e0 faire lors de l&#8217;ex\u00e9cution des t\u00e2ches r\u00e9p\u00e9titives comme la &#8220;minification&#8221;, la compilation, les tests unitaires, etc, et plus votre travail devient facile.<br \/>\nEt Grunt s&#8217;occupe justement de toutes ces t\u00e2ches.<\/p>\n<p>On va donc voir comment l&#8217;installer et l&#8217;utiliser.<\/p>\n<p><!--more--><\/p>\n<h3>Installation :<\/h3>\n<p>Grunt et ses plugins sont install\u00e9s et g\u00e9r\u00e9s via la commande \u201cnpm\u201d du gestionnaire de package de \u00ab\u00a0Node.js\u00a0\u00bb.<\/p>\n<p>La version 0.4.x de grunt requiert d\u2019avoir install\u00e9 au minimum la version 0.8.0 de Node.js.<\/p>\n<p><em>Se r\u00e9f\u00e9rer \u00e0 l\u2019article <a href=\"http:\/\/lalloue.fr\/blog\/installer-node-js\/\">\u00ab\u00a0Installer node.js\u00a0\u00bb<\/a>.<\/em><\/p>\n<p>Avant de lancer l\u2019installation de Grunt, s\u2019assurer que \u00ab\u00a0npm\u00a0\u00bb est bien \u00e0 jour en lan\u00e7ant la commande suivante\u00a0:<\/p>\n<pre lang=\"bash\">$ npm update \u2013g npm\r\n<\/pre>\n<p>Sous Linux, la commande peut n\u00e9cessiter l\u2019utilisation de \u00ab\u00a0sudo\u00a0\u00bb.<\/p>\n<p>Ouvrir une invite de commande (touches Windows+R et taper \u2018cmd\u2019)<\/p>\n<p>Taper la commande suivante\u00a0:<\/p>\n<pre lang=\"bash\">$ npm install \u2013g grunt-cli\r\n<\/pre>\n<p>(l\u2019option \u2013g indique que c\u2019est une installation globale)<\/p>\n<h3>Test :<\/h3>\n<p>Pour s\u2019assurer de la bonne installation de grunt\u00a0:<\/p>\n<ul>\n<li>Ouvrir une invite de commande (touches Windows+R et taper \u2018cmd\u2019)<\/li>\n<li>Taper la commande suivante :<\/li>\n<\/ul>\n<pre lang=\"bash\">$ npm list --depth=0\r\n<\/pre>\n<p>Vous devriez avoir des lignes dans ce style l\u00e0 :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/res1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-69\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/res1.png\" alt=\"res1\" width=\"259\" height=\"284\" \/><\/a><\/p>\n<p>Par exemple, ici j\u2019ai la version 0.4.5 de Grunt d\u2019install\u00e9e.<br \/>\nCela m\u2019indique \u00e9galement les d\u00e9pendances de Grunt install\u00e9es (les d\u00e9pendances commen\u00e7ant par \u00ab\u00a0grunt-contrib\u2026\u00a0\u00bb correspondent aux d\u00e9pendances cr\u00e9\u00e9es par les \u00e9quipe de Grunt).<\/p>\n<h3>Utilisation :<\/h3>\n<p>Pour utiliser Grunt dans un nouveau projet, il est n\u00e9cessaire de cr\u00e9er 2 fichiers \u00e0 la racine du projet\u00a0: \u00ab\u00a0package.json\u00a0\u00bb et \u00ab\u00a0gruntfile.js\u00a0\u00bb.<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/res11.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-70 size-full\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/res11.png\" alt=\"res1\" width=\"592\" height=\"50\" srcset=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/res11.png 592w, http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/10\/res11-300x25.png 300w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><\/a><\/p>\n<p><span style=\"color: #0070d5;\"><strong>Package.json\u00a0:<\/strong><\/span> Ce fichier est utilis\u00e9 par \u00ab\u00a0npm\u00a0\u00bb pour stocker les m\u00e9tadonn\u00e9es\u00a0 du projet comme les modules utilis\u00e9s.<\/p>\n<p>Il y a diff\u00e9rents moyens pour cr\u00e9er ce fichier pour un projet\u00a0:<\/p>\n<ul>\n<li>La commande \u00ab\u00a0Grunt Init\u00a0\u00bb (<a href=\"http:\/\/gruntjs.com\/project-scaffolding\">http:\/\/gruntjs.com\/project-scaffolding<\/a>) cr\u00e9e par d\u00e9faut un fichier \u00ab\u00a0package.json\u00a0\u00bb.<\/li>\n<li>L\u2019initialisation de \u00ab\u00a0npm\u00a0\u00bb va \u00e9galement cr\u00e9er un fichier \u00ab\u00a0package.json\u00a0\u00bb basique.<\/li>\n<li>Il est \u00e9galement possible de cr\u00e9er son propre fichier depuis l\u2019exemple de base ci-dessous\u00a0:<\/li>\n<\/ul>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n{\r\n  &quot;name&quot;: &quot;my-project-name&quot;,\r\n  &quot;version&quot;: &quot;0.1.0&quot;,\r\n  &quot;devDependencies&quot;: {\r\n    &quot;grunt&quot;: &quot;~0.4.5&quot;,\r\n    &quot;grunt-contrib-jshint&quot;: &quot;~0.10.0&quot;,\r\n    &quot;grunt-contrib-nodeunit&quot;: &quot;~0.4.1&quot;,\r\n    &quot;grunt-contrib-uglify&quot;: &quot;~0.5.0&quot;\r\n  }\r\n}\r\n<\/pre>\n<p><span style=\"color: #0070d5;\"><strong>Gruntfile.js\u00a0:<\/strong><\/span>\u00a0: Ce fichier est utilis\u00e9 pour configurer ou d\u00e9finir des taches et charger les plugins Grunt.<\/p>\n<p>Gruntfile.js est un fichier javascript compos\u00e9 des parties suivantes\u00a0:<\/p>\n<ul>\n<li>La fonction \u00ab\u00a0wrapper\u00a0\u00bb<\/li>\n<li>La configuration du projet et des taches \u00e0 r\u00e9aliser<\/li>\n<li>Le chargement des plugins Grunt et des taches<\/li>\n<li>La personnalisation de t\u00e2ches<\/li>\n<\/ul>\n<p>Ci-dessous un fichier GruntFile d\u2019exemple\u00a0:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nmodule.exports = function(grunt) {\r\n\r\n  \/\/ Project configuration.\r\n  grunt.initConfig({\r\n    pkg: grunt.file.readJSON('package.json'),\r\n    uglify: {\r\n      options: {\r\n        banner: '\/*! &lt;%= pkg.name %&gt; &lt;%= grunt.template.today(&quot;yyyy-mm-dd&quot;) %&gt; *\/\\n'\r\n      },\r\n      build: {\r\n        src: 'src\/&lt;%= pkg.name %&gt;.js',\r\n        dest: 'build\/&lt;%= pkg.name %&gt;.min.js'\r\n      }\r\n    }\r\n  });\r\n\r\n  \/\/ Load the plugin that provides the &quot;uglify&quot; task.\r\n  grunt.loadNpmTasks('grunt-contrib-uglify');\r\n\r\n  \/\/ Default task(s).\r\n  grunt.registerTask('default', ['uglify']);\r\n\r\n};\r\n<\/pre>\n<p>On y retrouve les diff\u00e9rents \u00e9l\u00e9ments cit\u00e9s ci-dessus :<\/p>\n<p><span style=\"color: #0070d5;\"><strong>La fonction \u00ab\u00a0Wrapper\u00a0\u00bb\u00a0:<\/strong><\/span><\/p>\n<p>Chaque Fichier GruntFile utilise ce format et tout le code Grunt doit \u00eatre \u00e9crit \u00e0 l\u2019int\u00e9rieur de cette fonction\u00a0:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nmodule.exports = function(grunt) {\r\n \/\/ Do grunt-related things in here\r\n};\r\n<\/pre>\n<p><span style=\"color: #0070d5;\"><strong>La configuration du projet et des taches \u00e0 r\u00e9aliser\u00a0:<\/strong><\/span><\/p>\n<p>La configuration des t\u00e2ches doit \u00eatre d\u00e9finie dans la m\u00e9thode grunt.initConfig.<\/p>\n<p>Dans l\u2019exemple ci-dessus, \u00ab\u00a0grunt.file.readJSON(&#8216;package.json&#8217;)\u00a0\u00bb importe les m\u00e9tadonn\u00e9es JSON stock\u00e9es dans \u00ab\u00a0package.json\u00a0\u00bb dans la configuration de Grunt.<\/p>\n<p>Pour param\u00e9trer les t\u00e2ches, celles-ci doivent \u00eatre d\u00e9finies par une propri\u00e9t\u00e9 du m\u00eame nom. Dans l\u2019exemple ci-dessus on a ainsi le plugin \u00ab\u00a0uglify\u00a0\u00bb (grunt-contrib-uglify) qui est d\u00e9fini par son nom propre et pour lequel on d\u00e9finit sa configuration. On d\u00e9finit ainsi ses options\u00a0: \u00ab\u00a0banner\u00a0\u00bb et ses param\u00e8tres de \u00ab\u00a0build\u00a0\u00bb correspondant aux fichiers sources impact\u00e9s (src) et aux fichiers cibles g\u00e9n\u00e9r\u00e9s (dest) par la t\u00e2che.<\/p>\n<p>Tous les plugins renseign\u00e9s dans le fichier \u00ab\u00a0package.json\u00a0\u00bb peuvent ainsi \u00eatre param\u00e9tr\u00e9s dans la m\u00e9thode grunt.initConfig.<\/p>\n<p><span style=\"color: #0070d5;\"><strong>Le chargement des plugins Grunt et des taches :<\/strong><\/span><\/p>\n<p>La plupart des t\u00e2ches comme la concatenation, la minification, etc\u2026 sont d\u00e9j\u00e0 disponibles en tant que plugin grunt. Pour rendre actif un plugin, celui-ci doit\u00a0:<\/p>\n<ul>\n<li>Etre sp\u00e9cifi\u00e9 dans le fichier package.json en tant que d\u00e9pendance.<\/li>\n<li>Etre install\u00e9 via la commande \u00ab\u00a0npm\u00a0\u00bb<\/li>\n<li>Etre d\u00e9fini dans le fichier \u00ab\u00a0GruntFile\u00a0\u00bb avec la commande suivante\u00a0:<\/li>\n<\/ul>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Load the plugin that provides the &quot;uglify&quot; task.\r\ngrunt.loadNpmTasks('grunt-contrib-uglify');\r\n<\/pre>\n<p>Autre solution:<\/p>\n<p>La m\u00e9thode ci-dessus est la m\u00e9thode de chargement standard des plugins. Mais il existe un plugin, qui va charger automatiquement les d\u00e9pendances renseign\u00e9es dans le fichier \u00ab\u00a0package.json\u00a0\u00bb. Ce module se nomme \u00ab\u00a0load-grunt-tasks\u00a0\u00bb (<a href=\"https:\/\/github.com\/sindresorhus\/load-grunt-tasks\">https:\/\/github.com\/sindresorhus\/load-grunt-tasks<\/a>)<\/p>\n<p>Pour l\u2019utiliser\u00a0:<\/p>\n<ul>\n<li>Lancer son installation\u00a0: \u00ab\u00a0$ npm install &#8211;save-dev load-grunt-tasks\u00a0\u00bb<\/li>\n<li>Supprimer tous les chargements de plugin de votre GruntFile<\/li>\n<li>Ajouter cette ligne en haut de votre \u00ab\u00a0wrapper\u00a0\u00bb\u00a0: \u00ab\u00a0require(&#8216;load-grunt-tasks&#8217;)(grunt);\u00a0\u00bb<\/li>\n<\/ul>\n<p>Vous devriez avoir un fichier ressemblant \u00e0 \u00e7a\u00a0:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Gruntfile.js\r\nmodule.exports = function (grunt) {\r\n \/\/ load all grunt tasks matching the `grunt-*` pattern\r\n require('load-grunt-tasks')(grunt);\r\n\r\n grunt.initConfig({});\r\n}\r\n<\/pre>\n<p><span style=\"color: #0070d5;\"><strong>La personnalisation de taches\u00a0:<\/strong><\/span><\/p>\n<p>Il est possible de configurer Grunt pour lancer des t\u00e2ches par d\u00e9faut en d\u00e9finissant une t\u00e2che par d\u00e9faut.<\/p>\n<p>Dans l\u2019exemple ci-dessous, lancer Grunt sans lui indiquer de t\u00e2che pr\u00e9cise va lancer les t\u00e2ches par d\u00e9faut, ici \u00ab\u00a0uglify\u00a0\u00bb\u00a0:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Default task(s).\r\ngrunt.registerTask('default', ['uglify']);\r\n<\/pre>\n<p>Cela revient au m\u00eame que de lancer \u201cgrunt uglify\u201d en ligne de commande.<\/p>\n<p>Il est ainsi possible de d\u00e9finir plusieurs t\u00e2ches lanc\u00e9es par d\u00e9faut au lancement de grunt via la commande \u00ab\u00a0grunt\u00a0\u00bb.<\/p>\n<p>Si le projet n\u00e9cessite des t\u00e2ches n\u2019existant pas dans les plugins Grunt, il est \u00e9galement possible de les d\u00e9finir directement dans le Gruntfile.<\/p>\n<p>Pour cela il faut utiliser la ligne suivante\u00a0:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\ngrunt.registerTask(, , function() {\r\n \/\/ actions \u00e0 effectuer\r\n });\r\n<\/pre>\n<p>Par exemple\u00a0, le GruntFile suivant d\u00e9fini une t\u00e2che personnalis\u00e9e qui indiquera les commandes disponibles\u00a0:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\ngrunt.registerTask('help', 'List all available commands', function() {\r\n grunt.log.ok('');\r\n grunt.log.ok('Here are all available commands :');\r\n grunt.log.ok('');\r\n grunt.log.ok('\\'grunt uglify\\' : minify a source file ');\r\n});\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Pour plus d\u2019informations et de fonctionnalit\u00e9s, n\u2019h\u00e9sitez pas \u00e0 visiter le site de Grunt : <a href=\"http:\/\/gruntjs.com\/\">http:\/\/gruntjs.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Non &#8220;Grunt&#8221; n&#8217;est pas juste un cri de b\u00eate f\u00e9roce ! En d\u00e9veloppement d&#8217;applications, moins vous avez de travail \u00e0 faire lors de l&#8217;ex\u00e9cution des t\u00e2ches r\u00e9p\u00e9titives comme la &#8220;minification&#8221;, la compilation, les tests unitaires, etc, et plus votre travail devient facile. Et Grunt s&#8217;occupe justement de toutes ces t\u00e2ches. On va donc voir comment &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/lalloue.fr\/blog\/grunt-installation-et-utilisation\/\" class=\"more-link\">Continuer la lecture <span class=\"screen-reader-text\"> \u00ab\u00a0Grunt : Installation et utilisation\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[11],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/62"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":24,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":261,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/62\/revisions\/261"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}