title: Can I live reload styles, templates, and variables with Aglio?
body: <p>I am unable to live-reload LESS and Jade files using Aglio's <code>--server</code> option or <code>gulp</code> paired with <code>connect</code>'s <code>livereload</code> option and the <code>gulp-aglio</code> plugin.</p>
  
  <p>Is this due to caching? Or a limitation of <code>connect</code>'s live reload capability?</p>
  
  <p>The only way to make my changes render is to ctrl-C and run gulp again.</p>
  
  <p>Here is my gulpfile.js:</p>
  
  <pre><code>var 
      gulp = require('gulp'),  
      aglio = require('gulp-aglio'),
      connect = require('gulp-connect'),
      plumber = require('gulp-plumber'),
      watch = require('gulp-watch')
  ;
  
  gulp.task('docs', function(){  
      gulp
          .src('docs/index.apib')
          .pipe(plumber())
          .pipe(aglio({
              themeTemplate: 'docs/templates/triple.jade', 
              themeStyle: 'docs/styles/layout-default.less', 
              themeVariables: 'docs/styles/variables-default.less', 
              themeFullWidth: true
          }))
          .pipe(gulp.dest('docs'))
      ;
  });
  
  gulp.task('server', function(){  
      connect.server({
          livereload: true,
          root: ['docs']
      });
  });
  
  gulp.task('livereload', ['docs'], function(){  
      gulp
          .src(['docs/*.apib'])
          .pipe(plumber())
          .pipe(connect.reload())
      ;
  });
  
  gulp.task('watch', function() {  
      gulp.watch(['docs/*.apib', 'docs/*.md', 'docs/styles/*.less', 'docs/templates/*.jade'], ['docs', 'livereload']);
  })
  
  gulp.task('default', ['docs', 'server', 'livereload', 'watch']);
  gulp.task('build', ['docs']);  
  </code></pre>