Outils pour utilisateurs

Outils du site


issue87:command_conquer

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édentesRévision précédente
Prochaine révision
Révision précédente
issue87:command_conquer [2015/01/10 17:22] – [1] auntieeissue87:command_conquer [2015/01/10 17:49] (Version actuelle) – [10] auntiee
Ligne 20: Ligne 20:
 Grunt - “The JavaScript Task Runner” - this is essentially a file and folder watcher, that executes user-defined commands when something changes. I typically use it only for compiling SASS into CSS files, but it could do much more.** Grunt - “The JavaScript Task Runner” - this is essentially a file and folder watcher, that executes user-defined commands when something changes. I typically use it only for compiling SASS into CSS files, but it could do much more.**
  
-Node.js - « c'est une plateforme basée sur l'exécution du JavaScript de Chrome pour construire facilement des applications en réseau rapides et évolutives » (leur site Web). C'est essentiellement une plateforme pour exécuter des programmes JavaScript sans exiger quelque chose comme Apache (ou, au moins, c'est ainsi que je la décris).+Node.js - « c'est une plateforme basée sur l'exécution du JavaScript de Chrome pour construire facilement des applications en réseaurapides et évolutives » (leur site Web). C'est essentiellement une plateforme pour exécuter des programmes JavaScript sans exiger quelque chose comme Apache (ou, du moins, c'est ainsi que je la décrirais).
  
 NPM - « Node Packaged Modules » (essentiellement un dépôt pour les applications Node). NPM - « Node Packaged Modules » (essentiellement un dépôt pour les applications Node).
Ligne 42: Ligne 42:
 sudo ln -s /usr/bin/nodejs /usr/bin/node** sudo ln -s /usr/bin/nodejs /usr/bin/node**
  
-Pré-requis (testés avec 14.04)+Pré-requis (testés avec la 14.04)
  
 Installer Node.js et NPM : Installer Node.js et NPM :
Ligne 116: Ligne 116:
 Le format des dossiers est alors : app/assets/css, app/assets/src/scss, app/assets/src/js. Tous les autres dossiers peuvent être assez facilement lus à partir du Gruntfile (ou ajoutés). Le format des dossiers est alors : app/assets/css, app/assets/src/scss, app/assets/src/js. Tous les autres dossiers peuvent être assez facilement lus à partir du Gruntfile (ou ajoutés).
  
-La façon dont le Gruntfile fonctionne est que vous définissez des objets pour différentes sections de votre projet - par exemple l'objet projet contient les chemins d'accès à chaque section de votre dossier d'application (et ils peuvent être référencés par project.app, par exemple). La bannière est généralement utilisée pour créer ces en-têtes commentés dans les projets open source - où l'auteur, le projet et la licence sont répertoriés. Ceux-ci sont tirés du fichier package.json (stocké dans le pkg de l'objet). Si l'information n'existe pas, elle sera tout simplement laissée vide. En l'occurrence, la bannière dans ce fichier contient toutes les informations qu'un projet complet aurait habituellement, même si cela fonctionnerait très bien avec moins d'informations ; ainsi, j'ai un seul fichier pour tout type de projet.+La façon dont le Gruntfile fonctionne est que vous définissez des objets pour différentes sections de votre projet - par exemple l'objet projet contient les chemins d'accès à chaque section de votre dossier d'application (et ils peuvent être référencés par project.app, par exemple). La bannière est généralement utilisée pour créer les en-têtes commentés dans les projets open source - où l'auteur, le projet et la licence sont répertoriés. Ceux-ci sont tirés du fichier package.json (stocké dans le pkg de l'objet). Si l'information n'existe pas, elle sera tout simplement laissée vide. En l'occurrence, la bannière dans ce fichier contient toutes les informations qu'un projet complet aurait habituellement, même si cela fonctionnerait très bien avec moins d'informations ; ainsi, j'ai un seul fichier pour tout type de projet.
  
 ====== 7 ====== ====== 7 ======
Ligne 124: Ligne 124:
 You can also define an uglify object using grunt-contrib-uglify to minify JavaScript files. More information can be found here: https://github.com/gruntjs/grunt-contrib-uglify** You can also define an uglify object using grunt-contrib-uglify to minify JavaScript files. More information can be found here: https://github.com/gruntjs/grunt-contrib-uglify**
  
