Clarifications I received some feedback on my last article from the author of the script. As I find some of his corrections/clarifications important, here are the two main corrections (there were others that, while relevant when I was writing the article, are difficult to implement after the fact): • Where I said that the line /bin/sh set the environment for Linux, he suggested a more accurate description would be “assigning the default interpreter (here /bin/sh) in order to execute the script”. • “This pattern can also be a basic regular expression” - He pointed out to me that regular expressions are the default, and you would need the option -F in order to find a literal “.” in the PDF.

Clarifications

J'ai reçu des commentaires de la part de l'auteur du script suite à mon dernier article. Comme je trouve certaines de ses corrections/clarifications importantes, voici les deux principales corrections (il y en avait d'autres qui, bien que pertinentes quand j'écrivais l'article, sont difficiles à mettre en œuvre a posteriori) :

• Lorsque j'ai dit que la ligne /bin/sh définissait l'environnement pour Linux, il a suggéré qu'une description plus précise serait « définissait l'interpréteur par défaut (ici /bin/sh) pour exécuter le script ». • « Ce terme peut également être une expression régulière simple ». Il m'a fait remarquer que par défaut on utilise les expressions régulières, et qu'il faudrait l'option -F pour trouver un « . » littéral dans le PDF.

In recent months, I’ve dedicated a few articles to web design aspects (Node.js, npm, SASS), and now I’d like to add even more information to this. I’ve recently starting using Bower to install and manage various versions of Foundation and Twitter Bootstrap in various projects. As such, I will cover installing Bower, configuring it, and then configuring Grunt to utilize foundation (after it was installed with Bower). Why? You may ask why anyone would want to use Bower to install something like Foundation or Twitter Bootstrap - and the answer is relatively simple. It’s their supported method for installing SASS versions of their frameworks. This means you’ll receive SASS files of Foundation or Bootstrap, enabling you to enable/disable features, and minimize the overhead of your website. It also gives you an automated system for getting the newest versions.

Ces derniers mois, j'ai consacré quelques articles à des aspects de la conception Web (Node.js, npm, SASS), et maintenant j'aimerais ajouter encore plus d'informations à ce sujet. J'ai récemment commencé à utiliser Bower pour installer et gérer différentes versions de Foundation et Twitter Bootstrap dans divers projets. Aussi, je vais parler de l'installation de Bower, de sa configuration, puis de la configuration de Grunt pour utiliser Foundation (après l'avoir installé avec Bower).

Pourquoi ?

Vous pouvez vous demander pourquoi quelqu'un voudrait utiliser Bower pour installer quelque chose comme Foundation ou Twitter Bootstrap ; la réponse est relativement simple. C'est la méthode qu'ils prennent en charge pour l'installation de leurs systèmes en version SASS. Cela signifie que vous recevrez les fichiers SASS de Foundation ou Bootstrap, vous permettant d'activer/désactiver des fonctions et de minimiser le travail autour de votre site Web. Cela vous donne également un système automatisé pour obtenir les dernières versions.

Install Bower Assuming you’ve configured npm as explained in Issue #87, then you’ve done everything required to run the following command: npm install -g bower (That command may require a sudo if it fails as a normal user). Configure Bower This will result in a bower.json file (similar to the package.json file from npm). It can be done interactively, or you can simply copy a framework file and edit it. The interactive method will be run using the following command: bower init Now you’ll be expected to fill in certain information; it’s all relatively straightforward - if you have specific questions, bower’s documentation should suffice.

Installer Bower

En supposant que vous avez configuré npm comme expliqué dans le numéro 87, vous avez alors tout le nécessaire pour exécuter la commande suivante :

npm install -g bower

