Grunt.loadNpmTasks('grunt-contrib-connect') Grunt.loadNpmTasks('grunt-contrib-watch') ![]() Change this to '0.0.0.0' to access the server from outside. serves the application under this configuration watches for the specified files and executes the task associated to be performedįiles : //give the list of all files that you want to watch for and reload The finished gruntfile will look like the one below: More on creating grunt tasks are available in grunt’s documentation. For this, we need to create a new Gruntfile.js file under the root directory. Final step is to create the actual grunt tasks that does the operation.Npm install grunt-contrib-connect -save-devĪfter adding these packages, the package.json of angular-seed-project would look like this. If you are applying these changes on your existing web application, your package.json would look little different. Npm install grunt-contrib-watch -save-dev Watch task will continuously watch for any changes in the directory as configured and connect will serve the application with the specified configuration Run the below command to install these grunt plugins locally to the current project. We would be using the readily available grunt tasks grunt-contrib-watch and grunt-contrib-connectto enable the live reloading.In Mac use `sudo` to avoid any permission issues Run the below command to install grunt-cli package globally.Refer to one of my previous posts to create a new package.json file Create a package.json file (this file would be used by npm to manage all the dependencies) under the root directory.Open Terminal (In Mac)/ Command prompt in admin mode (Windows) and Navigate to the root directory of your web application.The below are the steps involved in achieving our objective of adding grunt tasks for live reload The instructions to download and set the seed project is available in the read me file under the same project. In this post, I will use the angular-seed-project as a sample codebase for which we would be adding live-reload feature using grunt. To follow through this, some basic understanding of node.js, npm packages and grunt.js is desirable. This is exactly what we are going to address in this post. So, every developer would love to ease this process by having a live reloading of the pages in the browsers – that is as and when any changes are done to html/js/css files in the project and saved, the browser automatically reloads the new content. Imagine if we have to test the website in multiple browsers. App.js is the main file that renders first when you run your app.One of the most painstaking aspects of web development is the extra step, one needs to do to see the recently made changes in the browser. It is very time-consuming especially if your app is big and has complex navigation.Įxample: Open the App.js file.You have to reload your entire app to see the changes you have made.When you live to reload your app, a new file is created which will start your app from the beginning.You need to do live reload when you are in deep navigation in your app because sometimes hot reloading will not work in that case. It will not save your app state and completely launch again. Live reloading is as the name suggests, will reload your entire app. ISRO CS Syllabus for Scientist/Engineer Exam.ISRO CS Original Papers and Official Keys. ![]() GATE CS Original Papers and Official Keys.DevOps Engineering - Planning to Production.Python Backend Development with Django(Live).Android App Development with Kotlin(Live). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |