Stilly

Stilly

بېكەت باشلىقى

يازمىلىرى
ئەگەشكۈچىلىرى
ئەگەشكەنلىرى
74
32
0

BrowserSync بىلەن تونۇشۇش

BrowserSync بولسا  ھۆججەتلەر(html،js،css،sass،less) نىڭ ھەر ۋاقىت ئۆزگىرىشىنى كۆزىتىپ تۇرىدىغان  ۋە بەتنى ئاپتوماتىك يېڭىلاشنى ئەمەلگە ئاشۇرىدىغان Node.js قىستۇرمىسىدۇر .


ئاۋۋال نەزىرىيە سۆزلەپ ئولتۇرماي BrowserSync نىڭ نىمگە ئىشلىتىدىغانلىقىنى كۆرۈپ ئۆتەيلى .BrowserSync بولسا Node.js قىستۇرمىسى بولغانلىقى ئۈچۈن ئاۋۋال Node.js نى قاچىلىغان بولىشىمىز كىرەك .Node.js قاچىلاشنى ئالدىنقى تېمىلىرمىزدا يازغان . ئۇنداقتا ئىككىنجى قەدەمدە BrowserSync نى قاچىلايمىز . BrowserSync نى تۆۋەندىكى بۇيرۇق ئارقىلىق پۈتۈن دائىرلىك (全局安装) قاچىلاشقا 

بولىدۇ .

npm install -g browser-sync

دىمەك BrowserSync نى قاچىلاش تاماملاندى . بۇ چاغدا browser-sync --help ئارقىلق BrowserSync نىڭ بۇيرۇقلىرىنى كۆرۈپ باقساق بولىدۇ . (ئەسكەرتىش : ناۋادا npm نىڭ سۈرئىتى ئاستا بوپ قالسا cnpm نى ئىشلەتسەك بولىدۇ .)


ئەمدى خالىغان بۇ مۇندەرىجىگە تۆۋەندىكى ھۆججەتلەرنى قۇرۇپ ،خالىغان مەزمۇن يازايلى .

00.png

ھازىر مۇندەرىجىمىزدە index.html ھۆججىتى ۋە style/index.css ناملىق ھۆججەت بار .style/index.css ھۆججىتى index.html ھۆججىتىگە ئۇلانغان . بىز ئەمدى تېرمىنالدا مۇشۇ مۇندەرىجىگە كىرىپ تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىپ BrowserSync ئارقىلىق مۇشۇ مۇندەرىجىدىكى بارلىق ئۆزگىرىشلەرنى كۆزەتسەك (监控) بولىدۇ .

browser-sync start --server --files "style/*.css, *.html"

01.gif

ئەمدى تەھرىرلىگۈچتە index.html ياكى  style/index.css ھۆججىتىنى تەھرىرلەپ كۆرەيلى .دىققەت : بۇ چاغدا تەھرىرلىگۈچنى  يېرىم ئىكرانغا ، تور كۆرگۈچنى يەنى بىر يېرىم ئىكرانغا تەڭشەپ مەشخۇلات قىلسىڭىز ئۈنۈمىنى ھىس قىلالايسىز .تولۇقلىما : بۇ چاغدا BrowserSync ئىككى ئېغىز(端口) دا بىزنىڭ تۈرىمىزنى قوزغىتىدۇ . يەنى بىزنىڭ تۈرىمىز localhost:3000 ئېغىزىدا ، BrowserSync  نىڭ كونتىرول تاختىسى localhost:3001 ئېغىزدا قوزغىلىدۇ 


02.gif



03.gif


ئاخا .....

قاندا پەچەتمىكەن ؟ ئادەتتىكى ئەھۋال بىلەن ئوخشىمايدىغان يىرى . بىز ھۆججەتنى تەھرىرلەپ بولۇپ ، تور كۆرگۈنى يېڭىلىساق ئاندىن ئۈنۈمىنى كۆرەتتۇققۇ شۇنداقمۇ ؟ ھازىر پەقەت ھۆججەتتە ئۆزگىرىش بولسىلا تور كۆرگۈ ئاپتوماتىك يېڭىلىنىۋاتىدۇ . مۇشۇ ئىشنى دەل BrowserSync ئەمەلگە ئاشۇرۇىدۇ . ئەمەلىيەتتە BrowserSync نىڭ ئىقتىدار بۇلارلا ئەمەس . ئەمدى يەنى تۆۋەندىكى ھادىسىگە قارايلى .


04.gif


مەن ئوتتۇرىغا تەھرىرلىگۈچ ئىككى يانغا ئىككى خىل تور كۆرگۈ (google chrome,Firefox) ئاچتىم . خالىغان بىر تور كۆرگۈدە بەتنى تۆۋەنگە سۈرسەم ، يەنى بىر تور كۆرگۈدىكى بەتمۇ ماس ھالدا سۈرۈلدى .دىمەك ماۋۇ ئىقتىدار ئارقىلىق بىرلا ۋاقىتتا كۆپ خىل ئۈسكىنە كۆپ خىل تور كۆرگۈدە بەتنىڭ ئۈنۈمىنى كۆرگىلى بولىدۇ دىگەن گەپ .پىچەتمىكەن ؟ پىچەت ئەمەسمىكەن ...؟ مەيلى .. ئىشقىلىپ ماڭا پىچەت بىلىندى .


BrowserSync ھەققىدە يەنە ئىزدىنىپ باقماقچى بولغانلاغا مانا مۇناسىۋەتلىك ئۇلانمىلار .

ئورگان بېتى : http://browsersync.io

خەنچە بېتى : http://www.browsersync.cn