(Cette commande peut nécessiter un sudo si elle échoue pour l'utilisateur normal.)

Configurer Bower

Ceci créera un fichier bower.json (similaire au fichier package.json de npm). Cela peut être fait de manière interactive ou vous pouvez simplement copier un fichier type et le modifier. Pour la méthode interactive, utilisez la commande suivante :

bower init

Maintenant il faudra remplir certaines informations ; tout est relativement simple - si vous avez des questions spécifiques, la documentation bower devrait suffire.

Installing packages Once the bower.json file is created, you’re ready to install new packages. To do this, and configure the json file for it, you can use the following command: bower install <package> –save-dev You can also use –save, which will add the package to the dependencies list in the bower.json file. Since these frameworks fall under development, it makes more sense to put it in devDependencies (with –save-dev). An example: bower install foundation –save-dev This will install foundation into bower_components within your project’s folder, and add a line to your bower.json file that looks like this: “foundation”: “~5.4.5” This is the line that tells bower it needs to install foundation as of version 5.4.5, in case you need to re-configure or update the project.

Installer des paquets

Une fois le fichier bower.json créé, vous êtes prêt à installer de nouveaux paquets. Pour ce faire, et configurer le fichier json pour cela, vous pouvez utiliser la commande suivante :

bower install <paquet> –save-dev

Vous pouvez également utiliser –save, qui ajoutera le paquet à la liste des dépendances dans le fichier bower.json. Comme ces outils sont en cours de développement, il est plus logique de le mettre dans devDependencies (avec –save-dev).

Un exemple :

bower install foundation –save-dev

Cela installera Foundation dans bower_components dans le dossier de votre projet, et ajoutera une ligne à votre fichier bower.json qui ressemble à ceci :

“foundation”: “~5.4.5”

C'est la ligne qui dit à bower qu'il doit installer Foundation en version 5.4.5 au moins, au cas où vous avez besoin de reconfigurer ou mettre à jour le projet.

Using Foundation from Bower with Grunt If you followed along the last article I wrote on Grunt, this should seem pretty straightforward. What you need to do is point Grunt to the foundation folder, under bower_components. This means that you’ll need to add (or edit) the foundation line in the project object of your Gruntfile.js. It should look like this: project: { css: [ 'bower_components/foundation/scss/foundation.scss' ], js: [ 'javascripts/*.js' ] }, Assuming you also want to include the javascript from foundation, you’ll also need to add it to the js area, though generally importing the foundation.min.js file directly into your webpage should suffice. If you use lots of javascript files and want them merged, you will need to point Grunt to each of the files in turn, and configure it to merge and compress them.

Utiliser Foundation depuis Bower avec Grunt

Si vous avez suivi le dernier article que j'ai écrit sur Grunt, cela devrait sembler assez simple. Ce que vous devez faire est de faire pointer Grunt vers le dossier de Foundation, sous bower_components. Cela signifie que vous aurez besoin d'ajouter (ou modifier) la ligne « foundation » dans l'objet projet de votre fichier Gruntfile.js. Cela devrait ressembler à ceci :

project: {

css: [
  'bower_components/foundation/scss/foundation.scss'
 ],
js: [
  'javascripts/*.js'
]

},

En supposant que vous voulez également inclure le javascript de Foundation, vous aurez également besoin de l'ajouter à la zone « js », bien que, généralement, l'importation du fichier foundation.min.js directement dans votre page Web doive suffire. Si vous utilisez beaucoup de fichiers JavaScript et voulez les fusionner, vous devrez faire pointer Grunt vers chacun des fichiers tour à tour et le configurer pour les fusionner et les compresser.

And this (along with my previous articles) concludes using SASS within your web project. We have covered: Installing Node.js, npm, grunt, bower, and a framework such as Zurb Foundation. If you combine this information with my articles on setting up git repositories, you’re all set to configure your next web project in a relatively robust way - or to create a repository containing your basic setup for any and all future projects. If anyone is interested in further web design articles, please do let me know by email at lswest34+fcm@gmail.com. If you have any other suggestions or requests, feel free to email me those ideas too. Further Reading http://bower.io/ - Bower website containing documentation. http://foundation.zurb.com/ - Zurb Foundation website, containing information on using the Foundation framework.

Et cela (avec mes précédents articles) conclut l'utilisation de SASS pour votre projet Web. Nous avons couvert : l'installation de Node.js, npm, grunt, bower, et un environnement tel que Zurb Foundation. Si vous combinez cette information avec mes articles sur la configuration de dépôts git, vous êtes prêts pour configurer votre prochain projet Web d'une manière relativement robuste - ou pour créer un référentiel contenant votre configuration de base pour tous vos projets futurs.

Si quelqu'un est intéressé par d'autres articles sur la conception de sites Web, veuillez me le faire savoir par courriel à lswest34+fcm@gmail.com. Si vous avez d'autres suggestions ou des demandes, n'hésitez pas à me les envoyer par courriel également.

Lectures complémentaires http://bower.io/ - site Bower contenant la documentation. http://foundation.zurb.com/ - site de Zurb Foundation, contenant des informations sur l'utilisation de l'environnement Foundation.