| Les deux révisions précédentesRévision précédente | |
| issue93:command_conquer [2015/03/18 23:41] – andre_domenech | issue93:command_conquer [2015/03/19 11:55] (Version actuelle) – auntiee |
|---|
| ** | ** |
| |
| Dans le numéro 87, je vous ai présenté Node.JS et le lanceur de tâches « Grunt ». J'ai récemment découvert une alternative appelée Gulp, qui m'attire un peu plus (je vous en parlerai bientôt). Vers la même époque, un lecteur m'a demandé si je pouvais parler de Gulp dans C&C. Alors voilà. | Dans le numéro 87, je vous ai présenté Node.JS et le lanceur de tâches « Grunt ». J'ai récemment découvert une alternative appelée Gulp, qui m'attire un peu plus (je vous en donnerai les raisons bientôt). Vers la même époque, un lecteur m'a demandé si je pouvais parler de Gulp dans C&C. Alors voilà. |
| |
| Quelle est la différence ? | Quelle est la différence ? |
| |
| La différence entre Gulp et Grunt est principalement dans leur approche de la gestion des tâches. Grunt se concentre sur un système basé sur la configuration où vous définissez les configurations de chaque tâche (fichiers, compression, plugin à utiliser, etc). Alors que Gulp se concentre sur un flux de travail continu : ça signifie un plugin pour une tâche (pas de chevauchement), et relève plus de la programmation que de la configuration. Cela signifie que les tâches Gulp ressemblent plus à une fonction JavaScript qui utilise une série de fonctions de rappel à chaque étape de configuration. Il peut être plus facile de voir la différence en décrivant simplement comment fonctionne Gulp. Si vous souhaitez une présentation sur les différences, consultez le paragraphe « pour aller plus loin ». | La différence entre Gulp et Grunt est principalement dans leur approche de la gestion des tâches. Grunt se concentre sur un système basé sur la configuration où vous définissez les configurations de chaque tâche (fichiers, compression, greffon à utiliser, etc.). Alors que Gulp se concentre sur un flux de travail continu : cela signifie un greffon par tâche (pas de chevauchement) et relève plus de la programmation que de la configuration. Cela signifie que les tâches Gulp ressemblent plus à une fonction JavaScript qui utilise une série de fonctions de rappel à chaque étape de configuration. Il peut être plus facile d'appréhender la différence si je décris le fonctionnement de Gulp. Si vous souhaitez une présentation sur les différences, consultez la section « pour aller plus loin ». |
| |
| Référentiel d'Exemples | Référentiel d'exemple |
| |
| Le référentiel peut être trouvé sur GitHub : https://github.com/lswest/FCM93-Gulp-Example. | Le référentiel peut être trouvé sur GitHub : https://github.com/lswest/FCM93-Gulp-Example. |
| Gulpfile.js | Gulpfile.js |
| |
| C'est le fichier qui crée et organise les tâches que Gulp est censé lancer. Les sept premières lignes du fichier (la var name = require(‘name’);) initialisent tout simplement les différents paquets Node.js dont vous avez besoin. Celles-ci doivent avoir été installées avec npm d'abord : si vous avez votre fichier package.json, lancer simplement installation de NPM sera suffisant. | C'est le fichier qui crée et organise les tâches que Gulp est censé lancer. Les sept premières lignes du fichier (la var name = require(‘name’);) initialisent tout simplement les différents paquets Node.js dont vous avez besoin. Celles-ci doivent avoir été installées auparavant avec npm : si vous avez le fichier package.json, l'exécution de npm install sera suffisant. |
| |
| La raison pour laquelle vous placez les extensions dans des variables est de rendre plus facile la façon de les appeler, et la raison pour laquelle elles sont obligatoires est de permettre l'utilisation de paquets de npm comme Stylus à partir de Gulp. | La raison pour laquelle vous placez les extensions dans des variables est de rendre plus facile leur appel, et la raison pour laquelle elles sont obligatoires est de permettre l'utilisation de paquets de npm comme Stylus à partir de Gulp. |
| |
| Dans le fichier d'exemple, je crée alors deux tâches. La tâche 'app' commence sur la ligne 9 et va jusqu'à la ligne 21. La tâche « uglify » (enlaidir) est sur les lignes 23-28. Les noms des tâches sont à votre libre choix. | Dans le fichier d'exemple, je crée alors deux tâches. La tâche 'app' commence sur la ligne 9 et va jusqu'à la ligne 21. La tâche « uglify » (enlaidir) est sur les lignes 23-28. Le nom des tâches est à votre libre choix. |
| |
| ** | ** |
| ** | ** |
| |
| La tâche 'app' | La tâche « app » |
| |
| Cette tâche est faite pour compiler des fichiers préprocesseur CSS en CSS : je l'utilise pour stylus, mais la même idée s'applique à SASS et Less (si vous avez les bons paquets installés). | Cette tâche est censée compiler des fichiers préprocesseur CSS en CSS : je l'utilise pour stylus, mais la même idée s'applique à SASS et Less (si vous avez les bons paquets installés). |
| |
| La tâche commence par lancer d'abord gulp.src, qui lui indique où trouver le(s) fichier(s) de stylus. Il devrait être possible de concaténer ou d'utiliser une expression *.styl pour ouvrir tous les fichiers stylus. Comme, cependant, la meilleure pratique consiste à réduire le nombre de fichiers css qu'un site doit appeler, c'est mieux d'utiliser un seul fichier stylus pour compiler. Utilisez la fonction @import pour inclure d'autres fichiers stylus, de sorte qu'il n'y ait qu'un seul fichier CSS résultant. | La tâche commence par lancer d'abord gulp.src, qui lui indique où trouver le(s) fichier(s) de stylus. Il devrait être possible de concaténer ou d'utiliser une expression *.styl pour ouvrir tous les fichiers stylus. Comme, cependant, la meilleure pratique consiste à réduire le nombre de fichiers css qu'un site doit appeler, c'est mieux d'utiliser un seul fichier stylus pour compiler. Utilisez la fonction @import pour inclure d'autres fichiers stylus, de sorte qu'il n'y ait qu'un seul fichier CSS résultant. |
| |
| Ensuite, il y a une fonction de mise en chaîne appelée sur le .src, où la fonction stylus est appelée avec une petite liste de paramètres. L'utilisation des paramètres indique quel plugins stylus appeler (dans mon cas, j'utilise seulement Jeet pour le Framework Jeet). Compress, comme vous pouvez l'imaginer, contrôle le réglage de la compression des fichiers (rapetissant le CSS). Le tableau sourcemap contrôle quelques paramètres pour créer aussi un fichier de cartographie des sources, afin que l'inspecteur du navigateur vous donne les numéros deligne correspondant au fichier d'origine de stylus, par opposition à référencer le fichier CSS miniaturisé. C'est utile pour le développement, mais peut être laissé de côté si vous préférez. | Ensuite, il y a une fonction de mise en chaîne appelée sur le .src, où la fonction stylus est appelée avec une petite liste de paramètres. L'utilisation des paramètres indique quels greffons stylus appeler (dans mon cas, j'utilise seulement Jeet pour le Framework Jeet). Compress, comme vous pouvez l'imaginer, contrôle le réglage de la compression des fichiers (rapetissant le CSS). Le tableau sourcemap contrôle quelques paramètres pour créer aussi un fichier de cartographie des sources, afin que l'inspecteur du navigateur vous donne les numéros de ligne correspondant au fichier d'origine de stylus, par opposition à référencer le fichier CSS miniaturisé. C'est utile pour le développement, mais peut être laissé de côté si vous préférez. |
| |
| Enfin pour finir en beauté, .pipe(gulp.dest('./css/')); définit le dossier de destination pour les fichiers créés. | Enfin, pour finir en beauté, .pipe(gulp.dest('./css/')); définit le dossier de destination pour les fichiers créés. |
| |
| Espérons maintenant que le terme « à base de flux » fait un peu plus de sens. Chaque appel de fonction a un but, et elle est mise en file une étape à la fois (dans un flux), jusqu'à ce que vous ayez votre résultat final. | Espérons maintenant que le terme « à base de flux » fait un peu plus de sens. Chaque appel de fonction a un but, et elle est mise en file une étape à la fois (dans un flux), jusqu'à ce que vous ayez votre résultat final. |
| La tâche « uglify » | La tâche « uglify » |
| |
| L'idée derrière cette tâche est de concaténer tous les fichiers JavaScript, puis rapetisser le résultat. Cela les rend beaucoup moins lisibles, mais réduit la taille du fichier et le nombre de fichiers externes qu'un site Web doit utiliser. D'où le terme « enlaidir ». | L'idée derrière cette tâche est de concaténer tous les fichiers JavaScript, puis rapetisser le résultat. Cela les rend beaucoup moins lisibles pour un être humain, mais réduit la taille du fichier et le nombre de fichiers externes qu'un site Web doit utiliser. D'où le terme « enlaidir ». |
| |
| Cette tâche commence aussi avec un appel de fonction à gulp.src (qui sélectionne tous les fichiers js dans le dossier «js»). | Cette tâche commence aussi avec un appel de fonction à gulp.src (qui sélectionne tous les fichiers js dans le dossier « js »). |
| |
| Après cela, elle appelle trois fonctions en chaîne. La première concatène (combine) tous les fichiers js, puis lance la fonction uglify (rapetissant le javascript fusionné résultant). La dernière étape, comme toujours, est un appel de fonction dest, pour définir la destination du fichier résultant. | Après cela, elle appelle trois fonctions en chaîne. La première concatène (combine) tous les fichiers js, puis lance la fonction uglify (rapetissant le javascript fusionné résultant). La dernière étape, comme toujours, est un appel de fonction dest, pour définir la destination du fichier résultant. |
| Lors de la définition des tâches dont nous avons besoin, la dernière ligne crée une dernière tâche, que j'ai appelé « default » qui lance les deux autres fonctions lorsqu'elle est appelée. De cette façon, au lieu d'appeler les tâches séparément, elle remplit effectivement l'ensemble du processus d'un seul coup. La tâche est appelée « default » parce que c'est la fonction automatique appelé par Gulp. | Lors de la définition des tâches dont nous avons besoin, la dernière ligne crée une dernière tâche, que j'ai appelé « default » qui lance les deux autres fonctions lorsqu'elle est appelée. De cette façon, au lieu d'appeler les tâches séparément, elle remplit effectivement l'ensemble du processus d'un seul coup. La tâche est appelée « default » parce que c'est la fonction automatique appelé par Gulp. |
| |
| Le résultat final sera deux nouveaux fichiers : un fichier CSS miniaturisé, et un fichier javascript miniaturisé. Incluez-les dans votre en-tête HTML, et vous êtes prêt. | Le résultat final sera deux nouveaux fichiers : un fichier CSS miniaturisé, et un fichier javascript miniaturisé. Incluez-les dans votre en-tête HTML, et tout est prêt. |
| |
| J'espère que cet article a contribué à rendre attirant Gulp pour toute personne qui a été intimidée par Grunt dans le passé. Il y a plusieurs articles sur la façon d'utiliser Gulp pour d'autres tâches typiques (telles que l'utiliser pour SASS). Comme la syntaxe est (à mon avis) plus facile à lire que Grunt, si vous avez une expérience avec JavaScript, ça devrait s'avérer plus facile à utiliser pour les débutants. Certains pensent que les lanceurs de tâches sont trop ballonnés pour ce qu'il doivent faire. Mais, la facilité d'utilisation pour certains cas (surtout pour ceux qui débutent) devrait l'emporter sur le compromis. Pour ceux qui veulent utiliser npm et réduire le ballonnement, vous pouvez simplement installer les paquets de base (comme stylus). Pour automatiser les choses, vous pouvez aussi créer un fichier make ou un script pour exécuter les commandes. Je laisse cela comme un exercice aux utilisateurs. Si vous utilisez un framework web, ils ont généralement eux-mêmes des moyens d'exécution des appels de fonction. | J'espère que cet article a contribué à rendre attirant Gulp pour toute personne qui a été intimidée par Grunt dans le passé. Il y a divers articles sur la façon d'utiliser Gulp pour d'autres tâches typiques (telles que l'utiliser pour SASS). Comme la syntaxe est (à mon avis) plus facile à lire que Grunt, si vous avez une expérience avec JavaScript, ça devrait s'avérer plus facile à utiliser pour les débutants. Certains pensent que les lanceurs de tâches sont trop ballonnés pour ce qu'ils doivent faire. Mais, la facilité d'utilisation pour certains cas (surtout pour ceux qui débutent) devrait l'emporter sur les compromis. Pour ceux qui veulent utiliser npm et réduire le ballonnement, vous pouvez simplement installer les paquets de base (comme stylus). Pour automatiser les choses, vous pouvez aussi créer un fichier make ou un script pour exécuter les commandes. Je laisse cela comme un exercice aux utilisateurs. Si vous utilisez un framework Web, ils ont eux-mêmes généralement des moyens d'exécuter des appels de fonction. |
| |
| Si quelqu'un a des questions, des suggestions, ou des demandes, n'hésitez pas à m'envoyer un e-mail à lswest34+fcm@gmail.com. | Si quelqu'un a des questions, des suggestions, ou des demandes, n'hésitez pas à m'envoyer un e-mail à lswest34+fcm@gmail.com. |
| http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/ - Présentation des différences entre Gulp et Grunt. | http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/ - Présentation des différences entre Gulp et Grunt. |
| |
| site web de Gulp : http://gulpjs.com/ | site Web de Gulp : http://gulpjs.com/ |
| |
