6 основни приставки за Grunt, които трябва да използвате

Земя

как да кандидатствам в художествено училище
Дайте на Grunt по-грубо с тези страхотни приставки

Изпълнители на задачи на JavaScript като Земя са станали изключително популярни сред разработчиците от предния край. Това е така, защото те помагат да се направи едно нещо, което всички ние искаме да правим в работата си - спестяваме време!



Но с повече от 5000 (и преброяващи) приставки Grunt, които вече са на разположение, за разработчиците може да е трудно да намерят тези „груби диаманти“. Погледнахме назад към нашето време, заседнало в Grunt, за да намерим перфектната рецепта за приставки Grunt, която трябва да използвате.



01. Uglify

Всеки фронт разработчик, който си заслужава, знае за предимствата на минимизирането на JavaScript файловете и точно това прави този плъгин. Такава е популярността му, всъщност е включена в Ръководство за начало на Grunt . Въпреки името, този плъгин може да се използва и за разкрасяване на вашия JavaScript код - макар че това не е особено полезно за производствена употреба.

02. Sass

Може да има някои спорове за това кой CSS препроцесор наистина управлява нощувката, но тук на Лепкави очи , ние се спряхме на Sass, а не на основния му съперник, Less. Този плъгин ни позволява да напишем нашите Sass файлове и да ги компилираме автоматично в CSS. Предимствата на използването на CSS предварително обработващ процес налагат отделна статия сама по себе си, но е безопасно да се каже, че ако не използвате такава, вече закъснявате за партито!



03. CSSMin

Тази приставка е CSS еквивалент на Uglify. Той просто получава всички посочени CSS файлове и ги минимизира. Разбира се, ако ще използвате това заедно с приставката Sass, тогава трябва да се уверите, че тази задача се изпълнява след задачата Sass.

Има много алтернативи на CSSMin, които също могат да намалят размера на вашите CSS файлове, използвайки малко по-различни техники; CSS nano, CSS извиване, CSS свиване и др. Прочетете този удобен еталон ако сте в този тип неща.

04. Конкат

Както подсказва името, този плъгин просто взема множество файлове и ги обединява в един. Както при минимизирането на кода, обединяването на файлове също е вековна най-добра практика за намаляване на времето за зареждане на страниците.



Конкатенацията на файлове винаги трябва да се използва в производството както за JavaScript, така и за CSS. Това обикновено е последната изпълнена задача - след задачата за предварителна обработка на CSS и задачата за минимизиране. Лесно е просто да кажете на този плъгин да обединява всички файлове в определена директория, но внимавайте реда, по който файловете ще бъдат обединени - може да се наложи да дадете конкретна поръчка или да назовете файловете, така че те винаги да бъдат обединени в реда, който искате .

05. ImageMin

По същия начин като CSSMin и Uglify, ImageMin се справя с друг вековен проблем за зареждането на страниците - размерът на файла на изображението. „Минимизацията“ на изображението обикновено е първият призив за оптимизация, така че този плъгин е от съществено значение за намаляване на общия размер на файла на страницата възможно най-много.

как да редактирам вектори в илюстратор -

Ако работите с JPG, PNG, GIF или SVG (все по-популярен формат на векторни изображения), този плъгин ще доведе до намаляване на размера на файла на вашите изображения без загуба, без да се налага да вдигате пръст. Ако имате много изображения във вашия проект, добра идея е да изпълнявате тази задача само когато се придвижвате към производство, вместо да я изпълнявате на събитие за гледане (вижте следващата точка).

най-добрите художници на манга на всички времена

06. Гледам

Този плъгин всъщност не засяга вашия уебсайт, но е изключително полезен при създаването на ефективен процес на Grunt. Watch просто следи всички указани от вас директории и след като нещо се промени, той автоматично ще задейства определени задачи на Grunt.

Така че можете да настроите едно условие за гледане в директорията „js“, за да стартирате вашите JavaScript задачи, и друго в директорията „css“, за да стартирате вашите CSS задачи. Това означава, че никога няма да се налага да стартирате ръчно основния си процес на Grunt! Просто инициализирайте задачата за гледане на мрънкане, преди да започнете да правите промени и можете да забравите, че дори е там.

Думи: Джейми Шийлдс

Джейми Шийлдс е заден разработчик в агенция за дигитален маркетинг Лепкави очи .

Като този? Прочети това!