Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that “If it's not broken, don't fix it. If you've recently considered using a CSS preprocessor, there's no better time to dive in with all the options and helpful tools available.
#FIREFOX LIVERELOAD CODE#
What's a Preprocessor? Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we're all used to. In this article, we'll discuss the 3 most popular ones: Sass, LESS and Stylus. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. You've probably already heard of CSS preprocessors by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because “preprocessor ” just plain sounds intimidating. 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.Media Queries My Link 1 My Link 2 My Link 3 My Link 4 CSS Preprocessors By: Mike the Frog – May 20, 2013 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
#FIREFOX LIVERELOAD INSTALL#
Install Grunt CLI : npm install -g grunt-cli We have to install npm node.js on your machine : sudo apt-get install npm Important : be sure that you are in developer mode, in root project location when you execute the command bellow. less files, and especially the watch that observes the changes of the files and which it is indispensable for the our liveReload 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. Grunt is a JavaScript Task Runner, a tool that allows you to create automated tasks in JavaScript,
#FIREFOX LIVERELOAD HOW TO#
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. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.Įven cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.
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įor those who don't know what is LiveReload, LiveReload monitors changes in the file system. 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. LiveReload 2.3 (or later) or another compatible server is running. I also wanted to mention that the liveReload browser extension is well installed but does not work, ie when I press on a logo, it shows me an error message:Ĭould not connect to LiveReload server.Completed in 0.001s at Wed 16:08:58 GMT+0100īut he doesn't refresh the page,(when i refresh it manually, i see well my changes) is there a configuration to do in grunt or in the server ? I have grunt installed and it works fine i can clean, exec, etc but, when i enter: grunt watch he watch well the changes, example: if i change mycustom.css, he display :įile "pub/static/frontend/Package/theme/fr_FR/css/mycustom.css" changed. I have some problem, i don't know why but the liveReload dont refresh th content changed automatically. I think that when looking for something, the first reflex is to search if there was already the same question as mine that was asked before, and I saw this post and it does not answer my problem! and even more there is not a reliable answer or accepted !ĭoes anyone ever work or still work with the liveReload via grunt ?
I would like to mention that this answer does not answer my question, if someone sees that it is the same thing, I invite him to answer me instead of saying that he is duplicated and we will see if it solves my problem.
0 kommentar(er)
