{"id":9438,"date":"2015-10-16T20:53:27","date_gmt":"2015-10-17T00:53:27","guid":{"rendered":"http:\/\/www.analystik.ca\/blogue\/?p=9438"},"modified":"2017-05-26T11:41:06","modified_gmt":"2017-05-26T15:41:06","slug":"gulp-sur-mac-window-linux","status":"publish","type":"post","link":"https:\/\/analystik.ca\/blogue\/language\/fr\/gulp-sur-mac-window-linux\/","title":{"rendered":"Comment utiliser Gulp sur Mac, Windows, Linux"},"content":{"rendered":"<p>Gulp est un syst\u00e8me de gestion\u00a0de t\u00e2ches. Il sert \u00e0\u00a0par exemple: transformer votre Sass (ou Less) en css, minifier, utiliser\u00a0autoprefixer, joindre des fichiers en 1 seul, v\u00e9rifier vos JavaScript avec jsLint et j&rsquo;en passe.\u00a0Si\u00a0vous codez le moindrement c&rsquo;est pratique. C&rsquo;est devenu\u00a0un de mes outils indispensables et en plus c&rsquo;est totalement gratuit. Il faut juste mettre un peu les mains \u00e0 la p\u00e2te et vous serez conquis. C&rsquo;est simple \u00e0 installer, \u00e0 utiliser et c&rsquo;est rapide. Mais il ne faut pas avoir peur de terminal ou cmd ou autre&#8230;<\/p>\n<p><!--more--><\/p>\n<h2><strong>GRUNT?<\/strong><\/h2>\n<p>Les deux font les m\u00eames t\u00e2ches, mais pas de la m\u00eame mani\u00e8re. Gulp est plus jeune et compense pour certaines lenteurs de Grunt, mais il y a moins de plug-ins (juste 1894).<\/p>\n<p>Grunt est mieux implant\u00e9\u00a0 dans la communaut\u00e9. Il a plus de plug-ins, mais il est plus lent dans son fonctionnement. Si vous aimez tout configurer, Grunt est fait pour vous.<\/p>\n<p>Grunt apr\u00e8s chaque \u00abt\u00e2che\u00bb doit \u00e9crire le fichier m\u00eame si la prochaine t\u00e2che travaille avec le m\u00eame fichier.<\/p>\n<p>Par exemple: on transforme un fichier scss en css et on le \u00a0\u00abminify\u00bb par la suite.<\/p>\n<h4>Gulp va:<\/h4>\n<ol>\n<li>Ouvrir le fichier<\/li>\n<li>Le transformer en css<\/li>\n<li>Le minifier<\/li>\n<li>Le sauvegarder \u00e0 la destination souhait\u00e9e<\/li>\n<\/ol>\n<h4>Grunt va:<\/h4>\n<ol>\n<li>Ouvrir le fichier<\/li>\n<li>Le transformer en css<\/li>\n<li><em>Sauvegarder le fichier temporaire<\/em><\/li>\n<li><em>Ouvrir le fichier temporaire<\/em><\/li>\n<li>Le minifier<\/li>\n<li><em>Sauvegarder le ficher temporaire<\/em><\/li>\n<li><em>Ouvrir le fichier temporaire<\/em><\/li>\n<li>Le sauvegarder \u00e0 la destination souhait\u00e9e<\/li>\n<li><em>Effacer le fichier temporaire<\/em><\/li>\n<\/ol>\n<h2><strong>Comment on l&rsquo;installe:<\/strong><\/h2>\n<p>Il faut premi\u00e8rement installer <a href=\"http:\/\/www.nodjs.org\">node.js<\/a>. Il y a une version pour Windows,\u00a0Mac et\u00a0Linux. Il faut absolument installer, en m\u00eame temps que node, le NPM. Pour v\u00e9rifier si tout est bien install\u00e9, vous avez juste \u00e0 taper dans cmd ou terminal:<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 lang:default decode:true\">npm -v<\/pre>\n<p>Si vous recevez une s\u00e9rie de chiffres, c&rsquo;est bon. Sinon il faut l&rsquo;installer de nouveau.<\/p>\n<p>La premi\u00e8re \u00e9tape est d&rsquo;installer Gulp\u00a0globalement (dans tout le tutoriel, s&rsquo;il y a des \u00ab\u00a0<em>sudo<\/em>\u00a0\u00bb ne les tapez pas si vous \u00eates sur Windows. Sur Linux ou Mac, on vous demandera de taper votre password. Ce dernier ne s&rsquo;affichera pas.)<\/p>\n<pre class=\"lang:default decode:true\">sudo npm install gulp -g<\/pre>\n<p>Par la suite il faut se d\u00e9placer dans le dossier de votre projet (toujours dans terminal ou cmd). L\u00e0 on tape:<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 lang:default decode:true\">npm init\r\n<\/pre>\n<p>Il vous demandera le nom de votre projet. Tapez-le sans espace ou caract\u00e8res sp\u00e9ciaux. Il pose d&rsquo;autres questions. C&rsquo;est \u00e0 vous de les entrer ou appuyer sur la touche \u00abenter\u00bb \u00e0 chaque question. \u00c0 la fin, r\u00e9pondez par l&rsquo;affirmative un fichier package.json a \u00e9t\u00e9 cr\u00e9\u00e9 dans le r\u00e9pertoire de votre dossier.<\/p>\n<p>Par la suite, commencez l\u2019installation de gulp et de certains plug-ins&#8230; Il y aura des messages de confirmation\u00a0entre les diff\u00e9rentes installations, mais pour rendre cela plus lisible\u00a0je ne les marquerai pas. Aussi, dans cet exemple, je cr\u00e9e des t\u00e2ches\u00a0pour transformer du scss en css. Choisissez vos plug-ins sur <a href=\"http:\/\/www.npmjs.com\">npmjs.com<\/a> en tapant gulp avec ce que vous voulez faire.<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 lang:default decode:true\">npm install gulp --save-dev\r\nnpm install gulp-sass@2.1.0-beta --save-dev\r\nnpm install gulp-autoprefixer --save-dev\r\nnpm install gulp-minify-css<\/pre>\n<p>Vous pouvez laisser le terminal de c\u00f4t\u00e9 et entrer dans votre \u00e9diteur de texte pr\u00e9f\u00e9r\u00e9.<\/p>\n<h2><strong>Le fichier gulpfile.js <\/strong><\/h2>\n<p>Ce fichier est en JavaScript et il est relativement simple \u00e0 configurer.\u00a0Il fera le lien entre votre installation et vos t\u00e2ches.\u00a0\u00a0Dans mon site web, mon arborescence est comme ci-bas:<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 lang:default decode:true\">index.html\r\n|node_modules\r\n|- css\r\n|- sass\r\n   |- style.scss\r\ngulpfile.js\r\npackage.json\r\n<\/pre>\n<p>Votre installation a cr\u00e9\u00e9 un fichier package.json et un dossier node_modules qui contient \u00abplein de fichiers\u00bb<\/p>\n<p>Nous devons cr\u00e9er le fichier <em>gulpfile.js<\/em><\/p>\n<p>Votre\u00a0premi\u00e8re t\u00e2che est d&rsquo;inclure les \u00ab<em>require<\/em>\u00bb; nous cr\u00e9ons les variables n\u00e9cessaires pour nos t\u00e2ches.<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 range:1-4 decode:true\">var gulp = require('gulp');\r\nvar sass = require('gulp-sass');\r\nvar autoprefix = require('gulp-autoprefixer');\r\nvar minify = require('gulp-minify-css');<\/pre>\n<p>La premiere t\u00e2che: \u00abd<em>efault &#8211; watch<\/em>\u00bb<\/p>\n<pre class=\"\"><code>gulp.task('default', function(){\r\n\tgulp.watch('sass\/**\/*.scss', ['css']);\r\n});\r\n<\/code><\/pre>\n<p><em>Gulp.watch<\/em> v\u00e9rifie constamment les fichiers indiqu\u00e9s pour lancer une t\u00e2che. Dans cet exemple, il regarde dans le r\u00e9pertoire sass et dans ses sous-r\u00e9pertoires pour un changement dans un des fichiers scss. Apr\u00e8s, il lance la t\u00e2che \u00abcss\u00bb.<\/p>\n<pre class=\"\"><code>gulp.task('css', function(){\r\n        \/* gulp choisit un fichier a \u00e9diter *\/\r\n\tgulp.src('sass\/style.scss')\r\n                \/* lance la fonction sass *\/\r\n\t\t.pipe(sass())\r\n                \/* lance la fonction autoprefix avec ses options *\/        \r\n\t\t.pipe(autoprefix({\r\n                   browsers: ['last 2 ie versions'],\r\n                   cascade: false\r\n                   })\r\n                 )\r\n                 \/*lance la fonction minify*\/     \r\n                 .pipe(minify())\r\n       \/* \u00e9crase ou cr\u00e9e le fichier dans le dossier css*\/\r\n       .pipe(gulp.dest('css\/'))\r\n\t\r\n});\r\n<\/code><\/pre>\n<p>on ajoute simplement des <em>.pipe<\/em> avec le nom des variables cr\u00e9\u00e9es plus haut. Cela ex\u00e9cute\u00a0la fonction.<\/p>\n<p>Il ne reste plus qu&rsquo;\u00e0, dans terminal ou cmd, \u00e9crire:<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 lang:default decode:true\">gulp<\/pre>\n<p>et il va regarder les fiches scss pour des modifications.<\/p>\n<p>S\u2019il n&rsquo;y a aucune erreur, d\u00e8s qu&rsquo;une modification est apport\u00e9e et sauvegarder, un fichier style.css va \u00eatre cr\u00e9\u00e9 dans le dossier css. Sinon, il y a une erreur dans le fichier gulpfile.js.<\/p>\n<h2><strong>Le code en r\u00e9sum\u00e9:<\/strong><\/h2>\n<p>Dans terminal ou cmd:<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 lang:default decode:true \">sudo npm install gulp -g\r\n\r\n\/* dans votre r\u00e9pertoire de projet *\/\r\nnpm init\r\n\r\n\/* npm install gulp-*nom du plugin* --save-dev *\/\r\nnpm install gulp --save-dev\r\nnpm install gulp-sass@2.1.0-beta --save-dev\r\nnpm install gulp-autoprefixer --save-dev\r\nnpm install gulp-minify-css --save-dev\r\n\r\n\/* lancer gulp *\/\r\ngulp<\/pre>\n<p>Le fichier gulpfile.js:<\/p>\n<pre class=\"theme:github font:courier-new font-size:14 line-height:16 lang:default decode:true \">var gulp = require('gulp');\r\nvar sass = require('gulp-sass');\r\nvar autoprefix = require('gulp-autoprefixer');\r\nvar minify = require('gulp-minify-css');\r\n\r\ngulp.task('default', function(){\r\n\tgulp.watch('sass\/**\/*.scss', ['css']);\r\n});\r\n\r\ngulp.task('css', function(){\r\n\tgulp.src('sass\/style.scss')\r\n\t\t.pipe(sass())\r\n\t\t.pipe(autoprefix({\r\n            browsers: ['last 2 ie versions'],\r\n            cascade: false\r\n        }))\r\n       \r\n        .pipe(minify())\r\n\t\t.pipe(gulp.dest('css\/'))\r\n\t\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Gulp est un syst\u00e8me de gestion\u00a0de t\u00e2ches. Il sert \u00e0\u00a0par exemple: transformer votre Sass (ou Less) en css, minifier, utiliser\u00a0autoprefixer, joindre des fichiers en 1 seul, v\u00e9rifier vos JavaScript avec jsLint et j&rsquo;en passe.\u00a0Si\u00a0vous codez le moindrement c&rsquo;est pratique. C&rsquo;est devenu\u00a0un de mes outils indispensables et en plus c&rsquo;est totalement gratuit. Il faut juste mettre&#8230;  <a class=\"excerpt-read-more\" href=\"https:\/\/analystik.ca\/blogue\/language\/fr\/gulp-sur-mac-window-linux\/\" title=\"Read Comment utiliser Gulp sur Mac, Windows, Linux\">Read more &raquo;<\/a><!-- AddThis Advanced Settings generic via filter on wp_trim_excerpt --><!-- AddThis Share Buttons generic via filter on wp_trim_excerpt --><\/p>\n","protected":false},"author":3,"featured_media":11649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Comment utiliser Gulp sur Mac OSX, Windows, et Linux","_seopress_titles_desc":"Gulp est un syst\u00e8me de gestionnaire de t\u00e2che. Apprenez en \u00e9tape comment le configurer sur les diff\u00e9rent syst\u00e8me d'exploitation.","_seopress_robots_index":"","_seopress_analysis_target_kw":"Gulp","content-type":"","footnotes":""},"categories":[3359,3363,36,3371],"tags":[3393,3395,1239,3397,3060,1051,2732],"better_featured_image":{"id":11649,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":2000,"height":1125,"file":"2015\/10\/gulp_tutorial.jpg","sizes":{"thumbnail":{"file":"gulp_tutorial-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-150x150.jpg"},"medium":{"file":"gulp_tutorial-300x169.jpg","width":300,"height":169,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-300x169.jpg"},"medium_large":{"file":"gulp_tutorial-768x432.jpg","width":768,"height":432,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-768x432.jpg"},"large":{"file":"gulp_tutorial-1024x576.jpg","width":1024,"height":576,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-1024x576.jpg"},"bones-thumb-1920":{"file":"gulp_tutorial-1920x1125.jpg","width":1920,"height":1125,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-1920x1125.jpg"},"bones-thumb-1536":{"file":"gulp_tutorial-1536x1016.jpg","width":1536,"height":1016,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-1536x1016.jpg"},"bones-thumb-960":{"file":"gulp_tutorial-960x635.jpg","width":960,"height":635,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-960x635.jpg"},"bones-thumb-600":{"file":"gulp_tutorial-600x397.jpg","width":600,"height":397,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-600x397.jpg"},"bones-thumb-300":{"file":"gulp_tutorial-300x199.jpg","width":300,"height":199,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-300x199.jpg"},"post-thumbnail":{"file":"gulp_tutorial-125x125.jpg","width":125,"height":125,"mime-type":"image\/jpeg","source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial-125x125.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":9456,"source_url":"https:\/\/analystik.ca\/blogue\/wp-content\/uploads\/2015\/10\/gulp_tutorial.jpg"},"_links":{"self":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9438"}],"collection":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/comments?post=9438"}],"version-history":[{"count":21,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9438\/revisions"}],"predecessor-version":[{"id":11650,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/posts\/9438\/revisions\/11650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/media\/11649"}],"wp:attachment":[{"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/media?parent=9438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/categories?post=9438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/analystik.ca\/blogue\/wp-json\/wp\/v2\/tags?post=9438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}