Какая правильная структура файлов front-end проекта и почему?
distnode_modulessrcgulpfile.jspackage.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 это по вашему желанию. Каждый делает по своему.
У каждого проекта своя структура. Какая кажется наиболее удобной, понятной, простой для проекта - та и правильная. Для каждого конкретного проекта