Сокавыціскалка - CSS і JavaScript Packaging Tool

Для лепшай прадукцыйнасці, CSS і JavaScript павінны абслугоўвацца з выкарыстаннем як некалькі запытаў і байт, як гэта магчыма. Сокавыціскалка новы інструмент каманднага радка, што дазваляе шляхам развязвання залежнасцяў, зліцця і minifying файлаў. Ён нават можа праверыць сінтаксіс, дадаць кэш парушальнікаў да і цыкл актыву хастоў URL-адрасы ў CSS файлаў і многае іншае.

Фон

Для вэб-прыкладанняў ёсць крычаць разрыў паміж развіццём перадавога вопыту і ўкаранення лепшых практык. У мэтах дасягнення максімальнай прадукцыйнасці (у інтарэсах як карыстальнікаў і сервера), вы павінны імкнуцца ўвесці ў якасці некалькіх CSS і JavaScript файлы можна на кожнай старонцы - у ідэале толькі адзін з кожнай. (Цягавая ў некалькі файлаў асінхронна ў парадку, так як ён не ціснуць на ваш першапачатковы рэндэрынгу).

Распрацоўшчыкі звычайна аддаюць перавагу працаваць з нейкай крыніца арганізацыі код, выдатны ад "аднаго CSS файла, адзін файл JavaScript". Акрамя таго, убудаваная дакументацыя надзвычай выгадна як для CSS і JavaScript кода. З Сокавыціскалка, вы можаце арганізаваць свой ??код і тых, якія, як вы хочаце, і дадаць ва ўсе дакументы вы можаце прыдумаць. Калі вы будзеце гатовыя пайсці жыць, вы можаце проста зрабіць:

$ juicer merge stylesheets/main.css
Produced stylesheets/main.min.css from
  stylesheets/framework/reset.css
  stylesheets/framework/grid.css
  stylesheets/skins/midnight.css
  stylesheets/main.css

$ juicer merge javascripts/app.js
Produced javascripts/app.min.js from
  javascripts/prototype.js
  javascripts/lightbox.js
  javascripts/app.js

У выніку файлы будуць паменшаная на YUI Compressor, ідэальна падыходзіць для вытворчых асяроддзяў.

Ўстаноўка

Для таго каб выкарыстаць сокавыціскалак, у Вас павінен Ruby і RubyGems. Калі вы жадаеце выкарыстоўваць YUI Compressor для minification (або JSLint для праверкі сінтаксісу JavaScript), вы таксама павінны будзеце Java ў вашай сістэме.

Пасля таго як вы атрымалі вашу залежнасць прамая, вы можаце ўсталяваць Сокавыціскалка вось так:

$ gem install juicer
$ juicer install yui_compressor
$ juicer install jslint

Дзве апошнія радкі выкліча Сокавыціскалка для загрузкі і распакавання YUI Compressor, Rhino (Mozilla JavaScript рухавічок напісаны на Java) і JSLint.

Абнаўленне

Калі ў вас узніклі праблемы з усталяваннем Сокавыціскалка выкарыстаннем APT прапанаваная версія Ruby, паспрабуйце наступнае:

sudo apt-get install build-essential
sudo apt-get install ruby1.8-dev

Калі вы выкарыстоўваеце Ruby 1.9, замяніць з ruby1.9-Dev.

Зараз, калі вы і працуе, давайце паглядзім на juicer merge, найбольш важным інструментам сокавыціскалак. Увогуле, можна аб'яднаць і памяншаць CSS і JavaScript файлаў, але гэта яшчэ не ўсё, чым толькі гэта.

CSS файлы

Зліццё аднаго ці некалькіх файлаў стыляў так жа лёгка, як

juicer merge myfile.css myotherfile.css css/third.css

Вы можаце пазначыць адвольнае колькасць файлаў, але часта бывае дастаткова, сокавыціскалкі могуць дазваляць залежнасці і далучыцца да ўсіх выяўленыя файлы.

Зліццё з залежнасцямі

Залежнасці лёгкія для файлаў стыляў, яны ўжо забяспечваюць @import дырэктывы. Сокавыціскалка чытае @import дырэктывы і замяняе іх змесціва файла на якія яны спасылаюцца ў генераваныя.

Кэш Busters

Як тлумачыцца ў мой нядаўні пост на загаловак Expires, кэш парушальнікаў з'яўляюцца маркеры дададзены ў URL, каб зрабіць яго ўнікальным, у выніку чаго браўзэры для загрузкі спасылкі зместу, нават калі арыгінальны URL ўжо чытаць і кэшаваньня дадзеных. Кэш парушальнікаў з'яўляецца тое, што робіць далёкім будучыні Expires загалоўка працаваць на практыцы.

Сокавыціскалка падтрымлівае абодва выгляду кэша Busters я апісаў раней:

$ juicer merge file.css

body {
    background: url(../images/bodybg.png?jcb=1234567890);
}

$ juicer merge -c hard file.css

body {
    background: url(../images/bodybg-1234567890.png);
}

Для кэша Busters, сокавыціскалка дадае пазнаку апошняга часу рэдагавання на файл (ён жа mtime ).

URLs

Усе адносныя URL-адрасы апрацоўваюцца параўнальна з CSS файла. Калі вы карыстаецеся абсалютныя URL (т. е. /images/logo.png ) у вашым CSS-файлы, неабходна, каб Сокавыціскалка ведаю, што каталог для апрацоўкі гэтых параўнальна ад таго, каб дадаць кэш парушальнікаў. Гэта можа быць зроблена шляхам -d ( --document-root) варыянт.

