How to organize your project for the frontend?

Question

Layout

Started learning frontend assembly, gulp. I have a working folder where all the sources are and a folder that goes into production. I'm interested in the file and folder names and their location within the folders.
I have all css combined into one file as well as html and js. Each site has blocks, I will write each block in a separate file, what would you advise to name them? Who has some template blanks? Who organizes their project?

Answer 1

everything is very simple. There is such a feature - called xaffolder. I'm using yeoman.io
It has the official webapp generator. In the gulp generator package, which is wrapped in sass + bootstrap sass + bower, which is wrapped in a bunch of stuff + chai and mocha (code testers) + browsersync, which runs on port 3001. read on the site what I threw off. A way for the laziest lazy people. As from scratch:
Install nodeJS, gulp bower globally.
You put yo globally (npm i yo -g)
You put the generator globally (npm i generator-webapp -g)
You create a project folder with handles and write one command (yo webapp) A
project with a full architecture is initialized for you. I'm still twisting it by smacks and finishing it.
Start a server (gulp serve command) and start coding furiously

Answer 2

Начни с
https://en.bem.info/methodology/filesystem/

Answer 3

Странный немного вопрос: заходим на github в поиске вбиваем gulp или gulpfile.js и тебе как минимум +100500 вариантов отечественных, зарубежных сборок. Выбираешь тут которая соответствует твоим потребностям и отмечена соответственным количеством разработчиков. Клонируешь ее и пользуйся, ну или переделай чуток под себя. Все.