Share
En tant que concepteur Web, vous avez la garantie de travailler avec trois langues: CSS, HTML et JavaScript. Dans ce tutoriel, vous allez utiliser la ligne de commande pour rendre votre développement avec ces trois langues plus puissant et plus efficace..
Vous apprendrez à utiliser la ligne de commande pour:
Remarque: ce didacticiel suppose que vous avez déjà terminé les didacticiels précédents de cette série. Si vous ne l'avez pas déjà fait, vous trouverez utile de revenir en arrière et de les suivre avant de continuer..
Si vous n'avez jamais travaillé avec des préprocesseurs CSS, abandonnez tout immédiatement et essayez-en un. Une fois que vous avez trouvé un préprocesseur que vous aimez qui correspond à votre style de codage, il est probable que vous ne codiez plus jamais en code CSS brut..
Les trois préprocesseurs généralement choisis sont Stylus, Sass / SCSS et LESS. Tuts + propose une gamme impressionnante de tutoriels et de cours pour vous aider à apprendre à écrire dans la syntaxe des trois préprocesseurs..
Dans ce tutoriel, nous allons expliquer comment utiliser la ligne de commande pour compiler le code de chacun des trois..
Chaque utilisateur du préprocesseur a un favori et le mien est Stylus. Il utilise une syntaxe minimale qui peut être écrite très rapidement, des fonctionnalités très puissantes et est pris en charge par d’excellentes bibliothèques tierces telles que Jeet et Kouto-Swiss..
Vous pouvez tout lire sur Stylus à l'adresse suivante: http://stylus-lang.com/
Pour installer Stylus globalement, en vous permettant de compiler des fichiers «.styl» n’importe où, exécutez la commande suivante:
[sudo] npm installe le stylet -g
Le moyen le plus simple de compiler avec Stylus est d'utiliser cette commande en une ligne:
style < example.styl > exemple.css
Cette commande compilera «exemple.styl» dans «exemple.css» dans le même répertoire..
Pour le décomposer nous avons style pour lancer la commande. Ensuite, nous utilisons un < example.styl pour indiquer le fichier d’entrée Stylus, suivi de > exemple.css pour désigner le nom du fichier CSS que nous voulons avoir créé.
Vous avez également la possibilité d’ajouter des indicateurs à cette commande, par exemple en utilisant le --compresse flag pour supprimer les espaces du fichier CSS résultant:
stylet --compresser < example.styl > exemple.css
Au lieu de compiler un fichier à la fois, vous pouvez compiler tous les fichiers Stylus d'un répertoire en fichiers CSS d'un autre répertoire. Pour ce faire, après le style commande, spécifiez le dossier source, puis utilisez la commande --en dehors drapeau suivi du dossier de destination.
Par exemple, pour compiler tous les fichiers Stylus d’un dossier nommé «source_files» dans «assets / css», utilisez:
stylus fichier_source --out assets / css
Remarque: le dossier dans lequel vous compilez doit déjà exister avant d'exécuter la commande car il échouera s'il ne trouve pas le dossier spécifié dans lequel les fichiers CSS doivent être générés..
Il existe plusieurs autres options que vous pouvez utiliser lorsque vous utilisez Stylus via la ligne de commande. Pour tout savoir à leur sujet, visitez: http://stylus-lang.com/docs/executable.html
Sass est très probablement le préprocesseur le plus populaire à ce jour. Il est incroyablement puissant dans ce que vous pouvez réaliser avec cela et a une communauté très large et active. Il est supporté par des bibliothèques tierces bien connues telles que Compass, Bourbon et Susy.
En savoir plus sur Sass à: http://sass-lang.com/
Vous avez deux options pour compiler Sass sur votre machine: vous pouvez soit utiliser Ruby pour le gérer, soit vous pouvez utiliser LibSass..
Sass a été créé pour la première fois sur Ruby. Si vous recherchez une assistance complète à 100%, c'est l'option que vous souhaitez peut-être choisir. Par exemple, si vous voulez utiliser Compass, le moyen le plus simple est de vous en tenir à la compilation Ruby..
LibSass a été créé comme alternative, et une des options qu’il rend disponible est la compilation de sass via un paquet npm. Cette approche compile sass beaucoup plus rapidement, ramenant le temps de compilation d’environ 5 secondes avec Ruby à moins d’une demi-seconde avec LibSass. Cependant, vous pouvez trouver certaines fonctionnalités et code tiers non pris en charge..
Ce que vous choisissez dépend entièrement de vos préférences personnelles, mais en règle générale, je suggérerais d’utiliser LibSass pour gagner du temps, sauf s’il ya quelque chose de spécifique (comme Compass) pour lequel vous avez besoin de la compilation Ruby..
Indépendamment de votre choix, nous utiliserons les deux pour vous permettre de participer aux deux événements..
Pour compiler Sass via Ruby, vous devez d’abord installer Ruby sur votre machine..
Si vous êtes sur Mac, vous avez de la chance car Ruby est déjà préinstallé pour que vous n'ayez rien à faire..
Si vous utilisez Windows, rendez-vous sur http://rubyinstaller.org/, puis téléchargez et exécutez le programme d'installation que vous y trouverez. Ensuite, installez Sass en lançant cette commande:
[sudo] bijou installer sass
Sass devrait être automatiquement téléchargé et installé pour vous. Pour vérifier que l'installation a réussi, exécutez la commande:
sass -v
Le numéro de version et le nom de votre installation Sass doivent s'afficher sur votre terminal:
Pour compiler un fichier avec Ruby sass, tapez simplement toupet, suivi du nom du fichier d'entrée, d'un espace, puis du nom que vous souhaitez que votre fichier CSS compilé ait:
sass source_file.scss compiled_file.css
Ruby Sass possède également une fonction intégrée de surveillance (nous en couvrirons plus en détail ultérieurement) qui surveillera les modifications apportées à vos fichiers et les recompilera automatiquement à chaque sauvegarde..
Pour l'utiliser, ajoutez le --regarder marquer à votre commande, puis séparer les noms de votre fichier source et compilé avec deux points au lieu d'un espace:
sass --watch source_file.scss: compiled_file.css
Vous pouvez également spécifier des répertoires entiers à surveiller et à afficher, au lieu de fichiers uniques, comme suit:
sass --watch source / sass: assets / css
Une fois que vous avez commencé à regarder, vous devriez voir quelque chose comme ceci sur votre terminal:
Pour en savoir plus sur toutes les options disponibles via la ligne de commande avec Ruby Sass, exécutez:
sass --help
Une lecture des documents en ligne de commande sera affichée dans votre terminal:
Vous pouvez utiliser ceci --Aidez-moi flag pour obtenir plus d’informations sur les commandes que vous utilisez. Il suffit de taper le nom de la commande suivi de --Aidez-moi et vous obtiendrez des informations similaires à celles ci-dessus dans chaque cas.
Si vous utilisez LibSass, vous pouvez commencer avec la même méthode que celle que vous avez utilisée pour installer les paquets npm plus tôt dans cette série de tutoriels..
LibSass lui-même est écrit en C / C ++, mais il existe diverses implémentations, notamment pour Node.js. Dans notre cas, nous utiliserons le paquet node-sass.
Pour installer node-sass globalement, exécutez cette commande:
[sudo] npm installez node-sass -g
Compiler un type de fichier node-sass suivi du nom du fichier d'entrée et du nom que vous souhaitez que votre fichier CSS compilé ait:
node-sass source_file.scss compiled_file.css
Pour contrôler le répertoire dans lequel votre fichier CSS est compilé, ajoutez le --sortie drapeau et répertoire de destination entre les noms de vos fichiers d’entrée et de sortie:
node-sass source_file.scss --output assets / css compiled_file.css
Comme Ruby Sass, node-sass utilise également le --regarder flag pour activer la compilation automatique de vos fichiers lors d’une modification:
node-sass --watch fichier_source.scss fichier_con compilé.scss
Vous pouvez également spécifier des répertoires entiers sur lesquels regarder et sur lesquels générer une sortie, au lieu de fichiers uniques:
node-sass --watch source / sass / * --output assets / css
Lorsque vous utilisez node-sass pour regarder un répertoire entier, veillez à inclure / * à la fin pour spécifier vous voulez tous les fichiers dans.
Lorsque vous avez un processus de «surveillance» en cours d'exécution, vous pouvez l'arrêter soit:
Le préprocesseur LESS est également très populaire et est probablement plus connu pour son utilisation dans le cadre Twitter Bootstrap. LESS est un excellent premier préprocesseur pour commencer à travailler car il ressemble beaucoup à l'écriture en CSS simple..
En savoir plus sur LESS sur: http://lesscss.org/
Pour installer LESS globalement, en vous permettant de compiler des fichiers «.less» n’importe où, exécutez la commande suivante:
[sudo] npm install less -g
Ouvrez un terminal dans le dossier contenant le fichier LESS que vous voulez compiler et utilisez la commande lessc suivi du nom du fichier, un > symbole, puis le nom que vous voulez que votre fichier CSS compilé ait:
lessc source_file.less> compiled_file.css
Autoprefixer est un package npm qui vérifie auprès de CanIUse.com l’obtention d’informations à jour sur les propriétés CSS qui nécessitent des préfixes de fournisseur et celles qui ne le sont pas. Il gère ensuite automatiquement l'ajout des préfixes de fournisseur requis dans votre code..
Cela peut être incroyablement utile car, à moins que vous ne surveilliez constamment les mises à jour du navigateur, vous pouvez facilement vous retrouver avec des préfixes de navigateur dont vous n'avez plus vraiment besoin. Cela signifie également que vous pouvez écrire tous vos CSS sans avoir à penser aux préfixes, et laisser Autoprefixer les prendre en charge pour vous..
Par exemple, autoprefixer transformera ce code:
un display: flex;
… Dans ceci:
un display: -webkit-box; afficher: -webkit-flex; display: -ms-flexbox; affichage: flex;
Pour en savoir plus sur Autoprefixer, visitez le site: https://www.npmjs.com/package/autoprefixer
Installez Autoprefixer globalement avec:
[sudo] npm installer autoprefixer -g
Pour auto-préfixer un fichier CSS, utilisez la commande suivante:
préfixe automatique style.css
Contrairement à la compilation d'un fichier de préprocesseur, cela ne créera pas de second fichier par défaut. Le fichier que vous ciblez sera mis à jour, avec les préfixes appropriés ajoutés directement dans.
Si vous faire voulez que Autoprefixer génère un deuxième fichier séparé, ajoutez le --sortie drapeau suivi d'un nom pour votre fichier css préfixé:
autoprefixer unprefixed.css --output prefixed.css
Vous voulez toujours que les CSS que vous déployez sur vos sites soient réduites à la plus petite taille possible. Pour ce faire, vous pouvez utiliser des techniques d'optimisation de:
Stylus, Ruby Sass et node-sass ont tous la possibilité de compresser votre CSS lors de la compilation.
Dans Stylus, incluez le --compresse drapeau:
stylet --compresser < source_file.scss > compiled_file.css
En Ruby Sass incluent le --style drapeau suivi de comprimé:
sass source_file.scss compiled_file.css - style compressé
Dans node-sass, ajoutez le --style de sortie drapeau suivi de comprimé:
node-sass - fichier_source compressé de style de style de sortie.scss compiled_file.css
Si vous n'utilisez pas de préprocesseurs CSS ou souhaitez simplement optimiser le code, vous pouvez utiliser le package clean-css, qui soumettra vos fichiers CSS à des processus de compression plus approfondis..
Les processus de compression habituels suppriment généralement simplement les espaces et les commentaires de votre CSS. Le paquet clean-css, d’autre part, peut aussi faire des choses comme:
La fusion de sélecteurs dupliqués peut être pratique, par exemple, si vous souhaitez que toute la mise en page d'une classe donnée apparaisse initialement dans un fichier «layout.css», tandis que la coloration de la même classe se trouve initialement dans un fichier «colors.css»..
Arrondir les nombres est idéal lorsque vous avez utilisé une fonction de préprocesseur pour convertir une valeur en unités rem et que vous obtenez quelque chose comme 2.3649858573rem. Avec clean-css, ce nombre serait arrondi à deux décimales, le ramenant à une valeur beaucoup plus ordonnée de 2,36rem.
Vous pouvez en savoir plus sur clean-css sur: https://github.com/jakubpawlowicz/clean-css
Installez clean-css globalement avec la commande:
[sudo] npm installer clean-css -g
Pour nettoyer un fichier CSS, utilisez:
cleancss style.css
Remarque: Même si le nom du paquet «clean-css» contient un trait d'union, assurez-vous d'utiliser cleancss sans pour autant un trait d'union pour commencer vos commandes.
Pour spécifier un nouveau nom de fichier à générer par clean-css, utilisez la commande -o indicateur suivi du nouveau nom de fichier, avant le nom du fichier que vous ciblez:
cleancss -o nettoyé.css style.css
Il existe plusieurs autres options de commande disponibles pour clean-css, sur lesquelles vous pouvez lire tous les ouvrages à l'adresse suivante: Comment utiliser Clean CSS CLI.
Jade est un langage étonnant qui compile en HTML et vous permet d'écrire votre code en abrégé pour un développement beaucoup plus rapide et de créer vos propres systèmes de templates afin que vous puissiez vous épargner sur la réécriture du code..
Pour en savoir plus sur Jade, consultez la page https://www.npmjs.com/package/jade.
Pour installer Jade globalement, lancez la commande:
[sudo] npm installer jade -g
Jade, créé par la même personne que Stylus, utilise la même syntaxe de commande de base que < et > signes pour compiler un fichier:
jade < index.jade > index.html
Cette commande compilera “index.jade” en “index.html” dans le même répertoire..
Pour compiler tous les fichiers Jade d’un répertoire donné, utilisez:
jade dir_name
Pour définir le répertoire dans lequel vous voulez que vos fichiers HTML soient écrits, placez le --en dehors drapeau entre le nom des répertoires d'entrée et de sortie:
jade src_dir --out html_dir
Pour utiliser Jade regarder fonction de compilation automatique lors de la sauvegarde, passez le --regarder flag juste après la commande jade.
Pour des fichiers uniques:
jade - montre < index.jade > index.html
Ou pour les annuaires complets:
jade --watch dir_name
jade --watch dir_name --out rép_html
Tout comme nous voulons optimiser les fichiers CSS que nous déployons, nous voulons également livrer nos fichiers JavaScript de la manière la plus efficace possible..
Il est courant pour nous d'avoir plusieurs fichiers JS entrant dans nos projets, tels que nécessitant Modernizr, jQuery et notre propre code personnalisé, par exemple, mais nous souhaitons également réduire le nombre de requêtes http effectuées par nos sites. De plus, nous voulons nous assurer que le temps de chargement de notre JavaScript est très rapide..
La meilleure façon de gérer ces deux problèmes consiste à concaténer simultanément nos fichiers JavaScript dans un seul fichier, ce qui signifie que nous n’aurons besoin que d’une seule requête http pour le charger et à réduire au minimum le fichier résultant de sorte qu’il soit aussi petit que possible..
Nous allons utiliser le paquet UglifyJS pour prendre en charge ce processus.
Pour installer uglify-js globalement, exécutez:
[sudo] npm installe uglify-js -g
Pour combiner deux fichiers JavaScript, puis supprimez les espaces et les commentaires du fichier résultant, utilisez la commande uglifyjs suivi des noms de chacun de vos fichiers source avec des espaces entre eux. Après cela inclure le --sortie Indiquez le drapeau et le nom que vous voulez que votre nouveau fichier combiné & minifié ait:
uglifyjs input1.js input2.js --output input.min.js
Outre la suppression par défaut des espaces et des commentaires, vous pouvez également ajouter une compression qui modifiera le code afin de réduire sa taille. Pour ce faire, ajoutez le --compresse drapeau à la fin de la commande:
uglifyjs input1.js input2.js --output input.min.js --compress
Une autre option d'optimisation disponible consiste à «modifier» le code, ce qui permettra d'effectuer des opérations telles que le filtrage des noms de variables, de fonctions et d'arguments en caractères simples. Pour utiliser cette option, ajoutez le --mutiler drapeau à la fin de la commande:
uglifyjs input1.js input2.js --output input.min.js --mangle
Vous pouvez également utiliser la compression et le brassage en passant les deux indicateurs:
uglifyjs input1.js input2.js --output input.min.js --mangle --compress
En savoir plus sur les commandes que vous pouvez exécuter avec UglifyJS à l’adresse: https://www.npmjs.com/package/uglify-js
Si vous combinez et / ou réduisez des scripts tiers, tels que jQuery, Modernizr, etc., veillez à utiliser les versions complètes développées de ces fichiers. C'est généralement une mauvaise idée de redimensionner des fichiers qui ont déjà été minifiés, car vous pouvez casser leur fonctionnalité..
Vous pouvez identifier les fichiers déjà minifiés car ils suivront généralement la convention de nommage «name.min.js», tandis que la version développée du fichier sera «name.js»..
Vous savez maintenant comment effectuer certaines tâches extrêmement utiles avec différentes commandes, mais si vous pouviez exécuter toutes les tâches dont votre projet a besoin en même temps avec une seule commande?
Dans le prochain tutoriel, vous apprendrez exactement comment faire cela, en utilisant des exécuteurs de tâches pour configurer toutes les tâches dont votre projet a besoin, afin que toute votre compilation, votre préfixation automatique, votre combinaison et votre optimisation puissent être effectuées à la fois et en quelques secondes seulement..
Je te vois dans le prochain tutoriel!
Accentsconagua