From 2fe8fed718f0b10bfc62ae09bb51f70fc7ddd4e9 Mon Sep 17 00:00:00 2001
From: Thomas Park <thomas@thomaspark.me>
Date: Fri, 1 Aug 2014 11:29:58 -0400
Subject: add grunt server and grunt watch, closes #284

---
 Gruntfile.js    | 36 +++++++++++++++++++++++++++++++-----
 help/index.html | 11 ++++++-----
 package.json    |  1 +
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 9931a92b..86762473 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,6 +1,7 @@
 module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-watch');
 
@@ -46,11 +47,29 @@ module.exports = function (grunt) {
       }
     },
     watch: {
-      files: ['*/variables.less', '*/bootswatch.less'],
+      files: ['*/variables.less', '*/bootswatch.less', '*/index.html'],
       tasks: 'build',
       options: {
+        livereload: true,
         nospawn: true
       }
+    },
+    connect: {
+      base: {
+        options: {
+          port: 3000,
+          livereload: true,
+          open: true
+        }
+      },
+      keepalive: {
+        options: {
+          port: 3000,
+          livereload: true,
+          keepalive: true,
+          open: true
+        }
+      }
     }
   });
 
@@ -60,6 +79,13 @@ module.exports = function (grunt) {
     var theme = theme == undefined ? grunt.config('buildtheme') : theme;
     var compress = compress == undefined ? true : compress;
 
+    var isValidTheme = grunt.file.exists(theme, 'variables.less') && grunt.file.exists(theme, 'bootswatch.less');
+ 
+     // cancel the build (without failing) if this directory is not a valid theme
+    if (!isValidTheme) {
+      return;
+    }
+
     var concatSrc;
     var concatDest;
     var lessDest;
@@ -95,13 +121,13 @@ module.exports = function (grunt) {
     grunt.task.run('build:'+t);
   });
 
-  grunt.registerTask('default', 'build a theme', function() {
-    grunt.task.run('swatch');
-  });
-
   grunt.event.on('watch', function(action, filepath) {
     var path = require('path');
     var theme = path.dirname(filepath);
     grunt.config('buildtheme', theme);
   });
+
+  grunt.registerTask('server', 'connect:keepalive')
+
+  grunt.registerTask('default', ['connect:base', 'watch']);
 };
diff --git a/help/index.html b/help/index.html
index 25361bb7..d12e6c4c 100644
--- a/help/index.html
+++ b/help/index.html
@@ -106,11 +106,12 @@
             <h1 id="customization">Customization</h1>
             <p>To modify a theme or create your own, follow the steps below in your terminal. You'll need to have <a href="https://help.github.com/articles/set-up-git" target="_blank">Git</a> and <a href="http://nodejs.org/" target="_blank">Node</a> installed.</p>
             <ol>
-              <li><p><code>git clone https://github.com/thomaspark/bootswatch.git</code></p></li>
-              <li><p><code>npm install</code></p></li>
-              <li><p>Edit <code>variables.less</code> and <code>bootswatch.less</code> in one of the theme directories, or create your own in <code>/custom</code>.</p></li>
-              <li><p>Type <code>grunt swatch:[theme]</code> to build the CSS for a theme, e.g., <code>grunt swatch:amelia</code> for Amelia. Or type <code>grunt swatch</code> to build them all at once. To have <code>grunt</code> available in the command line, install <code>grunt-cli</code> as described on the <a href="http://gruntjs.com/getting-started">Grunt Getting Started page</a>.</p></li>
-              <li><p>You can also run <code>grunt watch</code> to watch for any changes to the LESS files and automatically build a theme on change.</p></li>
+              <li><p>Download the repository: <code>git clone https://github.com/thomaspark/bootswatch.git</code></p></li>
+              <li><p>Install dependencies: <code>npm install</code></p></li>
+              <li><p>Make sure that you have <code>grunt</code> available in the command line. You can install <code>grunt-cli</code> as described on the <a href="http://gruntjs.com/getting-started">Grunt Getting Started page</a>.</p></li>
+              <li><p>Modify <code>variables.less</code> and <code>bootswatch.less</code> in one of the theme directories, or create your own in <code>/custom</code>.</p></li>
+              <li><p>Type <code>grunt swatch:[theme]</code> to build the CSS for a theme, e.g., <code>grunt swatch:amelia</code> for Amelia. Or type <code>grunt swatch</code> to build them all at once. </p></li>
+              <li><p>You can run <code>grunt</code> to start a server, watch for any changes to the LESS files, and automatically build a theme and reload it on change. Run <code>grunt server</code> for just the server, and <code>grunt watch</code> for just the watcher.</p></li>
             </ol>
             <p>Here are additional tips for <a href="http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/" target="_blank">customizing Bootstrap</a>.</p>
           </div>
diff --git a/package.json b/package.json
index 5d94f314..1bc9f4c8 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "grunt": "~0.4.2",
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-connect": "~0.8.0",
     "grunt-contrib-less": "~0.9.0",
     "grunt-contrib-watch": "~0.5.1"
   }
-- 
cgit v1.2.3