Share
HTML5 Boilerplate est largement reconnu comme une base solide pour la création de nouveaux sites et applications Web. Cela dit, rares sont ceux qui savent que cet outil offre plus que simplement mise en place votre environnement de développement. Il vous aide également à "terminer" votre travail en fournissant un processus de construction multi-plateforme impressionnant..
Alors, pourquoi auriez-vous besoin de cet outil de construction? Parce qu'il est intégré à HTML5 Boilerplate et qu'il peut vous aider à automatiser l'optimisation des performances Web. Nous avons choisi d'aller avec Apache Ant pour gérer la charge de travail. Comment venir?
Tous les autres outils ont des limites que l'auteur original d'Ant ne pouvait pas supporter lorsqu'il développait des logiciels sur plusieurs plates-formes..
De nombreux développeurs ne connaissent pas le processus de construction. Mais ne t'inquiète pas un outil de construction n'est pas un monstre effrayant. Tout peut être configuré via un fichier XML relativement simple. Cet article vous aidera à comprendre comment configurer l'outil de génération, personnaliser le processus de génération et enfin modifier les variables et exécuter la génération..
Le script de construction suppose certaines hypothèses sur la manière dont vos fichiers sont triés et structurés. Voici la structure de dossiers de HTML5 Boilerplate:
Accentsconagua
/ js / libs / - contient les bibliothèques de scripts courantes: Modernizr, jQuery et un pngfix pour IE6/ js / mylibs / - contient des scripts de bibliothèque personnalisés spécifiques au site/plugins.js - tous les plugins jQuery/script.js - JavaScript spécifique au site / à la pagele construire/ Le dossier contient les éléments suivants:
Les fichiers de construction d'Apache Ant sont écrits en XML. Ce fichier contient notre projet (Boilerplate Build) et nos cibles. Les cibles contiennent des éléments de tâche. Chaque élément de tâche du fichier de construction peut avoir un identifiant attribut et peut ensuite être référencé par la valeur qui lui est fournie, qui doit être unique.
default.properties contient les options de construction par défaut, la structure de projet et les options de construction hardcore, que nous examinerons bientôt.
Ce fichier définit les remplacements pour default.properties. Cela devrait être créé par un utilisateur lorsqu'il doit remplacer des valeurs particulières. Par conséquent, il ne devrait pas être placé sous contrôle de version.
Les outils sont un ensemble de paquets, qui incluent opyipng, JPEGTran, compresseur YUI et Compresseur HTML.
Le but de l'outil de construction étant d'être indépendant de la plate-forme, nous passerons en revue les étapes nécessaires à sa configuration, en fonction du système d'exploitation de votre choix..
brasser installer libjpeg optipng. Avec MacPorts, utilisez la commande d'installation suivante: port installer jpeg optipng apt-get installer libjpeg-progs optipng L'outil de construction n'est rien d'autre qu'un fichier XML basé sur Apache Ant. Vous trouverez ci-dessous un aperçu du processus de construction prédéfini. Ces éléments peuvent être configurés en modifiant la build.xml fichier.
?
/ js / libs / les fichiers sont minifiés, mais non concaténés. Modernizr devrait être seul dans le tête du document. jQuery peut être extrait d'un CDN, et le pngfix sera inclus pour IE6 uniquement./ js / mylibs / contient vos autres diverses bibliothèques et plugins JavaScript. Tous les fichiers stockés ici seront minifiés (sauf s’ils se terminent par .min.js), puis concaténés ensemble.plugins.js et script.js, dans le / js / dossier, sont tous à vous. Ceux-ci seront également minifiés et concaténés avec le mylibs / des dossiers.?
Tous les fichiers CSS sont minifiés à l’aide de YUI compresseur. Le script Ant ci-dessus s'exécutera style.css par le compresseur YUI pour la minification.
?
En HTML5 Boilerplate, nous avons choisi d'utiliser OptiPng et jpegtran pour l'optimisation d'image pour les images PNG et JPG, respectivement. Cela dit, il existe de nombreux outils d’optimisation d’image. Si vous le souhaitez, vous êtes libre de remplacer les outils par vos propres outils d'optimisation d'image préférés..
Par exemple, Smush.it utilise ImageMagick pour identifier le type d'image et convertir les fichiers GIF en fichiers PNG. Il utilise ensuite gifsicle pour optimiser les animations GIF en supprimant les pixels répétés dans différentes images..
? Mise en commentaire des lignes console.log
Des fichiers comme console.log, les fichiers de profilage et de tests unitaires ne sont pas nécessaires pour la publication du site.
Vous trouverez ci-dessous différentes options pour réduire au minimum vos fichiers HTML:
htmlbuildkit - Préserve les commentaires, les espaces multiples et compresse les scripts JavaScript et CSS intégrés. htmlclean - Préserve les espaces multiples, supprime les guillemets inutiles et compresse le code JavaScript et CSS en ligne htmlcompress - Supprime les citations inutiles et compresse le code JavaScript et CSS intégré. Boilerplate HTML5 utilise une chaîne de requête pour la gestion des versions JavaScript / CSS et le contournement du cache.
HTML5 Boilerplate utilise par défaut une chaîne de requête pour la gestion des versions JavaScript / CSS et le contournement du cache. L'inconvénient de cette approche est que certains mandataires intermédiaires - et potentiellement d'autres clients - peuvent ne pas mettre en cache des actifs contenant des chaînes de requête. Ceci est dû aux heuristiques de base qui signalent de telles requêtes comme des données dynamiques..
L'outil de génération supprime d'abord le contrôle de version de la chaîne de requête et utilise une numérotation de base automatisée pour le contrôle des versions et le contournement du cache..
Tous les fichiers ne devront pas être publiés. Un exemple parfait de ceci serait les fichiers générés par le système de contrôle de versions comme subversion et git.
Par défaut, une liste de types de fichiers et de répertoires sera exclue. Pour ajouter à cette liste, vous pouvez rechercher et trouver et ajoutez vos exclusions personnalisées à elle.
Les variables à l'intérieur du fichier de construction sont définies dans default.properties et build.properties.
build.concat.scripts = true - Si cette option est définie, plusieurs fichiers de script sont fusionnés en un seul fichier cohérent..build.delete.unoptimized = true - Si défini, les fichiers non optimisés seront supprimés.file.exclude = nonexistentfile - Exclut le filtre de fichier pour la publication (ne peut pas être vide).dir.publish = publier dir.build = construire dir.tools = $ dir.build / tools dir.test = test dir.demo = démo dir.js = js?
La structure du projet contient des noms de répertoire, comme ceux indiqués ci-dessus, ainsi que le dossier JS principal, les bibliothèques d’utilitaires JS et les dossiers qui ne doivent être que minif mais non concaténés.
build.info = buildinfo.properties - Le versioning de construction est définitool.yuicompressor = yuicompressor-2.4.2.jar - YUI Compressor est défini avec yuicompressor-2.4.2.jar Enfin, nous verrons exactement comment utiliser l'outil de construction dans vos projets! Reportez-vous aux étapes suivantes pour exécuter l'outil de construction..
cd build / construction de fourmis scripts-002.min.js), il recherche des commentaires HTML faisant référence au début et à la fin du bloc de script. Actuellement, il cherche . Voici une liste des différentes options de construction que vous pouvez choisir pour répondre à vos besoins particuliers:
construction de fourmis - optimisations mineures HTML (guillemets supplémentaires supprimés). script en ligne / style minifié (par défaut)kit de construction de fourmi - tous les espaces html conservés. script en ligne / style minifiéant minify - optimisations ci-dessus et minification complète du langage HTMLtexte de la fourmi - idem que build mais sans image (png / jpg) optimisationL'optimisation des performances ne doit pas nécessairement être coûteuse ou prendre beaucoup de temps. Avec certaines règles réutilisables, il est possible de configurer lentement un processus de construction pour automatiser les aspects répétitifs du travail d'optimisation. Apache Ant fournit un cadre puissant, mais facile à utiliser, tandis que HTML5 Boilerplate exploite ce potentiel pour rendre l'optimisation Web aussi simple que possible pour les développeurs Web frontaux. Merci beaucoup pour la lecture!
