{"id":3070,"date":"2017-07-12T11:00:42","date_gmt":"2017-07-12T16:00:42","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2341"},"modified":"2017-07-12T11:00:42","modified_gmt":"2017-07-12T16:00:42","slug":"a-solid-tool-for-web-dev-browser-sync-on-a-mac","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/a-solid-tool-for-web-dev-browser-sync-on-a-mac\/","title":{"rendered":"A Solid Tool for Web Dev – Browser-Sync on a Mac"},"content":{"rendered":"
What is Browser-Sync<\/h5>\n

Browser-sync is a tool that helps synchronize your browser with any updates you make to the text file immediately after saving. Once you start coding more often, you get acclimated to adding code, refreshing the browser, and saving the files. Refreshing the browser manually can get laborious and just takes more time to do something you need to repeat anyway. Browser-sync is a great tool to close that gap so you don\u2019t have to worry about refreshing your browser.<\/p>\n

How does it work? It basically links your text files to your browser window so that every time you save the file, it refreshes the browser window. Interestingly enough, it only refreshes after saving changes to the HTML file.<\/p>\n

Personally I tried to learn this myself and was so confused by the articles that were out there. This probably has to do something with my limited understanding of how to use tools like Terminal. If you don\u2019t already know what Terminal <\/a>\u00a0is, it\u2019s basically a way to control the operating system but in a really bare bones fashion. In case the original layout and color scheme is too much for you, you can change it and make it easier on the eyes. Keep in mind that this is only for Apple Operating Systems.<\/p>\n

Using Browser-Sync<\/h5>\n

Now, we\u2019re going to go over how to use Browser-Sync successfully. Here are the instructions:<\/p>\n

1. Copy and paste the following code into the tag of your HTML file
\n\"Browser<\/a><\/p>\n

2. Use TERMINAL to navigate into the folder that you want the Browser-Sync to work for by using this phrase: cd [enter path] . If you don\u2019t know if you\u2019re in the right place, type \u201cls\u201d and TERMINAL will list the files that are currently in the file that you\u2019ve landed in.<\/p>\n

\"Navigating<\/a><\/p>\n

3. Use TERMINAL to start up Browser-Sync by typing the following all in one line:
\nbrowser-sync start –server –files “stylesheets\/*.css, *.html”<\/p>\n

4. If the connection is not happening, make sure “HOST” NUMBER in the script (part of the same code copied and pasted into the tag of the HTML file. Hint: where it says \u201cHOST:\u201d) is the same as what’s in the address bar of the window that pops up after the previous command line. If it isn’t the same, change the number to make it the same, then save the file. Afterwards, refresh the corresponding browser tab. It will stay connected and refresh any time you save the HTML file.<\/p>\n

\"Address<\/a>

Address Bar image<\/p><\/div><\/div>\n

\"Browser<\/a><\/p>\n

Conclusion<\/h5>\n

I used several articles to learn how to use Browser-sync. One comes from the actual people who created Browser-sync [https:\/\/www.browsersync.io\/docs\/command-line<\/a>], one from Stackoverflow [http:\/\/stackoverflow.com\/questions\/28962528\/browsersync-cannot-get<\/a>], and another from a blog [http:\/\/damonbauer.me\/browsersync\/<\/a>]. If you\u2019re new to this, it can be daunting but don\u2019t let that stop you from improving your workflow. Happy coding!<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

What is Browser-Sync<\/p>\n

Browser-sync is a tool that helps synchronize your browser with any updates you make to the text file immediately after saving. Once you start coding more often, you get acclimated to adding code, refreshing the browser, and saving […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2921,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,192,193],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3070"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3070"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3070\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2921"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}