[TASK] Replace grunt-connect with browser-sync

- Better for device testing
- Inject Scss
- Split watcher for faster reload
- Watch index.html

Gruntfile.js

@@ -5,7 +5,6 @@ module.exports = function (grunt) {
 
   grunt.registerTask("default", ["bower-install-simple", "lint", "copy", "sass", "postcss", "requirejs:default", "inline"]);
   grunt.registerTask("lint", ["sasslint", "eslint"]);
-  grunt.registerTask("dev", ["bower-install-simple", "lint", "copy", "sass", "requirejs:dev"]);
-  grunt.registerTask("serve", ["dev", "connect:server", "watch"]);
+  grunt.registerTask("serve", ["bower-install-simple", "lint", "copy", "sass", "requirejs:dev", "browserSync", "watch"]);
 };
 

package.json

@@ -17,12 +17,11 @@
     "eslint-config-defaults": "^9.0.0",
     "grunt": "^1.0.1",
     "grunt-bower-install-simple": "^1.2.3",
+    "grunt-browser-sync": "^2.2.0",
     "grunt-check-dependencies": "^0.12.0",
     "grunt-contrib-clean": "^1.0.0",
-    "grunt-contrib-connect": "^1.0.2",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-requirejs": "^1.0.0",
-    "grunt-contrib-uglify": "^1.0.1",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-eslint": "^18.1.0",
     "grunt-inline": "^0.3.6",

tasks/development.js

@@ -2,37 +2,42 @@ module.exports = function (grunt) {
   "use strict";
 
   grunt.config.merge({
-    connect: {
+    "browserSync": {
+      dev: {
+        bsFiles: {
+          src: [
+            'build/*.css',
+            'build/*.js',
+            'build/*.html'
+          ]
+        },
+        options: {
+          open: 'local',
+          watchTask: true,
+          injectChanges: true,
           server: {
-        options: {
-          base: {
-            path: "build",
-            options: {
+            baseDir: "build",
             index: "index.html"
           }
-          },
-          livereload: true
         }
       }
     },
     watch: {
-      sources: {
-        options: {
-          livereload: true
+      html: {
+        files: ["html/index.html"],
+        tasks: ["copy"]
       },
-        files: ["*.css", "app.js", "lib/**/*.js", "*.html", "scss/**/*.scss"],
-        tasks: ["dev"]
+      sass: {
+        files: ["scss/**/*.scss"],
+        tasks: ["sasslint", "sass"]
       },
-      config: {
-        options: {
-          reload: true
-        },
-        files: ["Gruntfile.js", "tasks/*.js"],
-        tasks: []
+      js: {
+        files: ["app.js", "lib/**/*.js"],
+        tasks: ["eslint", "requirejs:dev"]
       }
     }
   });
 
-  grunt.loadNpmTasks("grunt-contrib-connect");
+  grunt.loadNpmTasks("grunt-browser-sync");
   grunt.loadNpmTasks("grunt-contrib-watch");
 };