Environment setup for front end?

Question

css

Good day, friends!
On some site I saw an article about components, where the author so vividly puts together the site piece by piece, and I was so offended that I still typeset in the old fashioned way (no, don’t think, I haven’t suffered from tables for a long time).
And now I have a question, how to organize the environment (more precisely, what does the environment consist of?) I asked Google, Google answered me "node and git, and BEM there too." I told him, and then how to cook soup (website) from this? And he smiled mysteriously at me and issued a request "enter captcha".
Alas, this irony is from hopelessness.
Thank you.

Answer 1

I understand your problem. Just finished building my environment, here you go:
https://github.com/web-worddoc/primary (Old build)
https://github.com/web-worddoc/Boilerplate (New build)
html is split into modules with using pug (former jade), namely, using the built-in "include"
css is divided into modules and going to sass
js is broken into modules using require js (I didn’t crush it very much, it’s more convenient for me in large pieces), which is especially convenient if you want get rid of spaghetti code
Build itself on gulp, it's worth typing gulp watch through the console and start writing code.
I hope it helps)
PS For the actual assembly of the project in production, you prescribe gulp build.

Answer 2

Depends on whether you are going to make a website (that is, with a lot of content available to search engines, layout, design, with little reuse of components and little interaction in general) or a web application (with a lot of interaction, usually after authorization, with a lot of the number of reusable components).
For web apps I can recommend https://github.com/facebookincubator/create-react-app with https://www.npmjs.com/package/custom-react-scripts...- this kit will give you a quick start in building a static React application with SASS and CSS modules (BEM classes are generated automatically, styles belong to the components). You can tie it to any backend if you want, but it won't give you what you need for a content-loaded site: no full markup generation on the server. Some alternatives are listed here: https://github.com/facebookincubator/create-react-...
Don't take it as self-promotion, but recently talked about how to think in components - might be useful:
1. https://www.slideshare .net/IvanBabak/think-compone...
2. https://www.slideshare.net/IvanBabak/think-compone...

Answer 3

install yeoman with the command npm install -g yo
install webapp-generator (which will generate a default template for the future site) with the command npm install -g webapp-generator
install gulp-cli and bower with the command npm install -g gulp-cli bower
and finally the command yo webappto raise the framework
In general, all this is explained on the yeoman.io
site itself UPDATE: since this question interested a lot of people, I wrote a simple starter for layout with pug .
in short: under the hood is a project that scaffolds webapp-generator, only adapted to work with pug, removed the tests folder, added gulp-uncss (to cut off unused framework styles) and cleaned up gulpfile.js
In general, fork, like, pull-request (if you want )

Answer 4

webdesign-master.ru/blog/tools/2016-03-09-gulp-beg...

Answer 5

Start with this old Grunt tutorial and it will take you to Gulp and Webpack

Answer 6

Well, the question is not quite complete: I would like to hear what you use on the project, the technology stack. Get rid of this already. The network is full of boilerplates for all occasions. See the docks for a particular boilerplate, what it is based on, then google the docks for the build system that the particular boilerplate is based on. Cut out the unnecessary, file it with a file and voila: a ready-made assembly ecosystem on the project. So in my opinion you need to start by describing the problems that your system should solve specifically, what framework you use (and do you use?), Do you need a js collector or do you have bare html + css. The irony is wonderful, but the specifics are still priceless.

Answer 7

Look at this site, there is a lot written about it. You are interested in the gulp or grunt project builder. I use gulp myself. This guy made an optimized-gulp-sass package, and I use it after modifying it for myself: I made support for scss, connected the html template engine and auto-upload.

Answer 8

Simple pug/scss/es6 starter kit

Answer 9

https://github.com/straykov/initium

Answer 10

Try TARS : a good description, the ability to break down into components, the choice of technologies used, the modularity of the system itself and the ability to customize it for yourself. For beginners and, IMHO, average front-end developers, this is quite a suitable system. Of course, there are limitations, but when they become relevant - already, IMHO, you need to be able to assemble your build system.
Well, as a basis - the BEM methodology.