It's been two days since the post is open and no one has found the answer to my question, and working hard on this topic **I finally found the solution**. So I decided **to publish the complete solution**, the installation of `Grunt` and then `Livereload` and how to configure both together because I found that they are very useful tools for **Magento2** and even more for the **frontend developers**
###Let's start:
**What is LiveReload ?**
For those who don't know what is **LiveReload**, LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.
Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.
I find this beautiful because for a developer Magento when it is in full development or integration he is obliged to refresh the page manually to see the result, then he goes back on his code he update, he saves, he clean the cache, then he returns to the browser , he refresh the browser and so on, while with the **liveReload** it's over all that, it is just enough to save the update and 'Hoop' magically the content that you have changed instantaneously appear without refreshing the browser and without cleaning the cache, deploying the static-content either but for the cache, you also need **Grunt** but I explain in detail how to put this.
**What is Grunt ?**
Grunt is a **JavaScript Task Runner**, a tool that allows you to create automated tasks in JavaScript,
it is very useful for `Magento 2` because by its configuration, it allows us to removes the theme related static files in the `pub/static` and `var` directories, set up the `.less` files, and especially the `watch` that observes the changes of the files and which it is indispensable for the our `liveReload`
**Now the installation :**
###Grunt:
> **Important** : be sure that you are in `developper mode`, in `root` project location when you execute the command bellow.
>
> Rename the `package.json.sample` to `package.json`,
> `Gruntfile.js.sample` to `Gruntfile.js`
1. We have to install [npm node.js][1] on your machine : `sudo apt-get install npm`
2. Install Grunt CLI : `npm install -g grunt-cli`
3. Refresh nodejs : `npm install`
4. To make sure that the **npm** is well installed the `npm -v` should output something like: `5.7.1`, for **Grunt** `grunt --version` should output something like: `grunt-cli v1.2.0`
5. Grunt theme configuration: go to : `dev/tools/grunt/configs/themes.js` then add your current theme name that you are used, assuming that your theme name is : `Prince/amir` in : `app/design/frontend/Prince/amir` so you add the following in `module.exports`like this:
module.exports = {
...
prince: { // for the clean command
area: 'frontend',
name: 'Prince/amir', //Vendor/theme
locale: 'fr_FR', //locale
files: [
'css/styles-m',
'css/styles-l',
'css/custom' // for custom.less for exemple
],
dsl: 'less'
...
},
6. You can use `grunt clean:prince` to removes the theme related static files in the `pub/static` and `var` directories.
7. Save
. [More informations][2]
###LiveReload:
1. `npm install -g livereload`
2. To make sure that the liveReload is well installed, `livereload -v` should output the version something like : `0.7.0`
3. Install the `LiveReload browser extension`, available for **Chrome** and **Firfox**.
4. Add the script line bellow inside `<head>` tag in `default.xml` or `default_head_blocks.xml` of your current theme exemple : `app/design/frontend/Prince/amir/Magento_Theme/layout/default_head_blocks.xml`
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
<script src="http://200.120.00.01:35729/livereload.js" src_type="url"></script>
</head>
</page>
Here as you see there is an **IP**(200.120.00.01) address plus the **port**(35729) plus **livereload.js** file
**So what to do:** replace this `IP` with your IP project, the `port` remains the same dont change it `35729` and the `livereload.js` you copy it in your root project, you can get it from the livereload installation(remember we installed it before) the path is: `/usr/lib/node_modules/livereload/ext/livereload.js`, or from this [github][3].
###it's time to practice:
1. We lunch the **Grunt watch** to monitor our files changes.
2. Check if the **LiveReload browser extension icon** is well activated, in firefox the icon comes green, in Chrome the small dot inside the circle becomes full black
**important :** if everything is good, if you enter in your browser your `IP:35729` exemple : `200.120.00.01:35729`, you'll see some welcome message like:
> tinylr "Welcome"
>version "0.2.1"
3. Open your custom.css for exemple then change something then save, here you'll see in `grunt watch` some new line appears tells that this file has been changed something like:
> File "pub/static/frontend/Prince/amir/fr_FR/css/custom.css" changed.
and look now your browser, Hoop the item that you just changed appeared and updated instantly without reloading the page, also without cleaning the cache or deploying the static-content, everything is done automatically.
here I am finished, I hope you will enjoy this, it is really useful tool.
Good luck.
[1]: https://nodejs.org/en/download/package-manager/
[2]: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html
[3]: https://github.com/livereload/livereload-js/tree/master/directories