Watching app\bower_components\angular\angular.js for changes. Watching app\bower_components\angular-route\ for changes. Watching app\bower_components\angular-route\angular-route.js for changes. Watching app\bower_components\angular-mocks\angular-mocks.js for changes. Watching app\bower_components\angular-loader\ for changes. Watching app\bower_components\angular-loader\angular-loader.js for changes. Watching app\index-async.html for changes. Watching app\bower_components for changes. Live reload server started on port: 35729 Verifying property watch exists in config.OK Sample output of the watch task would look as follows: Now, if you save any changes to html/js/css files present under ‘app’ folder, the application would get auto refreshed in all the browsers its opened. To run the application, run the below command More advanced options about this plugin is available in grunt-contrib-watch documentation.Ĭonnect task is just serving the page under a node server, the livereload option for watch is set to use this task’s options for the port configuration for livereload. Under the Watch task, mention all the files that you want to watch for, and perform the live reload. 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. 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.
0 Comments
Leave a Reply. |