- Added default grunt task

- Updated all grunt tasks to their latest versions
- Added BrowserSync for dev
- Now using grunt-contrib-watch

Author: wdamien

.gitignore

@@ -28,3 +28,4 @@ build/
 #-----------------------------
 _db.php
 regexr.css
+*.map

Gruntfile.js

@@ -1,28 +1,29 @@
 var path = require("path");
 var uglify = require("uglify-js");
 
-var folderMount = function folderMount(connect, point) {
-	return connect.static(path.resolve(point));
-};
-
 module.exports = function (grunt) {
-
 	/*
 	Load all the tasks we need
+	*/
+
+	/*
+	*************************************
+	**** About: grunt-yui-compressor ****
+	*************************************
 	Usually we use uglifyJS for code minification.
 	However uglify breaks the Unicode characters Codemirror uses in its RegEx expressions,
 	whereas yui does not.
 	 */
 	grunt.loadNpmTasks("grunt-yui-compressor");
+	grunt.loadNpmTasks("grunt-contrib-watch");
 	grunt.loadNpmTasks("grunt-contrib-uglify");
 	grunt.loadNpmTasks("grunt-contrib-sass");
 	grunt.loadNpmTasks("grunt-contrib-connect");
 	grunt.loadNpmTasks("grunt-contrib-clean");
 	grunt.loadNpmTasks("grunt-contrib-htmlmin");
 	grunt.loadNpmTasks("grunt-contrib-copy");
 	grunt.loadNpmTasks("grunt-contrib-concat");
-	grunt.loadTasks("tasks/");
-
+	grunt.loadNpmTasks('grunt-browser-sync');
 
 	grunt.initConfig({
 		pkg: grunt.file.readJSON("package.json"),
@@ -76,21 +77,25 @@ module.exports = function (grunt) {
 			}
 		},
 
-		watchSass: {
-			run: {
-				options: {
-					compass: true,
-					// In prep-tasks, we change the style for a build, to nested;
-					style: "nested", // Can be nested, compact, compressed, expanded
-					"line-numbers": true,
-					precision: 2,
+		browserSync: {
+			bsFiles: {
+				src: ["css/*.css", "js/**/.js", "index.html"]
+			},
+			options: {
+				server: {
+					baseDir: "./"
 				},
-				files: {
-					"css/regexr.css":"scss/regexr.scss"
-				}
+				watchTask: true
 			}
 		},
 
+		watch: {
+			sass: {
+				files: ['scss/**/*.scss'],
+				tasks: ['sass'],
+			},
+		},
+
 		cssmin: {
 			options: {
 				report: false
@@ -124,9 +129,9 @@ module.exports = function (grunt) {
 				options: {
 					hostname: "*",
 					keepalive:true,
-					middleware: function (connect, options) {
-						return [folderMount(connect, grunt.config.get("deployFolder"))]
-					}
+					useAvailablePort: true,
+					open: true,
+					base: './build/'
 				}
 			}
 		},
@@ -163,6 +168,12 @@ module.exports = function (grunt) {
 		grunt.file.write(grunt.config.get("deployFolder")+"index.html.tmp", output);
 	});
 
+	grunt.registerTask("default", [
+		"sass",
+		"browserSync",
+		"watch",
+	]);
+
 	grunt.registerTask("build", [
 		"clean:build",
 		"sass",
@@ -192,7 +203,7 @@ module.exports = function (grunt) {
 				}
 			});
 		}
-		
+
 		if (missing.length) {
 			// \x07 == beep sound in the terminal.
 			grunt.log.warn("\x07Missing ", missing.length + " scripts.\n\t" + missing.join("\n\t"));

README.md

@@ -30,14 +30,8 @@ After node is setup, install the other dependencies. You may want to familiarize
 	# Install all the dependencies from package.json
 	npm install
 
-### Setup
-#### Compile sass
-The only requirement for development is to compile the sass files. This can be achieved manually via ```grunt sass;```
-or for development you can watch for changes use ```grunt watchSass;```
-You can also use any third-party sass compiler. Examples are; Using a WebStorm watcher or CodeKits built compiler.
-
-#### Other setup
-There is no other setup required, grunt build mainly prepares the source for deployment.
+### Development
+Run ```grunt;``` to start a local dev server. grunt will also watch for changes in the local sass and javascript files.
 
 ### Building
 To prepare the site for a deploy run:
@@ -52,6 +46,7 @@ This command will:
 * Inject js/index.template.js into the index.html file
 * Minify the index.html file
 
+
 # Code Style
 If you would like to contribute back to RegExr.com please send us pull requests.
 Please make sure they are well formatted and follow the style specified out in the existing files.

package.json

@@ -1,18 +1,20 @@
 {
   "name": "RegExr",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "repository": "http://github.com/gskinner/regexr/regexr.git",
   "devDependencies": {
-    "grunt": "~0.4.2",
-    "grunt-contrib-htmlmin": "~0.1.3",
-    "grunt-contrib-sass": "~0.6.0",
-    "grunt-yui-compressor": "~0.3.0",
-    "grunt-contrib-connect": "~0.6.0",
-    "grunt-contrib-clean": "~0.5.0",
-    "grunt-contrib-copy": "~0.5.0",
-    "uglify-js": "~2.4.11",
-    "grunt-contrib-uglify": "^0.4.0",
-    "grunt-contrib-concat": "^0.4.0"
+    "grunt": "^0.4.5",
+    "grunt-browser-sync": "^2.0.0",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-connect": "^0.9.0",
+    "grunt-contrib-copy": "^0.7.0",
+    "grunt-contrib-htmlmin": "^0.4.0",
+    "grunt-contrib-sass": "^0.9.2",
+    "grunt-contrib-uglify": "^0.8.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-yui-compressor": "^0.3.3",
+    "uglify-js": "^2.4.16"
   },
   "engine": "node >= 0.10.24"
 }