14 „Javascript“ redagavimo įrankiai

„Javascript“ redagavimas yra metodas, kuris kondensuoja jūsų scenarijų į daug mažesnį pėdsaką. Jūs prarandate žmogaus suprantamumą, bet išsaugote didelį dažnių juostos plotį - galiausiai, „Javascript“ skirta jūsų naršyklei ne jūsų vartotojams.

Dauguma gamybos svetainių naudoja „Javascript“ redagavimą, tačiau tai labai skiriasi. Nuo paprastų internetinių konverterių iki visapusiškesnių GUI įrankių, skirtų komandinės eilutės sąsajoms, mūsų parinktys yra gana įvairios. Šiame straipsnyje apžvelgsime kaip veikia „Javascript“ redagavimo darbai, kaip mes galime ją sukurti į mūsų darbo eigą ir kokie yra kasybos privalumai ir trūkumai.

Kaip veikia Minifikacija

Geriausias būdas sužinoti, kas vyksta, kai redaguojate kodą, yra pažvelgti į „UglifyJS Github“ saugyklą. Šis scenarijus naudojamas daugelyje interneto konverterių, taip pat GUI įrankių ir komandinės eilutės įrankių, tokių kaip Grunt. Štai keletas pakeitimų, kurie taikomi, kad jūsų kodas būtų trumpesnis:

Pašalina nereikalingą erdvę
Sutrumpina kintamųjų vardus, paprastai atskirus simbolius
Prisijungia iš eilės var deklaracijų
Konvertuoja masyvus į objektus, kur įmanoma
Optimizuojama, jei pareiškimai
Apskaičiuojamos paprastos pastovios išraiškos
ir kt.

Kaip greitas pavyzdys, čia yra funkcija, kuri iš esmės rašo tam tikrą tekstą.

 funkcija hello (text) document.write (tekstas);

Sveiki („Sveiki atvykę į straipsnį“);

Pažiūrėkime, kas atsitinka, kai mes tai ištaisome. Atkreipkite dėmesį į tarpų pašalinimą ir įtraukimą bei teksto kintamojo sutrumpinimą.

funkcija hello (e) document.write (e) hello („Sveiki atvykę į straipsnį“)

„Javascript Minification Tools“

Įrankiai, naudojami „Javascript“ redagavimui, gali būti plačiai suskirstyti į 3 grupes: internetiniai įrankiai, GUI įrankiai ir komandinės eilutės įrankiai.

Naudodamiesi internetiniais įrankiais paprastai reikia įklijuoti kodą ir nedelsiant kopijuoti rezultatą.
GUI įrankiuose dažnai yra daug daugiau funkcijų; JS minifikacija yra tik nedidelė dalis to, ką jie daro.
Komandinės eilutės įrankiai taip pat paprastai yra išsamesni, todėl jie yra moduliai.

Internetiniai įrankiai

javascript-minifier.com yra gražus įrankis su API
„Online YUI Compressor“ yra galingesnis įrankis, kuriame naudojamas „YUI“ kompresorius, taip pat yra daug galimybių ir CSS redagavimo galimybės.
„jscompress.com“ yra „ne-maistingas“ reduktorius, bet jis atlieka darbą
jsmini.com yra dar vienas paprastas, bet visiškai naudingas pasirinkimas

Didelis dalykas, susijęs su internetiniais įrankiais, yra greitis, kuriuo galite dirbti su jais. Kompleksinės GUI ir komandinės eilutės įrankiai greičiau ištaiso, bet jums reikia sukurti projektą, kad jis tinkamai veiktų. Šių priemonių trūkumas yra tas, kad jos dažniausiai yra teikti mažai arba visiškai nepritaikyti tinkinimo, bent jau lyginant su komandinės eilutės įrankiais.

GUI įrankiai

Koala yra nemokama priemonė, skirta mažesniam, SASS kompiliavimui, JS redagavimui ir daug daugiau
Prepros yra mokama programa, kuri suteikia jums dar daugiau galimybių
Codekit yra mano pasirinkta programa. Tai mokama „Mac“ programa, kuri siūlo kodų sudarymą, redagavimą, peržiūros serverį, „bower“ paketo valdymą ir daug daugiau
„AjaxminGui“ yra nemokama, vienintelė „Windows“ priemonė, skirta jūsų JS redagavimui
„UltraMinifier“ yra nemokama programa, skirta „OS X“, kuri sujungia CSS ir JS su vilkimo ir nuleidimo funkcija
Mažesnis yra OS X įrankis, kuris sujungia ir susieja failus

Čia minėjau dviejų tipų GUI programas. Paprasti vienos pakopos redagavimo programos yra panašios į jų internetinius partnerius. Jie yra labai greitai naudojami, nes jūs galite tiesiog perkelti failus į juos, nereikia jokių sąrankos. Tai pasakė, jie suteikti praktiškai jokio pritaikymo.

Didesni GUI įrankiai („Prepros“, „Koala“, „Codekit“) puikiai tinka valdant projektus ir suteikiant jums šiek tiek daugiau galimybių suspaudimui, bet jie daro reikia šiek tiek sąrankos. Greitas JS minifikavimas užtruks apie 20 sekundžių, kurios yra daug, palyginti su 2 sekundžių internetu arba paprastais GUI įrankiais.

Kita vertus, jie siūlo daugiau funkcijų ir suteikia jums automatizavimo. JS failai bus ištrinti kiekvieną kartą, kai juos išsaugosite, nereikės jų rankiniu būdu sureguliuoti. Jei kuriate „Javascript“, tai tikrai yra kelias.

Komandinės eilutės įrankiai

Minify skirtas tiems, kurie nori redaguoti JS iš komandų eilutės, bet nenorite nieko sukurti iš „Grunt“ ar „Gulp“
„Uglify.js“, kurį jau minėjome, taip pat yra kaip atskiras komandų eilutės įrankis
„Grunt“ turi „Javascript“ redagavimo išplėtimą, pavadintą „grunt-osallist-uglify“
„Gulp“ taip pat turi JS minifikaciją, naudodama „Uglify.js“ per gulp-uglify

Komandinės eilutės įrankiai yra ne tik „Linux“ geeks! Aš nesu didelis terminalo, bet, pavyzdžiui, „Grunt“ ir „Gulp“ sukūrimas yra lengva, nes jie puikiai dokumentuojami. Komandų eilutės įrankių viršuje yra nuostabus lankstumas, kurį turite nuo pasirinkimo iki išėjimo.

Kita vertus, yra šiek tiek mokymosi kreivės. Prisijunkite prie komandų eilutės trunka šiek tiek (ne daug) praktikos, kurią rasite ribojančiai prieš pradėdami naudotis nauda.

Apžvalga

Jei esate naujas interneto kūrimas, rekomenduoju vieną iš pirmųjų trijų GUI įrankių. Jie padės jums valdyti savo projektus apskritai ir pasiūlyti daug daugiau nei tik JS redagavimas.

Jei esate patyręs profesionalas, turbūt turėtumėte apsvarstyti Grunt arba Gulp kadangi tai leidžia valdyti automatizavimo užduotis. Jei reikia greitai redaguoti scenarijų nesudarius projekto, komandinės eilutės įrankiai gali sutaupyti daug laiko.

Kiekviena įrankių grupė turi savo privalumus ir trūkumus ir, tiesą sakant, jūs galiausiai naudosite vieną ar kitą. Turėkite omenyje, kad gamybos aplinkoje visada turėtumėte sumažinti „Javascript“ ir „CSS“!