What is the role of src and dist folders?

src/ stands for source, and is the raw code before minification or concatenation or some other compilation - used to read/edit the code.

dist/ stands for distribution, and is the minified/concatenated version - actually used on production sites.

This is a common task that is done for assets on the web to make them smaller.

You can see an example here: http://blog.kevinchisholm.com/javascript/node-js/javascript-concatenation-and-minification-with-the-grunt-js-task-runer/