![]() 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. It benefits by having a web standardization that is used in all major browsers, and therefore has an exposed JavaScript API.įor the Node.Hello readers welcome to my new post on Magento 2. WebSockets is an implementation of the fabled ‘push notification’ technology of keeping a long-standing open connection between server and client for immediate synchronization. Then I realized I could pretty easily roll my own lightweight solution using WebSockets. I had used gulp-livereload in the past to solve this issue for traditional front-end web app development, but it didn’t work for refreshing the background script. With a background page or script running, you constantly have to flip between browser tabs and/or windows to do manual refreshes every time you want to see your changes. I’ve been tinkering on a Google Chrome Extension lately and I quickly discovered the annoying obstacle of constantly needing to reload the thing. It’s blazing-fast pipe-streaming architecture combined with its extensibility and ease of configuration make it, dare I say, simply delightful to use.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |