Задаволены
Выканальнікі задач JavaScript, такія як Grunt, сталі надзвычай папулярнымі сярод франтавых распрацоўшчыкаў. Гэта таму, што яны дапамагаюць зрабіць адно, што мы ўсе хочам зрабіць на сваёй працы - зэканоміць час!
Але маючы больш за 5000 (і падлічваючы) убудоў Grunt, распрацоўшчыкам можа быць складана знайсці тыя "брыльянты". Мы азірнуліся на наш час, калі затрымаліся ў Grunt, каб знайсці ідэальны рэцэпт убудоў Grunt, які вы павінны выкарыстоўваць.
01. Упрыгожыць
Кожны франтавы распрацоўшчык, які варты солі, ведае пра перавагі памяншэння файлаў JavaScript, і менавіта гэта робіць гэты убудова. Такая яго папулярнасць, яна фактычна ўключана ў кіраўніцтва па пачаткоўках Grunt. Нягледзячы на назву, гэты убудова таксама можна выкарыстоўваць для ўпрыгожвання вашага кода JavaScript - хоць гэта не асабліва карысна для вытворчага выкарыстання.
02. Сас
Могуць узнікнуць некаторыя спрэчкі наконт таго, які папярэдні працэсар CSS сапраўды кіруе месцам, але тут, у Stickyeyes, мы спыніліся на Sass, а не на галоўным канкурэнце, Less. Гэты убудова дазваляе нам пісаць нашы файлы Sass і аўтаматычна кампіляваць іх у CSS. Вартасць выкарыстання папярэдняга працэсара CSS апраўдвае асобны артыкул, але можна з упэўненасцю сказаць, што калі вы ўжо не выкарыстоўваеце яго, вы вельмі позна на вечарыну!
03. CSSMin
Гэты убудова з'яўляецца CSS-эквівалентам Uglify. Ён проста атрымлівае любыя CSS-файлы і мінімізуе іх. Вядома, калі вы збіраецеся выкарыстоўваць гэта разам з убудовай Sass, вам трэба пераканацца, што гэтая задача запушчана пасля задачы Sass.
Існуе мноства альтэрнатыў CSSMin, якія таксама могуць паменшыць памер CSS-файлаў, выкарыстоўваючы некалькі іншыя метады; CSS nano, CSS wring, CSS shrink і г. д. Прачытайце гэты зручны арыенцір, калі вы займаецеся падобнымі рэчамі.
04. Конкат
Як вынікае з назвы, гэты убудова проста бярэ некалькі файлаў і аб'ядноўвае іх у адзін. Як і ў выпадку з памяншэннем кода, аб'яднанне файлаў - гэта таксама старажытная лепшая практыка для скарачэння часу загрузкі старонкі.
Канкатэнацыя файлаў заўсёды павінна выкарыстоўвацца ў вытворчасці як для JavaScript, так і для CSS. Звычайна гэта апошняя задача, якую трэба выканаць - пасля задачы папярэдняй апрацоўкі CSS і задачы мініфікацыі. Лёгка сказаць гэтаму убудове, каб ён аб'яднаў усе файлы ў пэўным каталогу, але будзьце асцярожныя, каб файлы былі аб'яднаны - вам можа спатрэбіцца даць пэўны парадак альбо назваць файлы, каб яны заўсёды аб'ядноўваліся ў патрэбным вам парадку. .
05. ImageMin
У тым жа ключы, што і CSSMin і Uglify, ImageMin вырашае яшчэ адну спрадвечную праблему загрузкі старонкі - памер файла выявы. «Мініфікацыя» выявы звычайна з'яўляецца першым выклікам для аптымізацыі, таму гэты убудова вельмі неабходны, каб максімальна паменшыць агульны памер файла старонкі.
Калі вы працуеце з JPG, PNG, GIF або SVG (усё больш папулярным фарматам вектарных малюнкаў), гэты убудова дазволіць паменшыць памер файла вашых малюнкаў без страт, і вам не трэба будзе паводзіць пальцам. Калі ў вашым праекце шмат малюнкаў, карысна запускаць гэтую задачу толькі тады, калі вы пераходзіце да вытворчасці, а не запускаць гэтую задачу ў рэжыме прагляду (гл. Наступны пункт).
06. Глядзець
Гэты убудова фактычна не ўплывае на ваш інтэрфейс, але вельмі карысны для стварэння эфектыўнага працэсу Grunt. Watch проста сочыць за ўказанымі вамі каталогамі, і як толькі нешта зменіцца, ён аўтаматычна запускае пэўныя задачы Grunt.
Такім чынам, вы можаце наладзіць адну ўмову прагляду ў каталогу «js» для запуску вашых задач JavaScript, а іншую ў каталогу «css» для запуску вашых задач CSS. Гэта азначае, што вам ніколі не давядзецца запускаць асноўны працэс Grunt ўручную! Проста ініцыялізуйце заданне глядзець буркатанне, перш чым пачаць уносіць змены, і вы можаце забыцца, што яно нават ёсць.
Словы: Джэймі Шылдс
Джэймі Шылдс - распрацоўшчык агенцтва лічбавага маркетынгу Stickyeyes.
Як гэта? Прачытайце гэта!
- Grunt vs Gulp: Які інструмент зборкі JavaScript вам абраць?
- 8 спосабаў палепшыць наладу Grunt
- Лепшыя бясплатныя тэмы WordPress
