Revisions to LiveReload configuration via Grunt

deleted 1 character in body

Source Link

edited Jul 19, 2022 at 12:13

5k
2
20
35

Important : be sure that you are in developperdeveloper 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

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

Important : be sure that you are in developer 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

Changed spelling and added more accurate anwser

Source Link

edit approved Dec 9, 2020 at 8:30

Haerriz

681
8
21

Run grunt clean, grunt less, grunt execute (sometimes magento doesn't work well with livereload if it has not been executed before) and then

We lunchlaunch the Grunt watch to monitor our files changes.
Check if the LiveReload browser extension icon is well activated, in firefoxFirefox the icon comes green, in Chrome the small dot inside the circle becomes full black

We lunch the Grunt watch to monitor our files changes.
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

Run grunt clean, grunt less, grunt execute (sometimes magento doesn't work well with livereload if it has not been executed before) and then

We launch the Grunt watch to monitor our files changes.
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

edited body

Source Link

edited Mar 3, 2020 at 15:09

PЯINCƎ

11.7k
3
26
82

We have to install npm node.js on your machine : sudo apt-get install npm
Install Grunt CLI : npm install -g grunt-cli
Refresh nodejs : npm install
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

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.exportslike 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 exempleexample 
     ],
     dsl: 'less'
 ...
 },

You can use grunt clean:prince to removes the theme related static files in the pub/static and var directories.
Save . More informations

npm install -g livereload
To make sure that the liveReload is well installed, livereload -v should output the version something like : 0.7.0
Install the LiveReload browser extension, available for Chrome and Firfox.

Add the script line bellow inside <head> tag in default.xml or default_head_blocks.xml of your current theme exempleexample : 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>

important : if everything is good, if you enter in your browser your IP:35729 exempleexample : 200.120.00.01:35729, you'll see some welcome message like:

Open your custom.css for exempleexample 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:

We have to install npm node.js on your machine : sudo apt-get install npm
Install Grunt CLI : npm install -g grunt-cli
Refresh nodejs : npm install
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

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.exportslike 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'
 ...
 },

You can use grunt clean:prince to removes the theme related static files in the pub/static and var directories.
Save . More informations

npm install -g livereload
To make sure that the liveReload is well installed, livereload -v should output the version something like : 0.7.0
Install the LiveReload browser extension, available for Chrome and Firfox.

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>

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:

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:

We have to install npm node.js on your machine : sudo apt-get install npm
Install Grunt CLI : npm install -g grunt-cli
Refresh nodejs : npm install
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

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.exportslike 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 example 
     ],
     dsl: 'less'
 ...
 },

You can use grunt clean:prince to removes the theme related static files in the pub/static and var directories.
Save . More informations

npm install -g livereload
To make sure that the liveReload is well installed, livereload -v should output the version something like : 0.7.0
Install the LiveReload browser extension, available for Chrome and Firfox.

Add the script line bellow inside <head> tag in default.xml or default_head_blocks.xml of your current theme example : 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>

important : if everything is good, if you enter in your browser your IP:35729 example : 200.120.00.01:35729, you'll see some welcome message like:

Open your custom.css for example 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: