Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
code:javascript:outils:gulp [27/02/2016 18:38]
elisabeth [Recharge automatique de la page avec gulp-livereload]
code:javascript:outils:gulp [15/06/2018 22:22] (Version actuelle)
Ligne 1: Ligne 1:
-{{htmlmetatags>​metatag-robots:(index) metatag-author:(Elisabeth Pointal) metatag-keywords:(javascript,​gulp,​ task) metatag-description:(Tuto Gulp)}}+{{htmlmetatags>​metatag-robots=(index) metatag-author=(Elisabeth Pointal) metatag-keywords=(javascript,​gulp,​ task) metatag-description=(Installation et utilisation ​Gulp)}}
 ====== Gulp ====== ====== Gulp ======
  
Ligne 9: Ligne 9:
   - Installer **nodejs** qui inclut **npm**. Il existe un installer windows à l'​adresse https://​nodejs.org/​en/​ donc c'est très simple!   - Installer **nodejs** qui inclut **npm**. Il existe un installer windows à l'​adresse https://​nodejs.org/​en/​ donc c'est très simple!
   - Installer **gulp** en global pour l'​avoir en ligne de commande ​ <​code>​npm install --global gulp-cli</​code> ​   - Installer **gulp** en global pour l'​avoir en ligne de commande ​ <​code>​npm install --global gulp-cli</​code> ​
-  - Installer **gulp** dans le répertoire de mon projet et l'​enregistrer dans les dépendances de mon projet <​code>​npm install --save-dev gulp</​code>​ On trouve alors le répertoire ''​gulp''​ dans le répertoire ''​node_modules''​. Et dans le fichier ''​package.json''​ a été ajouté la dépendance à ''​gulp'':​ <code>+  - Installer **gulp** dans le répertoire de mon projet et l'​enregistrer dans les dépendances de mon projet <​code>​npm install --save-dev gulp</​code>​ On trouve alors le répertoire ''​gulp''​ dans le répertoire ''​node_modules''​. Et dans le fichier ''​package.json''​ a été ajouté la dépendance à ''​gulp'':​ <sxh javascript; first-line:​1 title: package.json>
 { {
   "​name":​ "​elisabeth",​   "​name":​ "​elisabeth",​
Ligne 27: Ligne 27:
     "​gulp":​ "​^3.9.1"​     "​gulp":​ "​^3.9.1"​
   }   }
-}</code+}</sxh
-  - Créer un fichier ''​gulpfile.js''​ à la racine de mon projet avec une tache ''​default''​. <code>+  - Créer un fichier ''​gulpfile.js''​ à la racine de mon projet avec une tache ''​default''​. <sxh javascript; first-line:​1 title: gulpfile.js>
 var gulp = require('​gulp'​);​ var gulp = require('​gulp'​);​
  
Ligne 34: Ligne 34:
   console.log("​Ne fait rien"​);​   console.log("​Ne fait rien"​);​
 }); });
-</code+</sxh
   - Lancer un ''​gulp''​ en  commande en ligne, pour lancer la tache\\ {{:​code:​javascript:​outils:​gulp-default.png?​500|}}   - Lancer un ''​gulp''​ en  commande en ligne, pour lancer la tache\\ {{:​code:​javascript:​outils:​gulp-default.png?​500|}}
  
Ligne 46: Ligne 46:
  
 ==== Edition du fichier gulpfile.js ==== ==== Edition du fichier gulpfile.js ====
-<code javascript>​ +<sxh javascript; first-line:​1 title: gulpfile.js
-var gulp = require('gulp');+var gulp = require("gulp");
 //​j'​ajoute minify //​j'​ajoute minify
-var minify = require('gulp-minify');+var minify = require("gulp-minify");
  
  
-gulp.task('default', function() {+gulp.task("default", function() {
   console.log("​Ne fait rien"​);​   console.log("​Ne fait rien"​);​
 }); });
  
 //ajout d'une tache //ajout d'une tache
-gulp.task('compress',​function(){+gulp.task("compress",​function(){
     //fichier src     //fichier src
-    gulp.src('src/main.js')+    gulp.src("src/main.js")
     //tache     //tache
     .pipe(minify())     .pipe(minify())
     //​destination     //​destination
-    .pipe(gulp.dest('dist'))+    .pipe(gulp.dest("dist"))
 }); });
  
-</code>+</sxh>
  
 ==== Utilisation ==== ==== Utilisation ====
Ligne 76: Ligne 76:
 ==== Automatisation avec gulp.watch ==== ==== Automatisation avec gulp.watch ====
 Avec la méthode ''​watch'',​ on peut surveiller les modifications dans les fichiers, et lancer alors les taches souhaitées à chaque modification. Avec la méthode ''​watch'',​ on peut surveiller les modifications dans les fichiers, et lancer alors les taches souhaitées à chaque modification.
-<code javascript>​ +<sxh javascript; first-line: 23;  title: gulpfile.js
-gulp.task('watch', function(){+gulp.task("watch", function(){
     //exécuter la tache "​compress"​ à chaque modification de src/main.js     //exécuter la tache "​compress"​ à chaque modification de src/main.js
-    gulp.watch('src/main.js',​["​compress"​]);​+    gulp.watch("src/main.js",​["​compress"​]);​
 }) })
-</code>+</sxh>
 On n'a plus qu'à lancer ''​watch'',​ pour qu'à chaque modification de mon fichier ''​main.js'',​ il me le recompresse dans ''​main-min.js'':​\\ On n'a plus qu'à lancer ''​watch'',​ pour qu'à chaque modification de mon fichier ''​main.js'',​ il me le recompresse dans ''​main-min.js'':​\\
 {{:​code:​javascript:​outils:​gulp-watch.png?​450|}} {{:​code:​javascript:​outils:​gulp-watch.png?​450|}}