12/24/2023 0 Comments Livereload chrome change portIn a traditional process, you have to hit f5 or the refresh button of your browser to ask it to reload the changes you make. Live reloading is a technic in web development that allows a developer to see the result of his code without having to refresh his browser. I am zooboole, your little tutor in this tutorial. The reason why I am focusing on this particular aspect of gulp is that it\'s tricky(understand complex) and many people want to use it. Today we\'ll be talking of live reloading. But we learnt a lot in terms of how to set up our gulp file, compile sass, minify our css, and uppon all watch all tasks for any changes made. In part 2, we weren\'t able to tackle the live reloading because it was getting too long. In this series we\'re discovering bit by bit the power of gulp workflow and how we can make use of it to automate our traditional habits. See you on my next post, till then take care.Hi everyone, welcome to the third part of our tutorial on gulp. Thanks for reading this post and feel free to drop your comments, will be happy to read them. This is the most suitable way to integrate a theme. I hope this will help to integrate theme easily. You will see in grunt watch command toolbar pub static file updates and show the updated file.įinally, the changes appear quicky on the browser web page without the page reload. Now open your _extend.less file and add/edit the CSS changes and save it.You can see the inner dot darken after enabling the extension. You have to enable the LiveReload extension from your browser toolbar.First of all, You have to run the grunt watch command in the command line to monitor the file CSS changes.Click on the LiveReload toolbar button to enable or disable LiveReload.This icon indicates LiveReload status of the current tab (unavailable / disabled / enabled, connecting / enabled, connected).LiveReload toolbar button is located in the main toolbar in Chrome, Safari and in the Add-on Toolbar of Firefox (at the bottom).You can download the livereload.js from here. Add this JS File on the root of your project: livereload.js.Your Port Number(Mostly, It remains the same): 35729.On the above code, you can see the src URL add the JS file. To do this, run the following command in a command promptĬopy Code Copied Use a different Browser Install the Grunt CLI globally on your server.Now, first of all, We are starting to install the grunt on your local or development server. Magento 2 contains manual tasks that you only need to configure.It uses a command-line interface to run custom tasks specified in a file (known as a Gruntfile). This method was used to perform regular tasks like minification, compiling, unit testing and linting automatically.Grunt (Grunt JavaScript Task Runner) is a tool that lets you build automated tasks in JavaScript.This reduced the time to clean the cache, either deploying the static-content, but you do need Grunt installed on the server.It’s a better way to develop a Magento website using this kind tool because for a Magento developer it’s to much time-consuming process to change CSS files, clean the cache and refresh the page manually to see the result, then he again goes back and does some other changes on CSS then repeat the same process and so on, while with the Liverelaod you to just save and check on the browser and all the changes has applied on the browser web page.When you save a file, it will be pre-processed as required, and the browser will be refreshed. To utilize LiveReload, you would like a client (this script) in your browser and a server should be run on your development machine.LiveReload is a browser extension for web developers to easily develop web design.Before installed Grunt please verify that Node.js already exists on a system.Set your Magento 2 to the developer mode.So without further a do, lets dive into the post.īut before starting, there are following prerequisites which must be met. I this post, I will be guiding you through what is LiveReload, what is Grunt, how to install Grunt, how to install LiveReload, and finally how to work with LiveReload. Considering the issue I faced and solution I got after doing some research and development, I thought of sharing it with my virtual colleagues like you. I have written this post while working on one of my recent projects. Hello readers welcome to my new post on Magento 2.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |