<commit_before>---
layout: post
title: Web Dev - Browsersync
description: Web Dev - Browsersync
modified: 2016-06-27
tags: [web dev]
comments: true
image:
  feature: abstract-11.png
---
[Browsersync](https://www.browsersync.io) is a web server to support automatic reloading for easy web development. Very simple and easy to use.

## Installation of browsersync on Ubuntu

### Install Node.js 

Refer to [my article](http://hochulshin.com/linux-nodejs-installation/) to install node.js on ubuntu

### Chrome

Chrome browser should be installed.
 
### Browsersync

Let's use npm to install browsersync as below:

> npm install -g browser-sync

## How to use browsersync

### Sample code

1. Make a project folder
2. make a html file as the following.

index.html

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>BrowserSync</title> 
</head>
<body>
  <h1> BrowserSync </h1>
</body>
</html>
```

### Run browsersync

In the project folder, type the following command. 

> browser-sync start --server --directory --files "*"

If you can see that a new page is launched on a new chrome tab, it would succeed. Select the example file.

### Test browsersync 

Modify the html file and save it. The page on the chrome tab must be refreshed automatically. 

```html
  <h1> BrowserSync update! </h1> 
```<commit_msg>Update 2016-06-27-webdev-browsersync.md<commit_after>---
layout: post
title: Web Dev - Browsersync
description: Web Dev - Browsersync
modified: 2016-06-27
tags: [web dev]
comments: true
image:
  feature: abstract-11.png
---
[Browsersync](https://www.browsersync.io) is a web server to support automatic reloading for easy web development. Very simple and easy to use.

## Installation of browsersync on Ubuntu

### Install Node.js 

Refer to [my article](http://hochulshin.com/linux-nodejs-installation/) to install node.js on ubuntu

### Chrome

Chrome browser should be installed.
 
### Browsersync

Let's use npm to install browsersync as below:

```
npm install -g browser-sync
```

## How to use browsersync

### Sample code

1. Make a project folder
2. make a html file as the following.

index.html

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>BrowserSync</title> 
</head>
<body>
  <h1> BrowserSync </h1>
</body>
</html>
```

### Run browsersync

In the project folder, type the following command. 

```
browser-sync start --server --directory --files "*"
```

If you can see that a new page is launched on a new chrome tab, it would succeed. Select the example file.

### Test browsersync 

Modify the html file and save it. The page on the chrome tab must be refreshed automatically. 

```html
  <h1> BrowserSync update! </h1> 
```
{'fraction_non_alphanumeric': 0.11823573017049667, 'fraction_numerical': 0.015567086730911787, 'mean_word_length': 3.8110516934046346, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 33, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6068805', 'n_tokens_mistral': 934, 'n_tokens_neox': 851, 'n_words': 343}