Вы можаце таксама выкарыстоўваць --document-root ў супрацоўніцтве з --relative-urls або --absolute-urls для таго, каб пераўтварыць усе URL, альбо адноснай (самы кароткі шлях з CSS-файл) або абсалютны URL. Адносны URL-адрасы ў выніку выхадны файл заўсёды будзе па адносінах да выхадны файл. Гэта азначае, што:

$ juicer merge -o dist/ main.css

Will cause images/logo.png in the original file to be converted to ../images/logo.png in the generated file ( dist/main.min.css).

Актываў хастоў

Большасць браўзэраў толькі запампаваць 2 файла паралельна з аднаго дамена. Па гэтай прычыне, выкарыстоўваючы 2 ці 3 абласцей дастаўкі статычнага актываў можа паскорыць ваш сайт. Сокавыціскалка падтрымлівае гэты метад, які дазваляе паказаць актываў хастоў, а затым выкарыстоўваць іх раўнамерна на працягу вашага CSS:

$ juicer merge -h http://assets1.example.com,http://assets2.example.com main.css

Гэта прывядзе да прыкладна палова URL-адрасы ў main.css для спасылкі http://assets1.example.com, а іншая палова http://assets2.example.com.

JavaScript файлаў

Для файлаў JavaScript, сокавыціскалка робіць тое ж самае. Аднак, JavaScript ня мае залежнасць пабудаваць такія як CSS ' @import. Акрамя таго, сокавыціскалка прапануе праверыць якасць JavaScript код, выкарыстоўваючы JSLint. Напрыклад, па змаўчанні, сокавыціскалка не будзе памяншаць файлы, калі яны праходзяць JSLint. Гэта можа быць перавызначаны, але, як правіла, добрай ідэяй, паколькі гэта дапаможа вам пазбегнуць праблем, выкліканых minification.

Зліццё з залежнасцямі

Так як JavaScript не мае @import заяву, сокавыціскалка прыносіць свой ??уласны дырэктывы да стала, @depends дырэктывы. Гэта рэальна проста:

/**
 * @depends prototype.js
 * @depends widgets/lightbox.js
 */
(function(global) {
    // Your code here
})(this);

Калі вам не падабаецца S, вы таксама можаце выкарыстоўваць @depend. @depend/@depends прымае шлях адносна JavaScript сам файл, і на зліццё, атрымлівае замяніць змесціва гэтага файла.

Сінтаксіс праверкі

juicer merge выкарыстоўвае JSLint для КК над файламі JavaScript. Калі папярэджанне выяўлена, сокавыціскалка перапыняе і кажа вам, што гэта няправільна. Калі вы хочаце працягнуць зліццё і minifying ў любым выпадку (не рэкамендуецца), вы можаце перадаць Сокавыціскалка -i варыянт:

 $ juicer merge -i app.js Verifying app.js with JsLint Problems detected Lint at line 15 character 2: Missing semicolon. } Problems were detected during verification Ignoring detected problems Produced app.min.js from app.js 

Калі вы проста хочаце праверыць файл (а не зліцця/памяншаць яго і так далей), вы можаце выклікаць juicer verify app.js

Некаторыя меркаванні па Зорачкі

Тыя з вас, якія звяртаюць увагу на сайты, як ajaxian.com можа зразумець, што сокавыціскалка выглядае як зорачкі, зусім нядаўна выпусціла Сэм Стывенсан. Справа ў тым, для JavaScript, сокавыціскалка некалькі, як зорачкі. Я паняцця не меў, што збіраўся паверхні, і шчыра кажучы, я думаю, Зорачкі выглядае даволі халаднавата.

Ва ўсякім выпадку, Зорачкі прыняў ўсё гэта ў трохі іншым напрамку (ці крыху далей, у залежнасці). Зорачкі робіць некаторыя рэчы Сокавыціскалка не робіць, і сокавыціскалка робіць некалькі Зорачкі рэчы не робіць. Гэта асабліва актуальна для файлаў стыляў, якія я не думаю, што Зорачкі Touch на ўсіх.

Планы на будучыню

Многае, як зорачкі праекта робіць, я планаваў Rails плягін, які замяняе javascript_include_tag і stylesheet_link_tag памочнікаў з Сокавыціскалка уключаны іх. Я думаю, што важна для лячэння CSS файлы таксама, так што я, верагодна, зрабіць гэта вельмі хутка.

Дакументацыя пакалення з'яўляецца яшчэ адной асаблівасцю я хацеў, каб дадаць да Сокавыціскалка, як juicer doc, які можа генераваць API дакументацыі з выкарыстаннем JSDoc, YUI Doc і іншыя.

Я планую дадаць больш minifiers занадта; ўпакоўшчык і JSMin два відавочных інструментаў для дадання падтрымкі.

Акрамя таго ёсць некаторыя свабодныя думкі, але я вярнуся да вас, калі яны складаюцца. У той жа час я спадзяюся, вы знойдзеце Сокавыціскалка карысным, і я хацеў бы зваротную сувязь! Дадаць каментар, відэльцы мяне на Github, паведаміць пра памылку ў маяк, або адправіць мне па электроннай пошце (christian@cjohansen.no).