Share
Ceci est un tutoriel complet sur l’utilisation de LESS avec les outils de développement de Chrome. Si vous avez utilisé Sass avec Chrome DevTools, vous serez probablement déjà familiarisé avec les concepts présentés ici..
Il n'y a pas si longtemps, les outils de développement Chrome, Chrome DevTools, ont ajouté (et continuent de le faire), notamment la possibilité de comprendre le mappage entre un fichier compilé et son fichier source correspondant. Ceci est rendu possible grâce à Source Maps.
Tout ce qui est mentionné ici est disponible dans Chrome Canary.
Tout d'abord, installez la dernière version (1.5.1 au moment de l'écriture) de LESS via NPM (Les cartes source sont arrivées à la version 1.5.0):
$ npm install -g less $ lessc -v lessc 1.5.1 (Compilateur MOINS) [JavaScript]
À ce stade, vous pouvez exécuter le compilateur LESS dans votre terminal à l’aide du bouton lessc commander.
Créez un nouveau fichier LESS. À des fins de démonstration, ça va rester court et simple.
@color: # 4D926F; #header color: @color;
Pour transformer le fichier LESS en un fichier CSS, il suffit de lancer:
lessc header.less header.css
Nous avons maintenant besoin d'un fichier de carte source. Le créer avec le -carte source drapeau.
lessc --source-map = header.map header.less header.css
À l'aide du code LESS présenté ci-dessus, l'exécution de cette commande génère un fichier de mappage source contenant le contenu suivant:
"version": 3, "fichier": "header.css", "sources": ["header.less"], "noms": [], "mappings": "AAEQ; EACP, cAAA"
Dans un monde sans pour autant Source Maps, DevTools afficherait les styles provenant du CSS compilé. La numérotation des lignes ne serait pas utile en raison d'une incompatibilité entre le CSS compilé et le CSS source. Avec Cartes source, lors de l'inspection d'un nœud DOM sur la page, DevTools affiche automatiquement les styles provenant du fichier source LESS..
Affichage d’une page Web faisant référence à la précédente header.css est maintenant inspectable d'une manière plus significative.
En tenant Commander (Contrôle sous Windows), cliquez sur une propriété, une valeur ou un sélecteur pour accéder à la ligne de code du fichier source LESS correspondant dans la liste. Sources panneau.
L'affichage du code MOINS dans l'outil DevTools est certainement utile, mais l'intégration d'un flux de travail de création peut accélérer votre cycle d'itération. L'étape suivante consiste à expliquer à DevTools comment les ressources d'une page Web mappent des fichiers sur un système de fichiers. Entrez: Espaces de travail.
Remarque: les espaces de travail conviennent à de nombreux projets, pas uniquement à ceux qui utilisent des préprocesseurs CSS..
Vous connaissez peut-être déjà le Sources panneau du point de vue de l'édition. L'idée générale est que vous avez un navigateur de fichiers dans la barre latérale, chaque fichier étant généralement une feuille de style, un script ou une ressource HTML chargée par la page Web..
En cliquant sur une ressource, vous affichez le contenu dans le panneau principal. Vous remarquerez peut-être la similitude avec le Ressources panneau, mais il y a au moins une différence majeure: la Sources panneau contient un éditeur en direct. Les modifications apportées aux feuilles de style sont appliquées instantanément à la page et les modifications apportées aux scripts sont réinjectées dans le moteur V8 et évaluées immédiatement. Cela fonctionne non seulement pour les fichiers hébergés à distance, mais également pour les fichiers locaux avec l'avantage supplémentaire de conserver vos modifications dans un fichier..
Remarque: pour utiliser les espaces de travail, les étapes suivantes ne sont nécessaires qu'une fois par projet..
Ouvrez une page Web locale et ajoutez le dossier correspondant de votre système de fichiers à l'espace de travail en clic droit dans le Sources panneau latéral et sélection Ajouter un dossier à un espace de travail.
Autoriser DevTools à accéder au dossier que vous venez d'ajouter.
Votre dossier nouvellement ajouté apparaîtra dans la barre de navigation latérale.
Clic-droit sur un fichier dans un dossier de ressources réseau dans le Sources panneau (assurez-vous qu’il existe un mappage évident sur un fichier de votre système de fichiers) et sélectionnez Mapper une ressource du système de fichiers.
La première suggestion fournie par DevTools est la bonne. Il a remarqué que le fichier sur mon système de fichiers (/ Utilisateurs /… /bootstrap.css) a le même nom qu'un fichier de ressources réseau (http: // localhost /… /bootstrap.css). Vérifier le mappage en sélectionnant la ressource correcte.
DevTools comprend maintenant le mappage entre les ressources du système de fichiers et les ressources réseau. Lorsque vous Commande / Ctrl + Clic un sélecteur du modes panneau et se termine dans le Sources panneau, vous voyez maintenant votre fichier source MOINS réel. Vous pouvez éditer un fichier dans le Sources panneau et ces modifications persisteront sur le disque lorsque vous Commande / Contrôle-S.
Nous avons parcouru tout ce chemin, alors complétons ce flux de travail en utilisant une tâche de surveillance Grunt pour surveiller les modifications apportées aux fichiers LESS, puis compilez automatiquement notre code CSS et créez le fichier Source Map correspondant..
Une fois les espaces de travail configurés, configurez Grunt (ou un autre outil de votre choix) pour surveiller les modifications apportées aux fichiers source LESS et compiler un nouveau fichier CSS (avec une mappe source). DevTools enregistrera automatiquement cette modification et appliquera les nouveaux styles à la page..
Note: Activer le Rechargement automatique généré par CSS drapeau dans le Réglages panneau pour utiliser ce flux de travail.
Voici un aperçu des étapes automatisées à suivre:
Voici un fichier Gruntfile simplifié:
Accentsconagua
module.exports = function (grunt) 'use strict'; require ('matchdep'). filterDev ('grunt -! (cli)'). forEach (grunt.loadNpmTasks); grunt.initConfig (less: dev: options: sourceMap: true, sourceMapFilename: 'bootstrap.map', fichiers: 'less / bootstrap.css': 'less / bootstrap.less', regardez : tout: fichiers: ['moins / ** / *. moins'], tâches: ['moins'],); grunt.registerTask ('default', ['less', 'watch']); ; Remarque: l'extrait de code ci-dessus provient du référentiel de démonstration..
Après un npm installer, fonctionnement grognement dans votre terminal devrait montrer une tâche de surveillance en cours d'exécution.
DevTools a déjà un accès en écriture à votre dossier de développement (via les espaces de travail). Commande / Contrôle-S vos changements dans le Sources panneau pour que DevTools écrase le fichier LESS source avec votre nouvelle modification, Grunt compile un nouveau fichier CSS que DevTools extrait et applique à la page..
grunt-contrib- * des tâches pour la plupart de ces outils (Sass, Compass, LESS, autoprefixr, UglifyJS2, CoffeeScript) qui se lient parfaitement à un flux de travail en charge du foie.less.js # 1050-permet de créer une carte source.Vous aimez ce que vous avez appris? En savoir plus sur Chrome DevTools!
