Content
Els corredors de tasques JavaScript, com Grunt, han esdevingut molt populars entre els desenvolupadors front-end. Això es deu al fet que ajuden a fer l’única cosa que tots volem fer a les nostres feines: estalviar temps!
Però amb més de 5.000 (i comptant) connectors Grunt disponibles ara, pot ser difícil per als desenvolupadors trobar aquests "diamants en brut". Hem fet una ullada enrere a la nostra època de ficar-nos a Grunt per trobar la recepta perfecta dels connectors Grunt que hauríeu d’utilitzar.
01. Uglifica
Tots els desenvolupadors frontals que valen la pena saben dels avantatges de reduir fitxers JavaScript, i això és exactament el que fa aquest complement. Aquesta és la seva popularitat, ja que s’inclou a la Guia d’inici Grunt. Malgrat el nom, aquest connector també es pot utilitzar per embellir el vostre codi JavaScript, tot i que això no és especialment útil per a la producció.
02. Sass
És possible que hi hagi algun debat sobre quin preprocessador CSS realment governa, però aquí, a Stickyeyes, ens hem fixat en Sass en lloc del seu principal rival, Less. Aquest connector ens permet escriure els nostres fitxers Sass i compilar-los automàticament a CSS. Els mèrits d’utilitzar un preprocessador CSS garanteixen un article separat en si mateix, però és segur dir que si no n’utilitzeu ja arribeu molt tard a la festa.
03. CSSMin
Aquest connector és l'equivalent CSS d'Uglify. Simplement obté els fitxers CSS especificats i els minimitza. Per descomptat, si utilitzeu això juntament amb el connector Sass, heu d’assegurar-vos que aquesta tasca s’executi després de la tasca Sass.
Hi ha moltes alternatives a CSSMin que també poden reduir la mida dels vostres fitxers CSS mitjançant tècniques lleugerament diferents; CSS nano, CSS wring, CSS shrink, etc. Llegiu aquest punt de referència útil si us interessa aquest tipus de coses.
04. Concat
Com el seu nom indica, aquest complement simplement pren diversos fitxers i els concatena en un de sol. Com passa amb la reducció de codi, la concatenació de fitxers també és una pràctica recomanada antiga per reduir els temps de càrrega de la pàgina.
La concatenació de fitxers sempre s’ha d’utilitzar en la producció tant de JavaScript com de CSS. Normalment, aquesta és l'última tasca que s'executa després de la tasca de pre-processament CSS i la tasca de minificació. És fàcil dir-li a aquest connector que concateni tots els fitxers d’un directori específic, però tingueu en compte l’ordre en què es concatenaran els fitxers; és possible que hagueu de donar una ordre específica o posar un nom als fitxers perquè sempre estiguin concatenats en l’ordre que desitgeu. .
05. ImageMin
En la mateixa línia que CSSMin i Uglify, ImageMin aborda un altre problema de càrrega de la pàgina: la mida del fitxer de la imatge. La "minificació" de la imatge sol ser un primer port de trucada per optimitzar-lo, de manera que aquest connector és essencial per reduir al màxim la mida total del fitxer de pàgina.
Si esteu treballant amb JPG, PNG, GIF o SVG (un format d’imatges vectorials cada vegada més popular), aquest connector proporcionarà reduccions sense pèrdues de la mida del fitxer de les vostres imatges, sense que hagueu d’aixecar un dit. Si teniu moltes imatges al vostre projecte, és una bona idea executar aquesta tasca només quan aneu a la producció, en lloc d'executar aquesta tasca en un esdeveniment de visualització (vegeu el punt següent).
06. Rellotge
Aquest connector no afecta realment el vostre front-end del lloc web, però és extremadament útil per crear un procés Grunt eficient. Watch simplement vigila tots els directoris que especifiqueu i, un cop canviat, activarà certes tasques de Grunt.
Per tant, podeu configurar una condició de rellotge al directori 'js' per executar les tasques de JavaScript i una altra al directori 'css' per executar les tasques CSS. Això significa que mai no haureu d'executar manualment el vostre procés principal de Grunt. Només heu d’inicialitzar la tasca de rellotge gruixut abans de començar a fer canvis i podeu oblidar que fins i tot hi és.
Paraules: Jamie Shields
Jamie Shields és un desenvolupador de back-end de l’agència de màrqueting digital Stickyeyes.
Com això? Llegeix això!
- Grunt vs Gulp: quina eina de creació de JavaScript heu de triar?
- 8 maneres de millorar la configuració de Grunt
- Els millors temes gratuïts de WordPress
