Ignore gives you the possibility to ignore certain files or url's from being handled by connect-livereload. If you need liveReload on static html files, then place it before the static routes. In your connect or express application add this after the static and before the dynamic routes. To check our code, we add a linting check or perform various custom tests, everytime we build/serve our application. grunt. For example, to uglifiy & minify code files. grunt-contrib-connect or grunt-contrib-watch.Ĭonnect-livereload itself does not serve the livereload.js script. Grunt is a JavaScript Task Runner, which can be used to automate tasks, that we have to perform frequently while building an application. This middleware can be used with a LiveReload module e.g. Note: if you use this middleware, you should make sure to switch off the Browser LiveReload Extension if you have it installed. Install npm install connect-livereload -save-dev Check if the LiveReload browser extension icon is well activated, in Firefox the icon comes green, in Chrome the small dot inside the circle becomes full black important : if everything is good, if you enter in your browser your IP:35729 example : 200.120.00.01:35729, you'll see some welcome message like: tinylr 'Welcome' version '0.2. If you are happy with a browser plugin, then you don't need this middleware. My package.Connect middleware for adding the livereload script to the response. I'm not sure that livereload works with the baked in "watch" task and I've been using grunt-regarde of late. Keep in mind, this is how I have it set up and it seems to work most of the time.įor starters, you'll want to make sure you've udpated your package.json with the right dependencies. ![]() I ran into issues with this one too so let me do what I can to explain (or at least get you up and running). grunt-contrib-watch now has livereload support baked in. For this example, let’s assume that your static website is located in the client/ folder. or provide a functional example with some explanation of why it is functional.Įdit: Check versioning info. Here are the steps to setting this up using the watch and connect plugins, along with the connect-livereload (a piece of Connect middleware that is not grunt-specific).explain these unexplained parts of the readme, if those answers are what I need to understand the plugin.point me towards a tutorial that is much more effective than the current readme. ![]() I guess I'm asking if someone can please: "All the browsers listening on the livereload port will be reloaded" - but how do I know which browser is listening to which port? Do I need to learn all about ports before I can try using livereload? (Any suggestion on how to best learn about that?)įinally, in the example, there is a folderMount function that doesn't seem related to any of the documentation before. The readme mentions middleware that "must be the first one inserted" - but inserted into what, before what else? And how is it inserted?Īnd I suppose I don't understand how I need to manipulate ports. Is grunt-contrib-connect required? What does it do, and how do I use it? Do I need to learn connect before I try using livereload? The documentation says the livereload task "must be passed the list of files that have changed" - but how do I pass it this list of files? The example does not seem to illustrate this. Here are the kinds of questions I have, based on the readme: Can someone please explain how to get started with this tool? I have searched for a better explanation in a blog post or tutorial or whatever, but haven't been able to find one. Example from Gruntfile. The readme seems to skip over everything that I need explained, and then ends with an example that doesn't work when I try it and doesn't seem directly related to the documentation. I installed also Yeoman and it's using out of the box grunt-contrib-livereload package, but from what I understood it's using Node.js Connect server for serving client-side files, thus being separated from my Node.js application. I'm trying to use grunt-contrib-livereload, but can't seem to figure it out.
0 Comments
Leave a Reply. |