title: Gulp JS with live reload - what gets reloaded
body: <p>I am testing Livereload with gulp.js and the Chrome extension for livereload. My gulpfile.js</p>
  
  <pre class="lang-js prettyprint-override"><code>// gulpfile.js
  var gulp = require('gulp'),
      livereload = require('gulp-livereload');
  
  gulp.task('watch', function() {
      var server = livereload();
  
      gulp.watch(['dist/**']).on('change', function(file) {
          server.changed(file.path);
      });
  });
  </code></pre>
  
  <p>In the <code>dist</code> folder, there are 5 files</p>
  
  <ol>
  <li><code>index.html</code> (main page)</li>
  <li><code>app.css</code> (css linked from index.html)</li>
  <li><code>app.js</code> (javascript linked from index.html)</li>
  <li><code>include.html</code> (angularjs partial ng-included in index.html)</li>
  <li><code>unrelated.html</code> (not used by index.html or any other files).</li>
  </ol>
  
  <p>When I edit any of the files, the browser does a full reload of index.html, causing a lost of state. For example, whatever entered in the text input is erased. The only exception is when I edit the css file.</p>
  
  <p>While I understand and expect a full page reload when I edit (1) and only the CSS to be injected without a full page reload when I edit (2), I am not sure if this is the expected behaviour for (3), (4), and (5). Particularly for (5).</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!-- 1: index.html - full reload --&gt;
  &lt;html ng-app&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Test Reload&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="app.css"/&gt; &lt;!-- 2: CSS: no full reload --&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt; &lt;!-- 3: Javascript - full reload  --&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h2&gt;Live Reload&lt;/h2&gt;
      &lt;p class="big"&gt;Testing CSS&lt;/p&gt;
      &lt;input type="text"&gt;
      &lt;hr/&gt;
  
      &lt;div ng-include="'include.html'"&gt;
          &lt;!-- 4: AngularJS Partial - full reload --&gt;
      &lt;/div&gt;
  
      &lt;div ng-controller="ContactController"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="contact in contacts"&gt; {{ contact }} &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- 5: Unrelated - full reload --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My questions are:</p>
  
  <p>Are such behaviours expected? i.e. only editing of styles causes an update of styles without a full page reload. All other editing will cause a full reload.</p>
  
  <p>Am I doing anything wrong here? How can I use livereload correctly?</p>