Какая правильная структура файлов front-end проекта и почему?

• dist
  
• node_modules
  
• src
  
• gulpfile.js
  
• package.json
  

src - папка со всеми исходниками верстки (html, css, js, less, coffeescript и т.д.),
dist - папка рабочего проекта скомпилированного из исходников папки src, по команде gulp,
gulpfile.js - скрипт компиляции рабочего проекта,
package.json - мета данные проекта и список необходимых npm библиотек для работы gulpfile.js,
node_modules - сторонние npm библиотеки установленные для компиляции проекта.

Пример gulpfile.js:

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');

gulp.task('default', function() {
    gulp.src('./src/css/**/*.less')
        .pipe(less())
        .pipe(cleanCSS())
        .pipe(gulp.dest('./dist/css/'))
    ;
});

Для такого проекта должны быть установлены 3 npm библиотеки gulp, gulp-less, gulp-clean-css.

Это общепринятый скелетон для любого gulp-проекта. А структура папки src это по вашему желанию. Каждый делает по своему.

У каждого проекта своя структура. Какая кажется наиболее удобной, понятной, простой для проекта - та и правильная. Для каждого конкретного проекта