Почетна » Тоолкит » Како аутоматизовати задатке у Висуал Студио коду

    Како аутоматизовати задатке у Висуал Студио коду

    Коришћењем алатке за изградњу као што је Грунт или Гулп можете уштедети много времена у фази развоја аутоматизовање неколико понављајућих “Задаци”. Ако се одлучите за Висуал Студио Цоде као свој го-то едитор кода, ваш радни процес би могао бити још једноставнији и, на крају, продуктивнији.

    Изграђен са Ноде.јс у својој сржи, Висуал Студио Цоде вам дозвољава покрените задатке без напуштања прозора за уређивање. И ми ћемо вам показати како се то ради у овом посту.

    Почнимо.

    Предувјети

    За почетак, потребно је да имате инсталиран Ноде, НПМ (Управљач пакетима чворова) и ЦЛИ (интерфејс командне линије) одговарајућег алата за изградњу који је инсталиран на вашем систему. Ако нисте сигурни да ли су све ове инсталиране, провјера је једноставна као уписивање командних линија.

    Такође ћу претпоставити да су фајлови и директоријуми у вашем пројекту на свом месту, укључујући и цонфиг датотеку, као што је гулпфиле.јс или Грунтфиле.јс ако користите Грунт. И зависности од пројекта су регистроване у пацкаге.јсон такође треба да се инсталира у овом тренутку.

    Ово су наши пројектни директоријуми и датотеке, креирани у сврху а демонстрације у овом чланку. Ваш пројекат би свакако био много другачији; можда имате више или мање датотека.

    . Сс── цсс │ ├── сасс ├── гулпфиле.јс ├── индек.хтмл ├── јс │ ├── срц ├── ноде_модулес └── пацкаге.јсон

    Гулп користимо као алат за изградњу у нашем пројекту. Имамо неколико задатака регистрованих у гулпфиле.јс као што следи:

     вар гулп = рекуире ('гулп'); вар углифи = рекуире ('гулп-углифи'); вар сасс = рекуире ('гулп-сасс'); вар јсСрц = './јс/срц/**/*.јс'; вар сассСрц = './цсс/сасс/**/*.сцсс'; гулп.таск ('сцриптс', фунцтион () ретурн гулп.срц (јсСрц) .пипе (углифи ()) .пипе (гулп.дест ('./јс'))); гулп.таск ('стилес', фунцтион () ретурн гулп.срц (сассСрц) .пипе (сасс (оутпутСтиле: 'цомпрессед'))) .пипе (гулп.дест ('./цсс'))) ; гулп.таск ('аутомате', фунцтион () гулп.ватцх ([сассСрц, јсСрц], ['сцриптс', 'стилес']);); гулп.таск ('дефаулт', ['сцриптс', 'стилес', 'аутомате']); 

    Посебно постоје четири задатка које смо навели:

    • сцриптс: задатак који ће компајлирати наше ЈаваСцрипт датотеке као и минифии излаз кроз Гулп УглифиЈС плугин.
    • стилес: задатак који ће компајлирати наше СЦСС датотеке у ЦСС и компримирати излаз.
    • аутомате: задатак који ће аутоматизовати стилес и сцриптс задатак иако уграђени гулп гледати корисност.
    • Уобичајено: задатак који ће извршити све три наведене задатке све заједно одједном.

    Како је алат за изградњу у нашем пројекту спреман, сада можемо и даље аутоматизирати ове задатке које смо дефинирали у оквиру пројекта гулпфиле.јс.

    Међутим, у случају да нисте упознати са неким од поменутих алата, препоручујем вам да погледате неколико наших претходних постова како бисте ушли у тему пре него што наставите даље.

    • Како користити Грунт да бисте аутоматизовали ваш радни процес
    • Почетак рада са Гулп.јс
    • Битка за градњу скрипте: Гулп вс Грунт

    Покрените и аутоматизујте задатке

    Трчање и аутоматизација “Задаци” у Висуал Студио Цоде је прилично једноставан. Прво, покрените Цомманд Палетте притиском на комбинацију тастера Схифт + Цмд + П или кроз траку менија, Приказ> Палета команди ако вам је то погодније. Затим откуцајте Задаци, и изаберите “Задаци: Покрени задатак” од неколико опција приказаних у резултату.

    Цомманд Палетте

    Висуал Студио Цоде је паметан; зна да користимо Гулпа, покупимо гулпфиле.јс, и откријте листу задатака које смо дефинисали у датотеци.

    Листа задатака регистрованих у гулпфиле.јс

    Овде, хајде да изаберемо Уобичајено Задатак. СЦСС стилесхеетс и ЈаваСцриптс фајл ће бити компајлирани након одабира овог задатка, и такође ће покренути аутомате Задатак који ће омогућити стилес и сцриптс Задатак је да се покрене самостално.

    Када мењате фајл - стилску или ЈаваСцрипт датотеку - аутоматски ће се компајлирати. Висуал Студио Цоде такође генерише благовремене извештаје за сваки успех и грешке које се дешавају у операцији изградње.

    Дееп Интергратион

    Осим тога, можемо интегрирати наш пројект у Висуал Студио код како бисмо поједноставили радни процес. Интеграција задатака у Висуал Студио Цоде је једноставна и брза.

    Покрените палету наредби и одаберите “Конфигуришите Руннер задатка”. Висуал Студио Цоде ће дати листу алата за изградњу коју подржава. У овом случају, бирамо “Гулп”, јер је то онај који користимо у нашем пројекту у овом чланку.

    Висуал Студио Цоде би сада требао да креира нову датотеку под називом таскс.јсон испод .всцоде у директоријуму пројекта. таскс.јсон, у овом тренутку, садржи голу конфигурацију.

    И као што можете видети испод задатке својство у тренутно је само празан низ.

    "версион": "0.1.0", "цомманд": "гулп", "исСхеллЦомманд": труе, "аргс": ["--но-цолор"], "таскс": []

    Ектенд тхе задатке као што следи.

    "версион": "0.1.0", "цомманд": "гулп", "исСхеллЦомманд": труе, "аргс": ["--но-цолор"], "таск": ["таскНаме": " дефаулт "," исБуилдЦомманд ": труе,]

    Тхе таскНаме наводи име задатка у нашем гулпфиле.јс које желимо да покренемо. Тхе исБуилдЦомманд својство дефинише Уобичајено команду као “Буилд” команду. Сада, уместо да обилазите палету команди, можете једноставно притиснути комбинацију тастера Схифт + Цмд + Б.

    Алтернативно можете изабрати “Покрени задатак изградње” резултата претраге задатака у палети команди.

    Окончање

    Мислим да је Висуал Студио Цоде уредник кода са великом будућношћу. Брз је и направљен са неким практичним карактеристикама из кутије, укључујући и онај који смо приказали у овом чланку.

    Видели смо како покренути Таск из Гулпа; можете користити и Грунт. Видели смо како да интегришемо задатак у Висуал Студио Цоде и покренемо са комбинацијом кључева, што наш радни ток чини још једноставнијим.

    Надајмо се да ће вам овај чланак бити користан као референца за извођење задатака израде, а не заборавите да погледате наше претходне чланке за више савета како бисте најбоље искористили Висуал Студио Цоде.

    • Висуал Студио Цоде: 5 Авесоме Феатурес то тхе Фронтруннер
    • Како да прилагодите Висуал Студио Цоде
    • 8 Моћни Висуал Студио Цоде Ектенсионс за Фронт-Енд програмере
    • Висуал Студио Цоде: Повећање продуктивности путем управљања кључем
    • Утицај Мицрософт инклузивног дизајна у Висуал Студио Цоде