Bower pour les nuls (comme moi) Vous êtes intégrateur ou développeur front-end ?
Vous avez envie de vous faciliter la vie tout en étant quelque peu allergique à la ligne de commande (un peu comme moi en fait) ? Vous adorez votre job mais vous croulez sous le nombre de tâches répétitives qui vous empêchent de vous concentrer sur votre coeur de métier ? Alors sachez que Bower fait partie d'une panoplie de services de nouvelle génération destinés à automatiser un maximum de tâches à votre place. Le but de cet outil développé par l'équipe de Twitter est de gérer les dépendances de votre projet. C'est quoi, une dépendance ? Simplifiez le développement de vos thèmes avec Gulp. Cet article fait suite à ma conférence au WordCamp Paris 2018, ou je faisais une démonstration de l’utilisation de Gulp dans un thème WordPress, qui permet de compiler les fichiers CSS, JS, les compresser, recharger automatiquement le navigateur et bien d’autres encore.
Démonstration. WordCamp Paris 2018 Cette année le WordCamp Paris s’est déroulé le 9 mars, à la MAS avec un programme intense et des conférences très enrichissantes. On a pu notamment découvrir une démonstration de Gutenberg, le nouvel éditeur de WordPress, apprendre à faire son premier thème, des études de cas de l’utilisation WordPress dans les grands groupes… C’était d’ailleurs déjà le dixième anniversaire du WordCamp Parisien. Sur twitter le hashtag #WCParis a été très actif et vous pourrez y retrouver toutes les slides des conférences.
L’équipe d’organisation, les sponsors et les orateurs. Advanced WordPress Development: Using Gulp to Streamline Your Workflow. No matter what languages you’ve used in the past to development websites, you’ve no doubt had to complete menial, monotonous tasks – image optimization, JavaScript minification, concatenation, compiling supersets like SCSS and CoffeeScript to their native counterparts, creating the final build… just to name a few.
Fortunately, build scripts such as Gulp and Grunt can take care of these rather boring tasks for you. All they require is a bit of setup and some command line know-how. GitHub - gulpjs/gulp: The streaming build system. Gulp-update-modul. Auto update all node modules.
OpenClassrooms - Installer Node.js. Ébauche de workflow Gulp : tâches courantes, unCSS, includes HTML et critical-CSS. Préambule : cet article part du principe que vous n’êtes pas totalement étranger aux notions et outils tels que LESS, NodeJS, Gulp ni à la ligne de commande, il ne s'agit d'un tutoriel de découverte de ces outils mais d'usage en environnement professionnel.
Introduction Au sein de l’agence web Alsacreations.fr, nous avons instauré un processus de travail (un “workflow”) composé de langage LESS, compilé avec des tâches Gulp et saupoudré de conventions internes et de KNACSS. Le site goetter.fr est mon site personnel, mon bac à sable et mon espace de test pour moults expériences web. La version actuelle du site est très artisanale et manuelle. Introduction à Gulp. A l’origine, Sass Si vous me lisez depuis quelques temps, vous savez probablement que je suis un fervent utilisateur de Sass.
J’ai initialement utilisé SublimeOnSaveBuild pour gérer la compilation automatiquement. Quand j’ai changé d’emploi et que j’ai commencé à travailler avec de nouveaux collègues, j’ai cherché à généraliser l’utilisation de Sass au sein de l’équipe. Je me voyais mal leur imposer, en plus d’un nouveau langage, mon éditeur de texte et sa configuration. Introduction à Gulp. Gulp est un "Automatiseur de tâches", un task runner comme disent nos amis anglophones, c'est à dire qu'il est capable de lancer des bouts de scripts à votre place tout seul comme un grand.
Ces tâches dépendent de votre bon vouloir et peuvent être très variées : des opérations simples telles que minifier ou concaténer du CSS ou du JavaScript, la création ou la suppression de dossiers ou de fichiers (possibilité de créer un projet à partir de zéro), l'optimisation, la compression d'images, la création de serveur local permettant de tester sur de multiples périphériques en même temps, la simulation de navigateurs fantômes conçus pour parcourir et tester les regressions d'affichage d'une page, etc. T'as une tâche là ! Pour vous représenter le nombre d'actions réalisables par Gulp, sachez que les quelques 2000 plugins recensés représentent tout autant de tâches exécutables au sein de votre projet. Browsersync - Time-saving synchronised browser testing.
Gulp-git. Gulp-clone. Getting started with Gulp and Sass - Ryan Christiani – Front-End Developer. Npm Documentation. Installing node.js and npm on Mac OSX 10.9 Mavericks. Node.js allows you to run javascript in the Terminal as appose to a regular browser which makes for a modern workflow in web development, with node.js installed an associated package called npm (Node Package Manager) is also installed which can manage other applications that utilize node.js, one of the main ones being grunt.js.
OSX Yosemite 10.10 guide here. To install node.js on OSX 10.9 Mavericks you can download a pre-compiled binary package which makes a nice and easy installation. Head over to and click the install button to download the latest package. Install the package by following along which will install node and npm, npm is Node Package Manager which facilitates installs of additional packages for node.js. At the end of the install you are prompted to make sure that /usr/local/bin is in your path, double check you have it by running in the Terminal: echo $PATH.
Setting up gulp.js to compile Sass - CodeHive. Gulp is a build system that allows you to manage various tasks such as compiling Sass to CSS, minifying your files or many numerous other tasks that a front-end developer might face.
