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 ? Be careful not to fall into infinite-loop trap when one change triggers another and another… Also note that grunt watch will run until you cancel the process, and with that in mind it should be put as the last task in the array.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. Note the order at which tasks run, especially when you have multiple files. You can now try making some change to main.scss file and upon save you should see automatic conversion to main.css. If we just run grunt watch all the subtasks will be evaluated concurrently. scss anywhere in the project folder and if we change them, css task will run. From the example above, we can call grunt watch:sass and it will only evaluate files that end in. └── main.scss mkdir -p project1/ grunt.loadNpmTasks('grunt-contrib-watch') Īs you can see we can segregate tasks in subtasks that are called only when we need them. The initial project folder structure should look like this: project In this tutorial we will build this workflow: use Sass to write the stylesheets, CoffeeScript for scripts, introduce asset pipeline (concatenation and minification) and live reload of the page whenever there is a change in source files. First you need to install Grunt for the command line as a global module, after which you have grunt command available globally. Run those tasks in the command line while you work.Create package.json and list dependencies (Grunt and plugins).Let’s first breakdown a typical workflow to get a big picture: cleaning and copying files and folders,.concatenation and minification of assets,.Sass, Less and CoffeeScript processing,.There are close to 4,000 Grunt plugins available for different tasks such as: Grunt’s functionality depends on plug-ins and those depend on your needs. All the configuration is done in regular Javascript (or CoffeeScript). Grunt.js uses power of Node.js to work and it runs from your command line. If you work in a team environment that means you can work with a set of unified commands and everyone will share a common workflow. The configuration takes some time to set up, needs some project and asset planning but it will save you a lot of time in the long-run. Doing this manually soon becomes tiring as you spend a lot of time on repetitive, menial tasks, AKA grunt work.Ī solution to that problem is to automate all menial tasks into automated Grunt tasks. Let’s say you’re a front-end developer and you use Sass, some CoffeeScript, need to minimize your stylesheets and scripts (asset compilation), and on top of that you want to see changes in real time in your browser whenever you change a source file. The project’s homepage lists many big players in software development that use Grunt in their development as part of continuous integration workflow. It runs custom defined repetitious tasks and manages process automation. Grunt is a command line Javascript task runner utilizing Node.js platform.
0 Comments
Leave a Reply. |