Thursday, June 19, 2014

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 

4 comments:

  1. Replies
    1. IEEE Final Year Project centers make amazing deep learning final year projects ideas for final year students Final Year Projects for CSE to training and develop their deep learning experience and talents.

      IEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation.

      corporate training in chennai corporate training in chennai

      corporate training companies in india corporate training companies in india

      corporate training companies in chennai corporate training companies in chennai

      I have read your blog its very attractive and impressive. I like it your blog. Digital Marketing Company in Chennai

      Delete