Speedup Web Development Workflow With BrowserSync

このエントリーをはてなブックマークに追加

 

BrowserSync a Node.js module that makes your life easy with testing your codes in multiple browser in same time.

Like the LiveReload plugin BrowserSync monitor (watch) the file system and reload web page upon file save. But the unice things about BrowserSync when you test a webpage in one browser like opening Menus, fill-up a form, scroll to a location… it will sync the actions across all the browsers that have a open window with the corresponding webpage.

 

Up And Running BrowserSync

 

            As BrowserStack is a Node.js module, if you don’t have Node.js installed you have to install it first.

 

            Node.js have installer for Windows, MacOS and also for Linux. Node.js can be download from https://nodejs.org/download/. Please read their documentation for installing Node.js

           

            If you already have Node.js or you just install Node.js you can verify Node.js installed correctly by running node --version or nodejs --version or node -v. This commands very depending on your OS and Node.js Version.

 

            We will use Node.js package Manager (NPM) to install BrowserSync from it’s repository.

Open a Terminal window or Command Prompt and run the following command to install BrowserSync:

                        npm install -g browser-sync

This will install BrowerSync globally in your OS.

 

            After installation is done you can check it by running browser-sync --version. This will return the version of installed BrowerSync.

 

            Now we can use BrowserSync for our web development projects.

 

Testing BrowserSync

           

            Make a test folder in your workspace and navigate to the folder with your command line tool. Then make some files eg.

 

                  Test(folder)

                   |--index.html

                   |--css(folder)

                        |--style.css

                   |--js(folder)

                        |--script.js

 

            Now from your command line run the following command to test the files inside this ‘Test’ folder:

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

 

            This will immediately open your default browser with the localhost url and load the files. This also inject necessary javascripts for livereload on save and and sync actions across the browsers that loaded with the same page.

 

            To test dynamic sites (site made with sarver side language) like Joomla, WordPress or any other system that need server side interpreter (Like php), database system etc. we have to warp the vhost/sites base url with BrowseSync’s Proxy URL. To do that run the following command:

 

            browser-sync start --proxy localhost/path-to-your-script/--files *.php, css/*.css, js/*.js

           

            BrowserSync have also have a nice web based ui. Which can be accessible via browser. You can find BrowserStack’s ui URL from the command line output after the BrowserSync starts.

Happy Browser Testing

For More Information and Uses Guideline Please check BrowserSync Documentation. More

Mhamudul Hasan
著者: Mhamudul Hasan
PHP Developer

ぜひ下記のはてブ、いいね、シェアなどを押してもらえると、毎週1回MVB(再優秀ブロガー)を決定してて、選ばれるとご褒美がもらえるのでご協力お願いします!!
このエントリーをはてなブックマークに追加