-La section saas est relativement standardelle indique où iront les fichiers CSS, qu'on utilise le style élargi en cours de développement (cela signifie que le fichier n'est pas « minifié » et que tous les sauts de ligne et espacements sont intacts). Le dist (pour distribution) utilise le style compressé. Compass est activé dans les deux cas (Compass est un environnement de création de CSS). Vous pouvez le laisser désactivé et éviter l'installation de ruby-compass au début de ce fichier. Cependant, vous pourriez peut-être rencontrer des erreurs.+La section saas est relativement standard elle indique où iront les fichiers CSS, que, en cours de développement, on utilise le style élargi (cela signifie que le fichier n'est pas « minifié » et que tous les sauts de ligne et espacements sont intacts). La dist (pour distribution) utilise le style compressé. Compass est activé dans les deux cas (Compass est un environnement de création de CSS). Vous pouvez le laisser désactivé et éviter l'installation de ruby-compass au début de ce fichier. Cependant, vous pourriez rencontrer des erreurs à la longue.
  
 Vous pouvez également définir un objet « uglify » en utilisant grunt-contrib-uglify pour rapetisser les fichiers JavaScript. Vous trouverez plus d'informations ici : https://github.com/gruntjs/grunt-contrib-uglify Vous pouvez également définir un objet « uglify » en utilisant grunt-contrib-uglify pour rapetisser les fichiers JavaScript. Vous trouverez plus d'informations ici : https://github.com/gruntjs/grunt-contrib-uglify
Ligne 144: Ligne 144:
 Run: grunt** Run: grunt**
  
-Comme le Gruntfile par défaut exécute sass:dev (avec les styles étendus), vous pouvez exécuter sass:dist vous-même avec la commande suivante :+Puisque le Gruntfile par défaut exécute sass:dev (avec les styles étendus), vous pouvez exécuter sass:dist vous-même avec la commande suivante :
  
 grunt sass:dist grunt sass:dist
Ligne 178: Ligne 178:
 Il est ensuite compilé en css normal, comme on le voit dans ce fichier : http://pastebin.com/ruUSfVKs Il est ensuite compilé en css normal, comme on le voit dans ce fichier : http://pastebin.com/ruUSfVKs
  
-Vous pourrez remarquer qu'il a même converti les valeurs hexa spécifiées pour les couleurs en mots-clés CSS « black » et « white », et que le « mixin » a créé toutes les lignes de code pour tous les navigateurs en utilisant les valeurs et le format corrects. Cela signifie que, si vous avez besoin d'utiliser différents gradients, cela réduit l'obligation de vous répéter.+Vous pourrez remarquer qu'il a même converti les valeurs hexa spécifiées pour les couleurs en mots-clés CSS « black » et « white », et que le « mixin » a créé toutes les lignes de code pour tous les navigateurs en utilisant les valeurs et le format corrects. Cela signifie que, si vous avez besoin d'utiliser différents gradients, moins de répétitions seront nécessaires.
  
 ====== 10 ====== ====== 10 ======
Ligne 194: Ligne 194:
 Hopefully this article has piqued your interest in SASS. If there is any interest in another article on SASS specifically, feel free to email me at lswest34+fcm@gmail.com. If you have any questions, corrections, or requests, you are also more than welcome to send me a quick email.** Hopefully this article has piqued your interest in SASS. If there is any interest in another article on SASS specifically, feel free to email me at lswest34+fcm@gmail.com. If you have any questions, corrections, or requests, you are also more than welcome to send me a quick email.**
  
-Cela illustre ce qu'est un « mixin » (linear-gradient), comment l'utiliser (@include), et la définition de variables dans SASS. Ainsi qu'un sélecteur normal du body. Vous pouvez également imbriquer des articles dans le body, ou définir différentes versions de celui-ci, tel que : hover.+Cela illustre ce qu'est un « mixin » (linear-gradient), comment l'utiliser (@include), et la définition de variables dans SASS. Ainsi qu'un sélecteur normal du body. Vous pouvez également imbriquer des articles dans le body, ou définir différentes versions de celui-ci, tel que :hover.
  
 body { body {
issue87/command_conquer.1420906924.txt.gz · Dernière modification : 2015/01/10 17:22 de auntiee