famo.us handler.js errors after altering main.js - famo.us

Question

After installing famo.us, anytime I try to modify the main.js file with anything other than the default surfaceImage grunt serve simply throws a bunch of handler.js errors and will not load the page.
I can add different images and modify the size of the imageSurface without any issues but as soon as I try to add a surface or add properties to the existing imageSurface I get errors.
This happens with all of the examples posted on GitHub as well (running from the example main.js file). The errors below are pretty typical of what I see anytime I modify the main.js file:
>> File "app\src\main.js" changed.
Running "jscs:src" (jscs) task
Multiple var declaration at app/src/handler.js :
6 |var mainContext = Engine.createContext();
7 |
8 |var surfaceA, surfaceB;
--------^
9 |createSurfaces();
10 |
Illegal trailing whitespace at app/src/handler.js :
33 | }
34 | });
35 |
----------^
36 | surfaceB = new Surface({
37 | size: [100, 100],
Illegal trailing whitespace at app/src/handler.js :
43 | }
44 | });
45 |
----------^
46 | var modifierB = new StateModifier({
47 | origin: [1, 1]
Illegal trailing whitespace at app/src/handler.js :
47 | origin: [1, 1]
48 | });
49 |
----------^
50 | mainContext.add(surfaceA);
51 | mainContext.add(modifierB).add(surfaceB);
Missing line feed at file end at app/src/handler.js :
50 | mainContext.add(surfaceA);
51 | mainContext.add(modifierB).add(surfaceB);
52 |}
--------^
>> 5 code style errors found!
Warning: Task "jscs:src" failed. Use --force to continue
.
I'm still super new to this, so I'm sure I'm missing something pretty stupid, not sure what though. Anyone else have an issue like this?

Answer 1

What you are encountering are the style guides that Famo.us would like you to follow if you are interested in participating in the open source development, or building community plugins.
As you can see, the style guides are very picky.. If you want to just get up and running quick you can simply disable the packages that are enforcing the style. These are eslint and jscs..
Go into your Gruntfile.js and comment out the set of lines under "THIS LINE" or "THESE LINES" to make it look like the following..
Hope this works for you!
/*global module:false*/
/*Generated initially from grunt-init, heavily inspired by yo webapp*/
module.exports = function(grunt) {
'use strict';
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Project configuration.
grunt.initConfig({
// Project settings
config: {
// Configurable paths
app: 'app',
dist: 'dist'
},
// THESE LINES ///////////////
// eslint: {
// options: {
// config: '.eslintrc'
// },
// target: ['<%= config.app %>/src/**/**.js']
// },
// THESE LINES ///////////////
// jscs: {
// src: ['<%= config.app %>/src/**/**.js', 'Gruntfile.js'],
// options: {
// config: '.jscsrc'
// }
// },
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['bower']
},
js: {
files: ['<%= config.app %>/src/**/**.js'],
// THIS LINE ///////////////
// tasks: ['jscs', 'eslint'],
options: {
livereload: true
}
},
gruntfile: {
files: ['Gruntfile.js']
},
css: {
files: ['<%= config.app %>/css/{,*/}*.css'],
options: {
livereload: true
}
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= config.app %>/{,*/}*.html',
'<%= config.app %>/styles/**/**.css',
'<%= config.app %>/images/{,*/}*'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: grunt.option('port') || 5555,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: '0.0.0.0'
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= config.app %>'
]
}
},
dist: {
options: {
open: true,
base: '<%= config.dist %>',
livereload: false
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= config.dist %>/*',
'!<%= config.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Automagically wire-up installed Bower components into your RequireJS config
bower: {
raget: {
rjsConfig: '<%= config.app %>/src/requireConfig.js'
}
},
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/src/{,*/}*.js',
'<%= config.dist %>/css/{,*/}*.css',
// '<%= config.dist %>/images/{,*/}*.*',
'<%= config.dist %>/css/fonts/{,*/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
processhtml: {
dev: {
files: {
'.tmp/index.html': ['<%= config.app %>/index.html']
}
},
dist: {
files: {
'<%= config.dist %>/index.html': ['<%= config.app %>/index.html']
}
},
options: {
commentMarker: 'process'
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, uglify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: '<%= config.dist %>/index.html'
},
// Performs reqrite based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images']
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/css/{,*/}*.css']
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: '{,*/}*.html',
dest: '<%= config.dist %>'
}]
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
dest: '<%= config.dist %>',
src: [
'**/**.{ico,png,txt,jpg}',
'.htaccess',
'images/{,*/}*.webp',
// '{,*/}*.html',
'styles/fonts/{,*/}*.*',
'lib/famous/**/**.css'
]
}]
}
},
requirejs: {
compile: {
options: {
optimize: 'uglify2',
uglify2: {
mangler: {
toplevel: true
}
},
baseUrl: '<%= config.app %>/src',
mainConfigFile: '<%= config.app %>/src/requireConfig.js',
name: 'almond',
include: 'main',
insertRequire: ['main'],
out: '<%= config.dist %>/src/main.js',
wrap: true
}
}
}
});
grunt.registerTask('serve', function(target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
// THESE LINES ///////////////
// 'jscs',
// 'eslint',
'processhtml:dev',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('build', [
'clean:dist',
// THESE LINES ///////////////
// 'jscs',
// 'eslint',
'processhtml:dist',
'useminPrepare',
'requirejs',
'concat',
'cssmin',
'uglify',
'copy:dist',
'rev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'build'
]);
};

Answer 2

A short cut to force it to run or build would be to use the --force option.
Like:
grunt serve --force
or
grunt --force
just make sure there are no non-formatting issues.