Setting up a web project using Grunt, Bower and Yeoman

Grunt: task runner for minification, compilation, unit testing, linting, etc

Bower: Bower is a package manager for the front-end. It offers a generic, unopinionated solution to the problem of front-end package management. It installs the requested package with all dependencies.

Yeoman: is web project scafolding tool. we need to install its genarators for different projects. For example: angular-genarator, or melonjs-generator

brew install npm
npm install -g bower
bower install melonJS
npm install -g yeoman
npm install -g grunt
npm install -g grunt-cli
npm install -g generator-melonjs

mkdir project-folder
cd path/to/project-folder
yo melonjs

Answer to the questions then edit package.json add the followings to dependencies

"grunt-contrib-less": "latest",
"grunt-contrib-watch": "latest"
Run the following command:
npm install

Edit Gruntfile.js as the following
 grunt.loadNpmTasks('grunt-contrib-less');
 grunt.loadNpmTasks('grunt-contrib-watch');

--and edit the paths:
less: {
      style: {
        files: {
          "public/css/style.css": "less/style.less"
        }
      }
    },
    watch: {
      js: {
        files: ['javascript/*.js'],
        tasks: ['concat:js', 'uglify:js'],
        options: {
          livereload: true,
        }
      },
      css: {
        files: ['less/*.less'],
        tasks: ['less:style'],
        options: {
          livereload: true,
        }
      }
    }
Now run grunt watch