2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

Grunt, Gulp et Laravel Elixir

2 Associés développement web et mobile à Montréal

Lors du développement ou de l’intégration «Front-End» et «Web Responsive», la gestion automatique de tâches récurrentes n’est plus une option. Que vous utilisiez Grunt, Gulp ou Elixir, cette gestion automatique pourra vous sauver beaucoup de temps d’intégration.

De ces 3 technologies j’ai croisé les tâches communes que j’utilise fréquemment dans tous mes projets, qu’ils soient statiques, WordPress, Laravel ou Ruby on Rails. Il existe pratiquement une tâche pour tout et vous pourrez en trouver plusieurs autres sur les sites respectifs de NPM, Grunt et Gulp. Laravel Elixir ayant choisi Gulp comme gestionnaire principal, vous pourrez retrouver ses plugins sur NPM (et non Gulp!).

Sass

Sass est un préprocesseur CSS. Combiné à Bootstrap Sass il devient redoutable avec les mixins. Sass se défini comme suit :

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

BrowserSync

Similaire à LiveReload mais avec «Scrolling» en plus ou à tout le moins, sans configuration supplémentaire. Un «Must» pour ceux et celles qui utilise un navigateur Web en travaillant. BrowserSync se défini comme suit :

BrowserSync makes your tweaking and testing faster by synchronising file changes and interactions across multiple devices. It’s wicked-fast and totally free.

Imagemin

Avant Imagemin, mes efforts de compressions d’images se limitaient à un «Save for Web…» dans Photoshop avec une règle douteuse du 30k datant du temps de Jesus… Et mes PNGs étaient probablement les plus lourds du Web… Surtout en double densité. Bref, j’ai évolué. Imagemin se défini simplement comme suit :

Minify images seamlessly

CSS Lint

CSS Lint ou SCSS Lint pour Gulp et Laravel Elixir. Très pratique pour l’assurance qualité du code CSS. Encore plus pratique si vous travaillez avec plusieurs intégrateurs/développeurs avec différents niveaux d’expérience. Selon notre niveau d’orgueil, on configure les règles dans un fichier exemple : Vérifier que les déclarations ne soient pas vides, que les couleurs soient en hexadecimal, que les !important ne soient pas utilisées, etc.  CSS Lint se défini comme suit :

CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

JSHint

JSHint s’occupe de la syntaxe JavaScript. Tout comme CSS Lint, il est très pratique pour l’assurance qualité du code JavaScript. Par défaut très sévère mais tout comme CSS Lint, on configure aussi les règles dans un fichier. JSHint se défini comme suit :

The goal of this project is to help JavaScript developers write complex programs without worrying about typos and language gotchas.

Et les autres

Évidemment il en existe plusieurs autres. Allez faire un tour sur NPM, Grunt et Gulp et lire à propos de ceux-ci :

  • Clean
  • Connect
  • Uglify
  • Watch
  • CSSMin
  • SSH
  • Autoprefixer
  • Etc.

 

Commentez cet article

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles reliés