![]() Now, we run the grunt to initiate the browserSync task that we’ve already set in the config. We also enable ghostMode to sync interactions on the website such as scrolling, and clicking. This configuration will monitor the style.css as well as the index.html, and automatically refresh the browser when it detects a change on these files. Grunt.loadNpmTasks( 'grunt-browser-sync' ) Once installed, load BrowserSync within the Gruntfile.js, this way. Type the following command to install BrowserSync in your working directory: This plugin syncs a number of interactions that occur on the website including page scrolling, populating form fields, and clicking on links.Īll these actions will be reflected in the other browsers and devices as they are happening. We will need to make sure that the grunt-cli is installed as well the plugin, Grunt BrowserSync. Without further ado, let’s see how BrowserSync works. BrowserSync is free which helps if you have little to no budget to work with. Ghostlab, on the other hand, is only available in OS X and Windows. You can use it in Windows, OS X and Linux. Recommended Reading: Viewport Emulation With Chrome’s Device MetricsīrowserSync is open-source and actively developed. There is a Grunt plugin called BrowserSync to perform this, and we are going to show you how to deploy it in your project, in this post. The idea of synchronized testing has emerged to address this situation and make the workflow more streamlined. ![]() Say we have three devices to test the site on, we may end up having to constantly refresh each browser in every of these devices everytime we’ve just made a change which, as you can imagine, is cumbersome. ![]() Testing on multiple devices also pose a problem though. However, nothing beats testing the website on a real device since it provides an environment that’s as close as to our users. We can use screen-size and device emulator in Chrome which is pretty handy. When building a responsive website we’ll need to test it in multiple screen-sizes to make sure that the site layout is rendered properly on those varying screen-sizes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |