title: grunt watch & connect
body: <p>I am kinda new to grunt and want to use it with Jekyll and some LESS-compiling.</p>
  
  <p>My problem now is, I already have fully functioning LESS-comipiling with live reload and watch task and can build my jekyll site through grunt, but how do I run something like the <code>jekyll serve</code> or grunt-connect and <code>grunt watch</code> simultaneously?
  I want a grunt task that provides the watching of my LESS-files etc, builds the jekyll site and then runs a small web server with grunt-connect or whatever.</p>
  
  <p>My Gruntfile.js so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>'use strict';
  module.exports = function (grunt) {
  
      grunt.initConfig({
          jshint: {
              options: {
                  jshintrc: '.jshintrc'
              },
              all: [
                  'Gruntfile.js',
                  'js/*.js',
                  '!js/scripts.min.js'
              ]
          },
          less: {
              dist: {
                  files: {
                      'css/styles.min.css': [
                          'less/app.less'
                      ]
                  },
                  options: {
                      compress: true,
                      // LESS source map
                      // To enable, set sourceMap to true and update sourceMapRootpath based on your install
                      sourceMap: false,
                      sourceMapFilename: 'css/styles.min.css.map',
                      sourceMapRootpath: '/'
                  }
              },
              dev: {
                  files: {
                      'css/styles.min.css': [
                          'less/app.less'
                      ]
                  },
                  options: {
                      compress: false,
                      // LESS source map
                      // To enable, set sourceMap to true and update sourceMapRootpath based on your install
                      sourceMap: true,
                      sourceMapFilename: 'css/styles.min.css.map',
                      sourceMapRootpath: '/'
                  }
              }
          },
          uglify: {
              dist: {
                  files: {
                      'js/scripts.min.js': [
                          'vendor/bootstrap/js/transition.js',
                          'vendor/bootstrap/js/alert.js',
                          'vendor/bootstrap/js/button.js',
                          'vendor/bootstrap/js/carousel.js',
                          'vendor/bootstrap/js/collapse.js',
                          'vendor/bootstrap/js/dropdown.js',
                          'vendor/bootstrap/js/modal.js',
                          'vendor/bootstrap/js/tooltip.js',
                          'vendor/bootstrap/js/popover.js',
                          'vendor/bootstrap/js/scrollspy.js',
                          'vendor/bootstrap/js/tab.js',
                          'vendor/bootstrap/js/affix.js',
                          'vendor/*.js',
                          'js/_*.js'
                      ]
                  },
                  options: {
                      // JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
                      // sourceMap: 'assets/js/scripts.min.js.map',
                      // sourceMappingURL: '/app/themes/roots/assets/js/scripts.min.js.map'
                  }
              }
          },
          watch: {
              less: {
                  files: [
                      'less/*.less',
                      'less/bootstrap/*.less'
                  ],
                  tasks: ['less:dev']
              },
              js: {
                  files: [
                      '&lt;%= jshint.all %&gt;'
                  ],
                  tasks: ['jshint', 'uglify']
              },
              livereload: {
                  // Browser live reloading
                  // https://github.com/gruntjs/grunt-contrib-watch#live-reloading
                  options: {
                      livereload: true
                  },
                  files: [
                      '_site/*'
                  ]
              }
          },
          clean: {
              dist: [
                  'css/styles.min.css',
                  'css/styles.min.css.map',
                  'js/scripts.min.js',
                  '_site/*'
              ]
          },
          jekyll: {                             // Task
              options: {                          // Universal options
                  bundleExec: true,
                  src : '&lt;%= app %&gt;'
              },
              dist: {                             // Target
                  options: {                        // Target options
                      dest: '&lt;%= dist %&gt;',
                      config: '_config.yml'
                  }
              },
              serve: {                            // Another target
                  options: {
                      serve: true,
                      drafts: true
                  }
              }
          },
          connect: {
              server: {
                  options: {
                      keepalive: true
                  }
              }
          }
      });
  
      // Load tasks
      grunt.loadNpmTasks('grunt-contrib-clean');
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-less');
      grunt.loadNpmTasks('grunt-jekyll');
      grunt.loadNpmTasks('grunt-contrib-connect');
  
      // Register tasks
      grunt.registerTask('default', [
          'clean',
          'less:dist',
          'uglify',
          'jekyll:dist'
      ]);
      grunt.registerTask('dev', [
          'watch'
      ]);
  
  };
  </code></pre>